Biểu mẫu HTML
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ý.
Thí dụ
Phần tử <form>
Phần tử HTML <form>được sử dụng để tạo một biểu mẫu HTML cho đầu vào của người dùng:
<form>
.
form elements
.
</form>
Phần <form>tử là vùng chứa cho các loại phần tử đầ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.
Tất cả các phần tử biểu mẫu khác nhau được đề cập trong chương này: Phần tử biểu mẫu HTML .
Phần tử <input>
Phần tử HTML <input>là phần tử biểu mẫu được sử dụng nhiều nhất.
Một <input>phần tử có thể được hiển thị theo nhiều cách, tùy thuộc vào type
thuộc tính.
Dưới đây là một số ví dụ:
| Loại | Sự miêu tả |
|---|---|
| <input type = "text"> | Hiển thị trường nhập văn bản một dòng |
| <input type = "radio"> | Hiển thị một nút radio (để chọn một trong nhiều lựa chọn) |
| <input type = "checkbox"> | Hiển thị hộp kiểm (để chọn không hoặc nhiều lựa chọn) |
| <input type = "submit"> | Hiển thị nút gửi (để gửi biểu mẫu) |
| <input type = "button"> | Hiển thị một nút có thể nhấp |
Tất cả các kiểu đầu vào khác nhau được đề cập trong chương này: Các kiểu đầu vào HTML .
Trường văn bản
Định <input type="text">nghĩa trường nhập một dòng để nhập văn bản.
Thí 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"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Lưu ý: Bản thân biểu mẫu không hiển thị. Cũng lưu ý rằng chiều rộng mặc định của trường nhập là 20 ký tự.
Phần tử <label>
Lưu ý việc sử dụng <label>phần tử trong ví dụ trên.
Thẻ <label>xác định nhãn cho nhiều phần tử biểu mẫu.
Phần <label>tử này hữu ích cho người dùng trình đọc màn hình, vì trình đọc màn hình sẽ đọc to nhãn khi người dùng tập trung vào phần tử đầu vào.
Phần <label>tử 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ư 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 <label>phần tử, nó sẽ chuyển nút radio / hộp kiểm.
Thuộc fortính của <label>thẻ phải bằng idthuộc tính của <input>
phần tử để liên kết chúng lại với nhau.
Các nút radio
Định <input type="radio">nghĩa 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 giới hạn.
Thí dụ
Một biểu mẫu có các nút radio:
<p>Choose your favorite Web language:</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 mã 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:
Hộp kiểm
Hộp kiểm<input type="checkbox"> xác định .
Hộp kiểm 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.
Thí dụ
Một biểu mẫu có các hộp kiểm:
<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>
</form>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Nút gửi
Định <input type="submit">nghĩa 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 trong thuộc tính của biểu mẫu action
.
Thí dụ
Biểu mẫu có nút gửi:
<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="Submit">
</form>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Thuộc tính tên cho <input>
Lưu ý rằng mỗi trường đầu vào phải có một namethuộc tính được gửi.
Nếu namethuộc tính bị bỏ qua, giá trị của trường đầu vào sẽ hoàn toàn không được gửi.
Thí dụ
Ví dụ này sẽ không gửi giá trị của trường đầu vào "Tên":
<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>