Các phần tử biểu mẫu HTML
Chương này mô tả tất cả các thành phần biểu mẫu HTML khác nhau.
Các phần tử <form> HTML
Phần tử HTML <form> có thể chứa một hoặc nhiều phần tử biểu mẫu sau:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
Phần tử <input>
Một trong những phần tử biểu mẫu được sử dụng nhiều nhất là phần tử <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 type .
Ví dụ
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"> Hãy tự mình thử » Tất cả các giá trị khác nhau của thuộc tính type sẽ được đề cập trong chương tiếp theo: Kiểu đầu vào HTML .
Phần tử <nhãn>
Phần tử <label> xác định nhãn cho một số phần tử 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.
Phần tử <select>
Phần tử <select> xác định danh sách thả xuống:
Ví dụ
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Hãy tự mình thử » Phần tử <option> xác định một tùy chọn có thể được chọn.
Theo mặc định, mục đầu tiên trong danh sách thả xuống được chọn.
Để xác định tùy chọn được chọn trước, hãy thêm thuộc tính selected vào tùy chọn:
Giá trị hiển thị:
Sử dụng thuộc tính size để chỉ định số lượng giá trị hiển thị:
Ví dụ
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Hãy tự mình thử »Cho phép nhiều lựa chọn:
Sử dụng thuộc tính multiple để cho phép người dùng chọn nhiều giá trị:
Ví dụ
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Hãy tự mình thử »Phần tử <textarea>
Phần tử <textarea> xác định trường nhập nhiều dòng (vùng văn bản):
Ví dụ
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Hãy tự mình thử » Thuộc tính rows chỉ định số dòng hiển thị trong vùng văn bản.
Thuộc tính cols chỉ định chiều rộng hiển thị của vùng văn bản.
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Bạn cũng có thể xác định kích thước của vùng văn bản bằng cách sử dụng CSS:
Ví dụ
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea> Hãy tự mình thử » Phần tử <button>
Phần tử <button> xác định nút có thể nhấp được:
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Lưu ý: Luôn chỉ định thuộc tính type cho thành phần nút. Các trình duyệt khác nhau có thể sử dụng các loại mặc định khác nhau cho thành phần nút.
Các phần tử <fieldset> và <legend>
Phần tử <fieldset> được sử dụng để nhóm dữ liệu liên quan trong một biểu mẫu.
Phần tử <legend> xác định chú thích cho phần tử <fieldset> .
Ví dụ
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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">
</fieldset>
</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:
Phần tử <datalist>
Phần tử <datalist> chỉ định danh sách các tùy chọn được xác định trước cho phần tử <input> .
Người dùng sẽ thấy danh sách thả xuống gồm các tùy chọn được xác định trước khi họ nhập dữ liệu.
Thuộc tính list của phần tử <input> phải tham chiếu đến thuộc tính id của phần tử <datalist> .
Ví dụ
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Hãy tự mình thử »Phần tử <output>
Phần tử <output> biểu thị kết quả của một phép tính (giống như kết quả được thực hiện bởi một tập lệnh).
Ví dụ
Thực hiện phép tính và hiển thị kết quả trong phần tử <output> :
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Hãy tự mình thử »Bài tập HTML
Các phần tử biểu mẫu HTML
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
