HTML - Biểu mẫu

Biểu mẫu HTML là bắt buộc khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ, trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng, v.v.

Một biểu mẫu sẽ nhận đầu vào từ khách truy cập trang web và sau đó sẽ đăng nó lên một ứng dụng back-end như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý yêu cầu đối với dữ liệu được truyền dựa trên logic nghiệp vụ đã xác định bên trong ứng dụng.

Có sẵn các phần tử biểu mẫu khác nhau như trường văn bản, trường vùng văn bản, menu thả xuống, nút radio, hộp kiểm, v.v.

HTML <form> được sử dụng để tạo một biểu mẫu HTML và nó có cú pháp sau:

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Thuộc tính biểu mẫu

Ngoài các thuộc tính phổ biến, sau đây là danh sách các thuộc tính biểu mẫu được sử dụng thường xuyên nhất:

Sr.No Thuộc tính & Mô tả
1

action

Tập lệnh phụ trợ đã sẵn sàng để xử lý dữ liệu đã chuyển của bạn.
2

method

Phương pháp được sử dụng để tải lên dữ liệu. Thường được sử dụng nhất là phương thức GET và POST.
3

target

Chỉ định cửa sổ hoặc khung đích nơi kết quả của tập lệnh sẽ được hiển thị. Nó nhận các giá trị như _blank, _self, _parent, v.v.
4

enctype

Bạn có thể sử dụng thuộc tính enctype để chỉ định cách trình duyệt mã hóa dữ liệu trước khi nó gửi đến máy chủ. Giá trị có thể là -

application/x-www-form-urlencoded - Đây là phương pháp tiêu chuẩn mà hầu hết các biểu mẫu sử dụng trong các tình huống đơn giản.

mutlipart/form-data - Điều này được sử dụng khi bạn muốn tải lên dữ liệu nhị phân ở dạng tệp như hình ảnh, tệp word, v.v.

Note- Bạn có thể tham khảo Perl & CGI để biết chi tiết về cách hoạt động của tải lên dữ liệu biểu mẫu.

Kiểm soát biểu mẫu HTML

Có nhiều loại điều khiển biểu mẫu khác nhau mà bạn có thể sử dụng để thu thập dữ liệu bằng biểu mẫu HTML -

  • Điều khiển nhập văn bản
  • Kiểm soát hộp kiểm
  • Điều khiển hộp radio
  • Chọn điều khiển hộp
  • Hộp chọn tệp
  • Kiểm soát ẩn
  • Các nút có thể nhấp
  • Nút Gửi và Đặt lại

Điều khiển nhập văn bản

Có ba kiểu nhập văn bản được sử dụng trên biểu mẫu -

  • Single-line text input controls- Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng HTML<input> nhãn.

  • Password input controls- Đây cũng là kiểu nhập văn bản một dòng nhưng nó che đi ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ HTMl <input>.

  • Multi-line text input controls- Điều này được sử dụng khi người dùng được yêu cầu cung cấp các chi tiết có thể dài hơn một câu đơn lẻ. Các điều khiển đầu vào nhiều dòng được tạo bằng HTML<textarea> nhãn.

Các điều khiển nhập văn bản một dòng

Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ HTML <input>.

Thí dụ

Đây là một ví dụ cơ bản về kiểu nhập văn bản một dòng được sử dụng để lấy tên và họ -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường văn bản.

Sr.No Thuộc tính & Mô tả
1

type

Cho biết loại điều khiển nhập liệu và đối với điều khiển nhập văn bản, nó sẽ được đặt thành text.
2

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
3

value

Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển.
4

size

Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự.
5

maxlength

Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.

Kiểm soát nhập mật khẩu

Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhpassword.

Thí dụ

Đây là một ví dụ cơ bản về kiểu nhập mật khẩu một dòng được sử dụng để lấy mật khẩu của người dùng -

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường mật khẩu.

Sr.No Thuộc tính & Mô tả
1

type

Cho biết loại kiểm soát đầu vào và đối với kiểm soát nhập bằng mật khẩu, nó sẽ được đặt thành password.
2

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
3

value

Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển.
4

size

Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự.
5

maxlength

Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.

Điều khiển nhập văn bản nhiều dòng

Điều này được sử dụng khi người dùng được yêu cầu cung cấp các chi tiết có thể dài hơn một câu đơn lẻ. Các điều khiển đầu vào nhiều dòng được tạo bằng thẻ HTML <textareosystem.

Thí dụ

Đây là một ví dụ cơ bản về kiểu nhập văn bản nhiều dòng được sử dụng để lấy mô tả mặt hàng -

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính cho thẻ <textareosystem.

Sr.No Thuộc tính & Mô tả
1

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
2

rows

