Tag input

Đị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

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:

Họ tên: 

Email: 

Ngày sinh: 

 

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 name=”” type=”submit” value=”Submit” />

Input dạng image

Sử dụng như một nút nhấn bằng hình.

<input type=”image” src=”https://lth90.top/wp-content/uploads/2023/09/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ợ

• Internet Explorer 6
• Internet Explorer
• Firefox
• Opera
• Google Chrome
• Safari

Thuộc tính

Cách sử dụng: <input thuoctinh=”giatri” />

Thuộc tính tùy chọn

Thuộc tính tổng quát

Thuộc tính sự kiện

Không được hỗ trợ trong DTD Strict