hẻ option trong HTML - Các thẻ HTML

Thẻ option sẽ tạo ra một tùy chọn trong danh sách các tùy chọn của thẻ <select>.

Sử dụng thẻ <option> bên trong cặp thẻ <select> hoặc <datalist>.

Lưu ý:

Thẻ <optton> có thể sử dụng mà không cần bất cứ thuộc tính nào, tuy nhiên nếu bạn muốn gửi những dữ liệu đã chọn đến server, bạn cần dùng đến thuộc tính value.

Nếu bạn có quá nhiều options, có thể sử dụng thẻ <optgroup>.

Cách sử dụng thẻ option

Ví dụ: sử dụng option để tạo các tùy chọn trong danh sách các khóa học tại Zaidap.com.net.

<select>
	<option>PHP</option>
	<option>Javascript</option>
	<option>HTML-CSS</option>
	<option>Database</option>
	<option>Lập trình mobile</option>
</select>

Mỗi khóa học nằm trong một cặp thẻ <option>, khi chọn option nào thì giá trị của option đó sẽ là giá trị của <select>.

Thuộc tính của thẻ option

• disabled - vô hiệu hóa option, nó vẫn sẽ hiển thị nhưng không cho người dùng chọn.
• label - đặt một label ngắn cho option.
• selected -  nếu option nào có thuộc tính này, nó sẽ là giá tị mặc định được chọn sau khi tải trang.
• value -  giá trị của option, cũng là giá trị của select nếu option đó được chọn.

Ví dụ: sử dụng thuộc tính value và selected của thẻ option. khi submit sẽ alert ra giá trị của select.

<form>
	<select id="select">
		<option value="php">PHP</option>
		<option value="js">Javascript</option>
		<option value="html/css" selected="selected">HTML-CSS</option>
		<option value="db">Database</option>
		<option value="mobile">Lập trình mobile</option>
	</select>
	<input type="submit" name="Submit" onclick='alert(document.getElementById("select").value)'>
</form>

Trình duyệt hỗ trợ

• Chrome
• Firefox
• IE
• Safari
• Opera

Tham khảo: w3schools.com

Nguồn: Zaidap.com.net