Chương này mô tả tất cả các phần tử form HTML
Phần tử <input>
Phần tử form quan trọng nhất là phần tử <input>
Phần tử <input> có thể được hiển thị bằng nhiều cách, tùy thuộc vào thuộc tính type.
Ví dụ
<input name="firstname" type="text">
Nếu thuộc tính type bị bỏ qua, trường nhập liệu input có thuộc tính type mặc định là “text”.
Tất cả các loại input sẽ được đề cập trong chương kế.
Phần tử <select>
Phần tử <select> xác định một danh sách thả xuống để lựa chọn.
Ví dụ
<select 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 phần tử <option> xác định một mục để lựa chọn.
Mặc định thì mục đầu tiên sẽ được chọn sẵn.
Nếu muốn chọn trước một mục cụ thể, ta thêm thuộc tính selected vào phần tử option.
Ví dụ
<option value="fiat" selected>Fiat</option>
Hiển thị các giá trị
Sử dụng thuộc tính size để chỉ ra số lượng giá trị được hiển thị
Ví dụ
<select 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 chọn nhiều mục
Sử dụng thuộc tính multiple để cho phép người dùng chọn nhiều hơn một giá trị
Ví dụ
<select 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ử <textarea>
Phần tử <textarea> xác định trường nhập liệu nhiều dòng (một vùng văn bản)
Ví dụ
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Thuộc tính rows chỉ ra số dòng được hiển thị trong vùng văn bản.
Thuộc tính cols chỉ ra độ rộng của vùng văn bản.
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 dùng CSS
Ví dụ
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Phần tử <button>
Phần tử <button> xác định một nút có thể nhấn:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
Lưu ý: Luôn chỉ ra thuộc tính type của phần tử button. Các trình duyệt khác nhau có thể sẽ dùng các type mặc định khác nhau cho phần tử button.
Các phần tử form HTML5
Trong form của HTML5 có thêm mới các phần tử sau
- <datalist>
- <output>
Lưu ý: trình duyệt không hiển thị các phần tử không xác định. Các phần tử mới, không được hỗ trợ trên các trình duyệt cũ sẽ không “làm hỏng” trang của bạn.
Phần tử <datalist>
Phần tử <datalist> chỉ ra một danh sách được xác định sẵn cho một phần tử <input>
Người dùng sẽ nhìn thấy một danh sách thả xuống có các lựa chọn định sẵn nếu họ nhập 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="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Phần tử <output> HTML5
Phần tử <output> biểu thị kết quả của một phép tính (giống như được thực hiện bởi script)
Ví dụ
Thực hiện phép tính và hiển thị kết quả trong một 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>
Bảng tham khảo
|
Tag |
Description |
|
<form> |
Xác định một biểu mẫu cho người dùng nhập liệu |
|
<input> |
Xác định khung nhập liệu |
|
<textarea> |
Xác định một khung nhập liệu nhiều dòng (vùng văn bản) |
|
<label> |
Xác định tiêu đề cho một khung nhập liệu |
|
<fieldset> |
Nhóm các phần tử liên quan trong biểu mẫu |
|
<legend> |
Xác định tiêu đề cho phần tử <fieldset> |
|
<select> |
Xác định danh mục thả xuống (drop-down list) |
|
<optgroup> |
Xác định một nhóm các lựa chọn liên quan trong danh mục thả xuống |
|
<option> |
Xác định một lựa chọn trong danh mục thả xuống |
|
<button> |
Xác định một nút có thể nhấn |
|
<datalist> |
Chỉ ra một danh sách xác định trước cho khung nhập liệu |
|
<output> |
Xác định kết quả của một phép tính |
Trích nguồn từ: (https://www.w3schools.com/html/html_form_elements.asp)
