Biểu mẫu trong HTML

Phần tử <form>

Phần tử HTML <form> định nghĩa một hình thức được sử dụng để thu thập dữ liệu của người dùng:

<form>
.
form elements
.
</form>

Một biểu mẫu HTML chứa các phần tử của biểu mẫu. Các phần tử biểu mẫu là các loại phần tử đầu vào khác nhau như văn bản, checkboxes, các button…

Phần tử <input>

Phần tử <input> là phần tử biểu mẫu quan trọng nhất. Phần tử <input> có thể được hiển thị bằng nhiều cách, tùy thuộc vào thuộc tính type. Dưới đây là một số ví dụ:

Dữ liệu nhập vào

<input type=”text”> định nghĩa một dòng cho phép nhập vào dữ liệu văn bản:

<form>
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>
</form>

Lưu ý: biểu mẫu chính không hiển thị và độ dài mặc định của trường văn bản là 20 ký tự.

Radio Button

<input type=”radio”> định nghĩa một radio button. Các radio button cho phép người dùng chọn một trong nhiều sự lựa chọn:

<form>
<input type=”radio” name=”gender” value=”male” checked> Male<br>
<input type=”radio” name=”gender” value=”female”> Female<br>
<input type=”radio” name=”gender” value=”other”> Other
</form>

Submit Button

<input type = “submit”> định nghĩa một nút để gửi dữ liệu biểu mẫu tới một trình xử lý mẫu. Trình xử lý mẫu thông thường là máy chủ vớ tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định trong thuộc tính action của biểu mẫu:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>

Thuộc tính action

Thuộc tính action xác định hành động sẽ được thực hiện khi form được gửi. Thông thường, dữ liệu biểu mẫu được gửi đến một trang web trên máy chủ khi người dùng nhấp chuột vào nút submit.

Trong ví dụ trên, dữ liệu biểu mẫu được gửi đến một trang trên máy chủ có tên “/action_page.php”. Trang này chứa một kịch bản phía máy chủ xử lý dữ liệu biểu mẫu:

<form action=”/action_page.php”>

Nếu thuộc tính action bị bỏ qua, hành động được đặt thành trang hiện hành.

Thuộc tính method

Thuộc tính method xác định phương thức HTTP (GET hoặc POST) để sử dụng khi gửi dữ liệu biểu mẫu:

<form action=”/action_page.php” method=”get”>

hoặc

<form action=”/action_page.php” method=”post”>

Khi nào sử dụng GET?

Phương pháp mặc định khi gửi dữ liệu biểu mẫu là GET. Tuy nhiên, khi sử dụng GET, dữ liệu biểu mẫu sẽ được hiển thị trong trường địa chỉ trang:

/action_page.php?firstname=Mickey&lastname=Mouse

Lưu ý: GET không được sử dụng khi gửi thông tin nhạy cảm. GET thích hợp nhất cho các số liệu ngắn, không nhạy cảm, bởi vì nó có giới hạn về kích thước.

Khi nào sử dụng POST?

Luôn sử dụng POST nếu dữ liệu biểu mẫu chứa thông tin nhạy cảm hoặc cá nhân. Phương pháp POST không hiển thị dữ liệu biểu mẫu được gửi trong trường địa chỉ trang.

POST không có giới hạn kích thước, và có thể được sử dụng để gửi một lượng lớn dữ liệu.

Thuộc tính name

Mỗi dữ liệu đầu vào phải có thuộc tính name được gửi. Nếu thuộc tính name bị bỏ qua, dữ liệu của trường đầu vào đó sẽ không được gửi đi.

Ví dụ này sẽ chỉ gửi trường nhập đầu tiên “Last name”:

<form action=”/action_page.php”>
First name:<br>
<input type=”text” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</form>

Biểu mẫu dữ liệu nhóm với <fieldset>

Phần tử <fieldset> được sử dụng để nhóm các dữ liệu có liên quan trong một biểu mẫu. Phần tử <legend> xác định phụ đề cho phần tử <fieldset>.

<form action=”/action_page.php”>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>
</fieldset>
</form>

Dưới đây là danh sách các thuộc tính <form>: