Thẻ option trong HTML

• Bùi Tấn Lực
• 23
• 29/09/2025

Thẻ option trong HTML dùng để tạo ra những phần tử trong một danh sách sổ xuống có thể chọn được, danh sách đó là: select, datalist, optgroup, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ option trong HTML

Chức năng của Thẻ option trong HTML

Thẻ option trong HTML dùng để tạo ra những phần tử trong một danh sách sổ xuống có thể chọn được, danh sách đó là: select, datalist, optgroup, bạn có thể tạo value gắn liền với từng option hoặc có thể selected một thẻ option để cho nó hiện lên khi load trang xong, để cho thẻ option chỉ để nhìn không được chọn bạn disabled vào thẻ đó.

Code Thẻ option trong HTML

Thẻ option trong thẻ select trong HTML

<label for="khoahoc">Chọn khóa học:</label>
<select id="khoahoc" name="chonkhoahoc">
 <option value="">--Hãy chọn một khóa học--</option>
 <option value="1" >Thiết kế website</option>
 <option value="2" >CSS</option>
 <option value="3" >Javascript</option>
 <option value="4" >SEO</option>
</select>

Chạy Thử

Thẻ option dạng optgroup trong thẻ select trong HTML

<label for="tinhthanh">Chọn tỉnh thành:</label>
<select id="tinhthanh" name="chontinhthanh">
    <optgroup label="MIỀN BẮC">
        <option value="hn">Hà Nội</option>
        <option value="nd">Hà Nam</option>
    </optgroup>
    <optgroup label="MIỀN NAM">
        <option value="hcm">TP. Hồ Chí Minh</option>
        <option value="bd">Long An</option>
    </optgroup>    
    <optgroup label="MIỀN TRUNG">
        <option>Quảng Nam</option>
        <option>Đà Nẳng</option>
    </optgroup>
</select>

Chạy Thử

Thẻ option trong thẻ datalist trong HTML

<form action="https://webmoi.vn/code-the-datalist-trong-html/" method="POST">
  <label for="nhanvien">Nhân viên:</label>
  <input list="nhanviens" name="txtnhanvien" id="nhanvien">
  <datalist id="nhanviens">
    <option value="Bùi Tấn Lực">
    <option value="Trần Thị Vân">
    <option value="Bùi Đan Trúc Quỳnh">
    <option value="Nguyễn Thùy Dung">
    <option value="Nguyễn Thảo Nhật Hạ">
  </datalist>
  <input type="submit" value="Tìm Kiếm">
  <p>Lưu ý: datalist không được hỗ trợ trên Safari 12.0 trở xuống</p>
  <p>Lưu ý nữa là giá trị của id trong thẻ datalist không được trùng với các id khác trên trang</p>
</form>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ option trong HTML.

Bùi Tấn Lực

Chia sẻ nội dung đánh giá của bạn về Thẻ option trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn