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áy chủ để xử lý.
Phần tử <form>
Phần tử HTML <form> được sử dụng để tạo biểu mẫu HTML cho người dùng nhập:
<form>
.
form elements
.
</form>
Phần tử <form> là nơi chứa 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 đều đượ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.
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 type .
Dưới đây là một số ví dụ:
| Kiểu | Sự miêu tả |
|---|---|
| <loại đầu vào="văn bản"> | Hiển thị trường nhập văn bản một dòng |
| <loại đầu vào="radio"> | Hiển thị nút radio (để chọn một trong nhiều lựa chọn) |
| <loại đầu vào="hộp kiểm"> | Hiển thị hộp kiểm (để chọn không hoặc nhiều lựa chọn) |
| <loại đầu vào="gửi"> | Hiển thị nút gửi (để gửi biểu mẫu) |
| <loại đầu vào="nút"> | Hiển thị nút có thể nhấp |
Tất cả các loại đầu vào khác nhau đều được đề cập trong chương này: Các loại đầu vào HTML .
Trường văn bản
<input type="text"> xác định trường nhập một dòng để nhập văn bản.
Ví dụ
Một biểu mẫu có các trường nhập 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>
Hãy tự mình thử »Đâ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 độ rộng mặc định của trường đầu vào là 20 ký tự.
Phần tử <nhãn>
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 thành phần của biểu mẫu.
Phần tử <label> rất 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 tử <label> 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 phần tử <label> , nó sẽ chuyển đổi nút radio/hộp kiểm.
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 lại với nhau.
Nút chọn
<input type="radio"> xác định nút radio.
Nút radio cho phép người dùng chọn MỘT trong số các lựa chọn có giới hạn.
Ví 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>
Hãy tự mình thử »Đâ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
<input type="checkbox"> xác định hộp kiểm .
Các hộp kiểm cho phép người dùng chọn các 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ụ
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>
Hãy tự mình thử »Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Nút Gửi
<input type="submit"> xác định nút để gửi dữ liệu biểu mẫu tới 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 action của biểu mẫu.
Ví dụ
Một 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>
Hãy tự mình thử »Đâ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ó 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 nhập "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>
Hãy tự mình thử »Bài tập HTML
Video: Biểu mẫu HTML
