Thẻ Form trong HTML

0
45

Form là một biểu mẫu HTML được sử dụng để thu thập thông tin đầu vào của người dùng. Đầu vào của người dùng thường được gửi đến một máy chủ để xử lý.

Ví dụ:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Gửi">
</form> 

Phần tử <form>

Phần tử HTML <form> được sử dụng để tạo một biểu mẫu HTML cho phép nhập thông tin đầu vào của người dùng:

Cú pháp:

<form>
...
phần tử form
...
</form>

Phần tử <form> là nơi lưu các loại dữ liệu đầu vào khác nhau, chẳng hạn như: trường văn bản, hộp kiểm, nút radio, nút gửi, v.v.

Phần tử <input>

Phần tử HTML <input> là phần tử form được sử dụng nhiều nhất.

Cú pháp:

<input name="tên muốn đặt cho ô input" type="loại input">

Phần tử <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính định dạng.

LoạiMô tả
<input type=”text”>Hiển thị 1 dòng nhập văn bản
<input type=”radio”>Hiển thị 1 nút radio (Để chọn 1 trong nhiều lựa chọn)
<input type=”checkbox”>Hển thị 1 hộp (Để chọn 0 hoặc nhiều lựa chọn)
<input type=”submit”>Hiển thị 1 nút (Để gửi dũ liệu trong form)
<input type=”button”>Hển thị 1 nút để click

Trường văn bản

Ví dụ:

Một biểu mẫu có các trường đầu vào cho văn bản:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

Kết quả của ví dụ trên

Phần tử <label>

Lưu ý: việc sử dụng phần tử <label> trong ví dụ trên.Thẻ <label> xác định nhãn cho nhiều phần tử biểu mẫu.

Phần tử <label> rất hữu ích cho người dùng khi dữ liệu được hiển thị trên mành hình trình duyệt, vì trình đọc màn hình sẽ hiển thị nhãn chú thích để người dùng tập trung vào phần tử chú thích.

Phần tử <label> cũng giúp người dùng dễ dàng nhận biết nếu gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như nút radio hoặc hộp kiểm) – bởi vì khi người dùng nhấp vào văn bản trong phần tử <label>, nó sẽ chuyển nút radio/checkbox.

Thuộc tính for của thẻ <label> phải bằng thuộc tính id của phần tử <input> để liên kết chúng với nhau.

Dữ liệu đầu vào có type="radio"

<input type = "radio"> xác định một nút radio.

Các nút radio cho phép người dùng chọn MỘT trong số các lựa chọn.

Ví dụ:

Một biểu mẫu có các nút radio:

<h2>Radio Buttons</h2>
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form> 

Kết quả của ví dụ trên:

Dữ liệu đầu vào có type="checkbox"

<input type = "checkbox"> xác định một hộp kiểm và cho phép người dùng không chọn tùy chọn nào hoặc nhiều tùy chọn trong số các lựa chọn.

Ví dụ

Một biểu mẫu có nhiều tùy chọn:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
</form> 

Kết quả ví dụ trên

Dữ liệu đầu vào có type="submit"

<input type = "submit"> xác định một nút để gửi dữ liệu biểu mẫu đến trình xử lý biểu mẫu.

Trình xử lý biểu mẫu thường là một tệp trên máy chủ có tập lệnh để xử lý dữ liệu đầu vào.

Trình xử lý biểu mẫu được chỉ định tùy thuộc vào thuộc tính của biểu mẫu.

Ví dụ

Một biểu mẫu có nút gửi:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form> 

Kết quả của ví dụ trên

Thuộc tính Name trong thẻ <input>

Lưu ý rằng mỗi trường đầu vào phải có một thuộc tính Name để được gửi.

Nếu thuộc tính Name bị bỏ qua, giá trị của trường đầu vào sẽ không được gửi đi.

Ví dụ:

Ví dụ này sẽ không gửi giá trị của trường đầu vào “Name”:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form> 

Kết quả ví dụ trên

  • Lưu ý rằng giá trị của trường “First name” sẽ không được gửi, vì phần tử đầu vào không có thuộc tính name.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây