Định nghĩa và sử dụng
- Tag <input /> được sử dụng cho người dùng nhập hay chọn thông tin.
- Dạng của <input /> có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy trọn type, có thể là text, một checkbox, một trường password, một button radio, một button, ...
- Khuyên: sử dụng tag <label> để tạo nhãn cho các thành phần <input />
Sự khác nhau giữa HTML và XHTML
| HTML4.01 | XHTML1.0 | XHTML1.1 |
|---|---|---|
| Không cần kết thúc tag <input> | Cần khoảng trắng và ký tự "/" để kết thúc tag <input /> | |
Cấu trúc
Tag <input /> phải được viết bên trong một tag <form>
<form action="#">
<input type="" />
</form>
Ví dụ
Html viết:
<form action="#">
<ul>
<li>Họ tên: <input type="text" value="" size="30" /></li>
<li>Email: <input type="text" value="" size="30" /></li>
<li>Ngày sinh: <input type="text" value="" size="10" /></li>
</ul>
<p><input type="submit" value="Gửi" /></p>
</form>
Hiển thị trình duyệt:
Các loại (type) <input />
Input dạng text:
Sử dụng để nhập giá trị text.
<input type="text" name="" value="" size="30" />
Input dạng password:
Text hiển thị bên trong dưới dạng password.
<input type="password" name="" value="" size="30" />
Input dạng hidden:
Dạng này sẽ không hiển thì ra trình duyệt.
Được sử dụng khi không muốn dữ liệu bị thay đổi.
<input type="hidden" name="" value="" size="30" />
Input dạng checkbox:
Được sử dụng cho nhiều lựa chọn khác nhau.
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
Input dạng radio:
Được sử dụng cho một chọn lựa duy nhất.
Các <input /> phải cùng "name", nếu không sẽ không chọn được.
<input type="radio" name="checkbox" value="" />
<input type="radio" name="checkbox" value="" />
Input dạng button:
Sử dụng như một nút nhấn.
<input type="button" name="" value="Click" />
Input dạng button reset:
Dùng để reset lại giá trị trong <form>.
<input type="reset" name=""" value="Reset" />
Input dạng button submit:
Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.
<input type="submit" name=""" value="Submit" />
Input dạng image:
Sử dụng như một nút nhấn bằng hình.
<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />
Input dạng file upload:
Sử dụng để upload file.
<input type="file" name="" />
Trình duyệt hỗ trợ
<input /> được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng: <input thuoctinh="giatri" />
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" | Xác định loại tập tin có thể được gửi thông qua một tập tin tải lên (upload) (sử dụng đối với type="file"). Không được hỗ trợ trong phần lớn các trình duyệt. |
| align | left right top middle bottom |
align="left" | Được dùng để sắp xếp vị trí cho image của <input /> (sử dụng đối với type="image"). Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế. Không được hỗ trợ trong DTD Strict |
| alt | Text | alt="Đây là alt" | Xác định alt cho image của <input /> (chỉ cho type="image") |
| checked | checked | checked="checked" | Xác định một thành phần <input /> được chọn trước khi tải trang (sử dụng đối với type="checkbox" hay type="radio") |
| disabled | disabled | disabled="disabled" | Xác định một thành phần <input /> không hiển thị trước khi tải trang. |
| maxlength | Số | maxlength="50" | Xác định số ký tự nhiều nhất được phép nhập của một trường <input /> (sử dụng đối với type="text" hay type="password") |
| name | name | name="inputName" | Xác định tên cho thành phần <input />. |
| readonly | readonly | readonly="readonly" | Xác định rằng trường <input /> chỉ được đọc (sử dụng đối với type="text" hay type="password") |
| size | Số | size="30" | Xác định chiều rộng của một trường <input />. |
| src | URL | src="img/ btn_name.gif" | Hiển thị đường dẫn của hình, hiển thị như một button submit. |
| type | button | type="button" | Xác định loại hiển thị dạng nút nhấn. |
| checkbox | type="checkbox" | Xác định loại hiển thị dạng hộp kiểm. | |
| file | type="file" | Xác định loại hiển thị dạng chọn file. | |
| hidden | type="hidden" | Xác định loại hiển thị dạng ẩn. | |
| image | type="image" | Xác định loại hiển thị dạng hình. | |
| password | type="password" | Xác định loại hiển thị dạng password. | |
| radio | type="radio" | Xác định loại hiển thị dạng chọn lựa. | |
| reset | type="reset" | Xác định loại hiển thị dạng phục hồi. | |
| submit | type="submit" | Xác định loại hiển thị dạng submit. | |
| text | type="text" | Xác định loại hiển thị dạng text.. | |
| value | Giá trị | value="Gửi" | Xác định giá trị của <input />. |
Thuộc tính tổng quát (xem thêm)
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| accesskey | Ký tự | accesskey="g" | Xác định một phím tắc để truy cập vào một thành phần. |
| 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. |
| tabindex | Số | tabindex="5" | Xác định thứ tự tab của 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. |