Phần tử biểu mẫu HTML
Chương này mô tả tất cả các phần tử 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à <input>phần tử.
Phần <input>tử có thể được hiển thị theo một số cách, tùy thuộc vào type
thuộc tính.
Thí dụ
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Tất cả các giá trị khác nhau của type
thuộc tính được đề cập trong chương tiếp theo:
Các kiểu đầu vào HTML .
Phần tử <label>
Phần <label>tử xác định nhãn cho một số 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.
Phần tử <select>
Phần <select>tử xác định danh sách thả xuống:
Thí 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>
Các <option>phần tử 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 một tùy chọn đã chọn trước, hãy thêm selectedthuộc tính vào tùy chọn:
Thí dụ
<option value="fiat" selected>Fiat</option>
Giá trị có thể nhìn thấy:
Sử dụng sizethuộc tính để chỉ định số lượng giá trị hiển thị:
Thí 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>
Cho phép Nhiều Lựa chọn:
Sử dụng multiplethuộc tính để cho phép người dùng chọn nhiều giá trị:
Thí 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>
Phần tử <textareosystem
Phần <textarea>tử xác định trường nhập nhiều dòng (vùng văn bản):
Thí dụ
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Thuộc rowstính chỉ định số dòng có thể nhìn thấy trong một vùng văn bản.
Thuộc colstính chỉ định chiều rộng có thể nhìn thấy của một 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:
Thí dụ
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Phần tử <button>
Phần <button>tử xác định một nút có thể nhấp:
Thí dụ
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Lưu ý: Luôn chỉ định typethuộc tính cho phần tử nút. Các trình duyệt khác nhau có thể sử dụng các kiểu mặc định khác nhau cho phần tử nút.
Phần tử <fieldset> và <legend>
Phần <fieldset>tử được sử dụng để nhóm dữ liệu liên quan trong một biểu mẫu.
Phần <legend>tử xác định chú thích cho
<fieldset>
phần tử.
Thí 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>
Đây là cách mã HTML ở trên sẽ được hiển thị trong trình duyệt:
Phần tử <datalist>
Phần <datalist>tử chỉ định danh sách các tùy chọn được xác định trước cho một <input>phần tử.
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 listtính của <input>phần tử, phải tham chiếu đến
idthuộc tính của <datalist>phần tử.
Thí dụ
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Phần tử <output>
Phần <output>tử đại diện cho kết quả của một phép tính (giống như một phép tính được thực hiện bởi tập lệnh).
Thí dụ
Thực hiện một phép tính và hiển thị kết quả trong một <output>phần tử:
<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>
Bài tập HTML
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 .