HTML <form> element
HTML <form> element được sử dụng để tạo một HTML form cho dữ liệu nhập vào từ của người dùng:
<form> . form elements . </form>HTML <form> element là nơi chứa cho các loại element đầu vào khác nhau, chẳng hạn như: text fields, checkboxes, radio buttons, submit buttons, v.v.
HTML <input> element
HTML <input> element là element được sử dụng nhiều nhất trong form.
HTML <input> element có thể được hiển thị theo nhiều cách, tùy thuộc vào attribute type.
| Type | Mô tả |
| <input type="text"> | Hiển thị một text input field |
| <input type="radio"> | Hiển thị một radio button (chọn một trong nhiều lựa chọn) |
| <input type="checkbox"> | Hiển thị một checkbox (không chọn hoặc chọn nhiều lựa chọn) |
| <input type="submit"> | Hiển thị một submit button (submiting một form) |
| <input type="button"> | Hiển thị một nút có thể nhấn vào |
Text Fields
<input type="text"> element xác định trường nhập một dòng để nhập văn bản.
Ví dụ
<form> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname"> </form>Đây là cách code HTML ở trên sẽ được hiển thị trong trình duyệt:
HTML <label> Element
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 form element.
<label> element hữu ích cho người dùng screen readers, vì screen readers sẽ đọc to nhãn khi người dùng tập trung vào element đầu vào.
<label> element cũng giúp người dùng gặp khó khăn khi nhấp vào các vùng rất nhỏ (chẳng hạn như radio button hoặc checkbox) - bởi vì khi người dùng nhấp vào văn bản trong <label> element, nó sẽ chuyển vào radio button / checkbox.
Attribute for của thẻ <label> phải bằng attribute id của <input> element để liên kết chúng với nhau.
Radio Buttons
<Input type = "radio"> xác định radio button.
Các radio button cho phép người dùng chọn MỘT trong số các lựa chọn giới hạn.
Ví dụ
<p>Chọn ngôn ngữ web yêu thích của bạn:</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>Đây là cách code HTML ở trên sẽ được hiển thị trong trình duyệt:
Chọn ngôn ngữ web yêu thích của bạn:
Checkboxes
<Input type = "checkbox"> xác định checkbox.
Các checkbox cho phép người dùng chọn tùy chọn KHÔNG hoặc NHIỀU tùy chọn trong một số lựa chọn giới hạn.
Ví dụ
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1">Tôi có xe đạp</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2">Tôi có xe hơi</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3">Tôi có thuyền</label> </form>Đây là cách code HTML ở trên sẽ được hiển thị trong trình duyệt:
Submit Button
<Input type = "submit"> xác định một nút để gửi dữ liệu form đến trình xử lý form.
Trình xử lý form thường là một file trên máy chủ có tập lệnh để xử lý dữ liệu đầu vào.
Trình xử lý form được chỉ định trong attribute action của form.
Ví dụ
<form action="/action_page.php"> <label for="fname">Họ:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Tên:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <input type="submit" value="Submit"> </form>Đây là cách code HTML ở trên sẽ được hiển thị trong trình duyệt: