Định nghĩa và sử dụng
- Tag <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng.
- Tag <form> được dùng để truyền dữ liệu lên máy chủ.
- Tag <form> không nên dùng để điều khiển layout.
Cấu trúc
Trong <form> bắt buộc phải có tham số action.
<form action=""></form>
- Một <form> có thể chứa thành phần <input /> như trường text, checkbox, radio-button, button submit,...
- Một <form> cũng có thể chứa thành phần <select>, <textarea>, <fieldset>, <legend> và <label>.
- Bên trong form cũng có thể chứa các tag khác.
Ví dụ
Html viết:
<form action="#">
<ul>
<li>Họ tên: <input type="text" size="30" /></li>
<li>Email: <input type="text" size="30" /></li>
<li>Ngày sinh: <input type="text" size="10" /></li>
</ul>
<p><input type="submit" value="Gửi" /></p>
</form>
Hiển thị trình duyệt:
Trình duyệt hỗ trợ
<form> được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng: <form thuoctinh="giatri"></form>
Thuộc tính bắt buộc.
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| action | URL | action="confirm.php" | Link cụ thể nơi cần gửi dữ liệu form khi được submit (button submit). Không được hỗ trợ trong DTD Frameset. |
Thuộc tính tùy chọn.
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| accept | kiểu MIME | accept="image/gif" | Chỉ định cụ thể các loại tập tin được gửi thông qua tập tin được tải lên. Không được hỗ trợ trong phần lớn các trình duyệt |
| accept-charset | charset | accept-charset="ISO-8859-1" | Chỉ định cụ thể bộ dữ liệu (character-sets) mà máy chủ có thể xử lý cho form dữ liệu. Không được hỗ trợ trong trình duyệt IE |
| enctype | application/
x-www-form-
urlencoded multipart/ form-data text/plain |
enctype="text/plain" | Chỉ định cụ thể dạng dữ liệu gì trước khi gửi lên máy chủ. |
| method | get post |
method="post" | Chỉ định cụ thể gửi dữ liệu bằng phương thức gì. |
| name | name | name="login" | Chỉ định tên cho form. Không được hỗ trợ trong DTD Strict |
| target | _blank _self _parent _top framename |
target="_blank" | Không khuyến khích sử dụng. Chỉ định nơi để mở các link khi action. Không được hỗ trợ trong DTD Strict. |
Thuộc tính tổng quát (xem thêm)
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| class | Tên class | class="section" | Tên class |
| dir | rtl ltr |
dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| id | Tên id | id="layout" | Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| style | Kiểu định dạng | style="color: red" | Xác định một định dạng cho một thành phần. |
| title | Text | title="Đây là title" | Xác định thêm thông tin cho thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
Thuộc tính sự kiện
Không được hỗ trợ trong DTD Strict
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| onclick | Code script | onclick="code" | Script chạy khi click chuột. |
| ondblclick | Code script | ondblclick="code" | Script chạy khi double click chuột. |
| onmousedown | Code script | onmousedown="code" | Script chạy khi button chuột được nhấn. |
| onmousemove | Code script | onmousemove="code" | Script chạy khi di chuyển con trỏ chuột. |
| onmouseout | Code script | onmouseout="code" | Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. |
| onmouseover | Code script | onmouseover="code" | Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. |
| onmouseup | Code script | onmouseup="code" | Script chạy khi button chuột được thả ra. |
| onkeydown | Code script | onkeydown="code" | Script chạy khi nút trên bàn phím được nhấn. |
| onkeypress | Code script | onkeypress="code" | Script chạy khi nút trên bàn phím được nhấn và thả ra. |
| onkeyup | Code script | onkeyup="code" | Script chạy khi nút trên bàn phím được thả ra. |