Cho biết số hàng của hộp vùng văn bản.
3

cols

Cho biết số cột của hộp vùng văn bản

Kiểm soát hộp kiểm

Hộp kiểm được sử dụng khi bắt buộc phải chọn nhiều tùy chọn. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhcheckbox..

Thí dụ

Đây là mã HTML mẫu cho biểu mẫu có hai hộp kiểm -

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính cho thẻ <checkbox>.

Sr.No Thuộc tính & Mô tả
1

type

Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành checkbox..
2

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
3

value

Giá trị sẽ được sử dụng nếu hộp kiểm được chọn.
4

checked

Thiết lập để kiểm tra nếu bạn muốn chọn nó bằng cách mặc định.

Điều khiển nút radio

Các nút radio được sử dụng khi trong số nhiều tùy chọn, chỉ cần chọn một tùy chọn. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhradio.

Thí dụ

Đây là mã HTML mẫu cho biểu mẫu có hai nút radio -

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính cho nút radio.

Sr.No Thuộc tính & Mô tả
1

type

Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành radio.
2

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
3

value

Giá trị sẽ được sử dụng nếu hộp radio được chọn.
4

checked

Thiết lập để kiểm tra nếu bạn muốn chọn nó bằng cách mặc định.

Chọn điều khiển hộp

Một hộp chọn, còn được gọi là hộp thả xuống cung cấp tùy chọn để liệt kê các tùy chọn khác nhau dưới dạng danh sách thả xuống, từ đó người dùng có thể chọn một hoặc nhiều tùy chọn.

Thí dụ

Đây là mã HTML mẫu cho biểu mẫu có một hộp thả xuống

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính quan trọng của thẻ <select> -

Sr.No Thuộc tính & Mô tả
1

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
2

size

Điều này có thể được sử dụng để trình bày một hộp danh sách cuộn.
3

multiple

Nếu được đặt thành "nhiều" thì cho phép người dùng chọn nhiều mục từ menu.

Sau đây là danh sách các thuộc tính quan trọng của thẻ <option> -

Sr.No Thuộc tính & Mô tả
1

value

Giá trị sẽ được sử dụng nếu một tùy chọn trong hộp hộp chọn được chọn.
2

selected

Chỉ định rằng tùy chọn này phải là giá trị được chọn ban đầu khi tải trang.
3

label

Một cách thay thế các tùy chọn dán nhãn

Hộp Tải lên Tệp

Nếu bạn muốn cho phép người dùng tải tệp lên trang web của mình, bạn sẽ cần sử dụng hộp tải tệp lên, còn được gọi là hộp chọn tệp. Điều này cũng được tạo bằng cách sử dụng phần tử <input> nhưng thuộc tính type được đặt thànhfile.

Thí dụ

Đây là mã HTML mẫu cho biểu mẫu có một hộp tải tệp lên -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Thuộc tính

Sau đây là danh sách các thuộc tính quan trọng của hộp tải tệp lên:

Sr.No Thuộc tính & Mô tả
1

name

Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị.
2

accept

Chỉ định loại tệp mà máy chủ chấp nhận.

Nút điều khiển

Có nhiều cách khác nhau trong HTML để tạo các nút có thể nhấp. Bạn cũng có thể tạo nút có thể nhấp bằng thẻ <input> bằng cách đặt thuộc tính loại của nó thànhbutton. Thuộc tính type có thể nhận các giá trị sau:

Sr.No Loại & Mô tả
1

submit

Điều này tạo ra một nút tự động gửi biểu mẫu.
2

reset

Điều này tạo ra một nút tự động đặt lại các điều khiển biểu mẫu về giá trị ban đầu của chúng.
3

button

Điều này tạo ra một nút được sử dụng để kích hoạt tập lệnh phía máy khách khi người dùng nhấp vào nút đó.
4

image

Điều này tạo ra một nút có thể nhấp được nhưng chúng ta có thể sử dụng hình ảnh làm nền của nút.

Thí dụ

Đây là mã HTML mẫu cho một biểu mẫu có ba loại nút -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

Kiểm soát biểu mẫu ẩn

Các điều khiển biểu mẫu ẩn được sử dụng để ẩn dữ liệu bên trong trang mà sau này có thể được đẩy lên máy chủ. Điều khiển này ẩn bên trong mã và không xuất hiện trên trang thực tế. Ví dụ, biểu mẫu ẩn sau đang được sử dụng để giữ số trang hiện tại. Khi người dùng nhấp vào trang tiếp theo thì giá trị của điều khiển ẩn sẽ được gửi đến máy chủ web và ở đó nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo dựa trên trang hiện tại đã qua.

Thí dụ

Đây là mã HTML mẫu để hiển thị việc sử dụng điều khiển ẩn -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved