Thẻ option trong HTML

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

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ử

Các lỗi thường gặp khi sử dụng thẻ option trong HTML

Trong quá trình tạo danh sách lựa chọn bằng thẻ option, nhiều lỗi nhỏ có thể khiến dữ liệu gửi đi không đúng hoặc giao diện hiển thị không như mong muốn. Hiểu rõ những lỗi phổ biến dưới đây sẽ giúp bạn viết mã HTML chính xác, dễ bảo trì và hạn chế lỗi khi tích hợp với biểu mẫu.

Không khai báo thuộc tính value cho option

Thuộc tính value là giá trị được gửi đến máy chủ khi người dùng chọn một mục. Nếu không khai báo, trình duyệt thường sử dụng chính nội dung hiển thị làm giá trị gửi đi. Điều này có thể gây khó khăn khi xử lý dữ liệu hoặc khi cần sử dụng mã định danh ngắn gọn.

Nên đặt giá trị value rõ ràng, nhất quán và phù hợp với dữ liệu được xử lý phía sau để việc kiểm tra, lưu trữ hoặc tìm kiếm trở nên thuận tiện hơn.

<select name="city">
    <option value="hn">Hà Nội</option>
    <option value="hcm">TP. Hồ Chí Minh</option>
    <option value="dn">Đà Nẵng</option>
</select>

Sử dụng nhiều option có selected trong select một lựa chọn

Khi danh sách chỉ cho phép chọn một mục, việc đánh dấu nhiều phần tử bằng thuộc tính selected có thể khiến trình duyệt chỉ lấy một giá trị hoặc tạo kết quả không đồng nhất giữa các trình duyệt.

Đối với danh sách chọn đơn, chỉ nên đánh dấu một phần tử mặc định. Nếu muốn chọn nhiều mục, cần kết hợp với thuộc tính multiple của thẻ select.

<select name="language">
    <option value="vi" selected>Tiếng Việt</option>
    <option value="en">English</option>
    <option value="jp">日本語</option>
</select>

Đặt thẻ option sai vị trí ngoài select hoặc datalist

Thẻ option chỉ hoạt động đúng khi được đặt bên trong select, datalist hoặc optgroup. Nếu đặt ở vị trí khác, trình duyệt sẽ bỏ qua hoặc hiển thị không đúng như mong đợi.

Luôn kiểm tra cấu trúc HTML để đảm bảo các phần tử được lồng đúng vị trí, giúp mã nguồn hợp lệ và tương thích với nhiều trình duyệt.

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
</datalist>

Hiển thị sai do nhầm lẫn giữa nội dung và giá trị của option

Nội dung hiển thị cho người dùng và giá trị gửi đi không nhất thiết phải giống nhau. Nếu sử dụng hai phần này không hợp lý, dữ liệu xử lý có thể trở nên khó hiểu hoặc gây nhầm lẫn trong quá trình phát triển.

Thông thường, nội dung nên dễ đọc đối với người dùng, còn giá trị nên ngắn gọn, ổn định và phù hợp với quy tắc lưu trữ dữ liệu của hệ thống.

<select name="status">
    <option value="1">Đang hoạt động</option>
    <option value="0">Ngừng hoạt động</option>
</select>

Quên kết hợp option với label để tăng khả năng truy cập

Thẻ label giúp người dùng hiểu rõ ý nghĩa của danh sách lựa chọn, đồng thời hỗ trợ tốt hơn cho các công nghệ đọc màn hình và nâng cao trải nghiệm sử dụng.

Khi xây dựng biểu mẫu, nên gắn mỗi danh sách chọn với một label tương ứng để giao diện rõ ràng, thân thiện và đáp ứng tốt các tiêu chuẩn về khả năng truy cập.

<label for="country">Quốc gia</label>
<select id="country" name="country">
    <option value="vn">Việt Nam</option>
    <option value="us">Hoa Kỳ</option>
    <option value="jp">Nhật Bản</option>
</select>

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

Đánh giá

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 *

Bình luận, Hỏi đáp