Thẻ HTML <option>
Định nghĩa và cách sử dụng thẻ <option>
Thẻ <option>
xác định một tùy chọn trong danh sách chọn. Ví dụ sau là một danh sách drop-down với 4 tùy chọn:
<label for="cars">Chọn một xe:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Các phần tử <option>
nằm bên trong phần tử <select>, <optgroup> hoặc <datalist>.
Lưu ý: Thẻ <option>
có thể được sử dụng mà không cần bất kỳ thuộc tính nào, nhưng bạn thường cần thuộc tính giá trị, thuộc tính này cho biết những gì được gửi đến máy chủ khi gửi biểu mẫu.
Mẹo: Nếu có một danh sách dài các tùy chọn, bạn có thể nhóm các tùy chọn có liên quan trong thẻ <optgroup>
.
Hỗ trợ trình duyệt
Phần tử <option> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
disabled | disabled | Chỉ định rằng một tùy chọn sẽ bị vô hiệu hóa |
label | text | Chỉ định nhãn ngắn hơn cho một tùy chọn |
selected | selected | Chỉ định rằng một tùy chọn sẽ được chọn trước khi load trang |
value | text | Chỉ định giá trị được gửi đến máy chủ |
Thuộc tính Global
Thẻ <option>
cũng hỗ trợ các thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <option>
cũng hỗ trợ thuộc tính sự kiện trong HTML.
Các ví dụ
Sử dụng <option>
trong phần tử <datalist>
:
<label for="browser">Chọn trình duyệt của bạn từ danh sách:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Sử dụng <option>
trong các phần tử <optgroup>
:
<label for="cars">Choose a car:</label>
<select id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Cài đặt CSS mặc định
Không có
319
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Những câu nói hài hước về tóc, stt về tóc hay và chất
Hôm qua -
Cách làm 4 món thịt ngâm mắm tỏi chua ngọt thơm ngon ngày Tết
Hôm qua -
Máy tính ngốn bao tiền điện mỗi tháng?
Hôm qua -
Cách sử dụng VPN trên trình duyệt Opera
Hôm qua -
Chiêm ngưỡng loạt ảnh vũ trụ ấn tượng từ kính viễn vọng 10 tỷ USD
Hôm qua 1 -
Cách đổi mật khẩu Wifi, đổi pass wifi VNPT, FPT, Tenda, TP-Link, Viettel trên máy tính, điện thoại
Hôm qua 26 -
Cách bật chế độ riêng cho tài khoản Twitter
Hôm qua -
Internet vệ tinh của Musk đến Đông Nam Á, phí thuê bao 1,1 triệu/tháng
Hôm qua -
Cách lấy lại quyền truy cập ổ cứng, sửa lỗi không mở được ổ cứng
Hôm qua -
Hướng dẫn tạo chữ ký Gmail chuyên nghiệp
Hôm qua