Thẻ SELECT trong HTML

• Trần Thị Vân
• 1668
• 24/02/2025

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

Thẻ select trong HTML chứa danh sách một thông tin về mảng nào đó mà người dùng có thể chọn một hoặc chọn nhiều cái một lần, bằng cách click vào nút để sổ xuống danh sách hoặc kéo xuống rồi chọn, sau khi chọn và gửi đi thì bên phía máy chủ sẽ xử lý và lấy thông tin đã chọn.

Các loại thẻ select trong HTML

Thẻ select đơn giản

<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ẻ select dạng optgroup

Chia theo danh mục riêng, mỗi danh mục có nhãn riêng để dễ nhận biết.

<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ẻ select dạng multiple

Thêm thuộc tính multiple và cho size với số phần tử hiển thị đầu tiên cho người dùng thấy, phần tử còn lại kéo chuột xuống để chọn, nhấn phím ctrl để chọn hoặc bỏ chọn từng cái, nhấn shift để chọn hoặc bỏ chọn 1 lúc nhiều cái.

<label for="khoahoc">Chọn khóa học:</label>
<select id="khoahoc" name="chonkhoahoc" multiple size="3" >
 <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ử

Các thuộc tính trong thẻ select

name: Đặt tên cho thẻ select

selected: Hiển thị phần tử được chọn trước đó, cái nào được chọn selected sẽ được hiện trên thẻ.

<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" selected >SEO</option>
</select>

Chạy Thử

disabled: Chỉ cho xem không cho tác động.

<label for="khoahoc">Chọn khóa học:</label>
<select id="khoahoc" name="chonkhoahoc" disabled>
 <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" selected >SEO</option>
</select>

Chạy Thử

Cách sử dụng thẻ select trong HTML hiệu quả

Thẻ select trong HTML phát huy hiệu quả nhất khi được sử dụng đúng mục đích: tạo danh sách lựa chọn giúp người dùng chọn một hoặc nhiều giá trị trong biểu mẫu. Việc thiết kế select hợp lý không chỉ giúp nhập liệu nhanh hơn mà còn cải thiện trải nghiệm khi sử dụng website.

Kết hợp thẻ select với form để thu thập dữ liệu người dùng

Khi đặt trong form, thẻ select giúp website thu thập các lựa chọn có sẵn từ người dùng như quốc gia, danh mục sản phẩm, phương thức thanh toán hoặc tùy chọn dịch vụ. Dữ liệu được gửi đi khi người dùng nhấn nút gửi biểu mẫu.

Mỗi lựa chọn trong danh sách thường được tạo bằng thẻ option. Giá trị gửi lên máy chủ được xác định thông qua thuộc tính value, trong khi nội dung hiển thị giúp người dùng dễ nhận biết lựa chọn.

<form>
  <label for="category">Chọn danh mục:</label>
  <select id="category" name="category">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
  </select>
</form>

Cách kết hợp này giúp dữ liệu nhập vào có tính thống nhất hơn so với việc để người dùng tự nhập nội dung, từ đó giảm sai sót khi xử lý thông tin.

Tùy chỉnh danh sách lựa chọn bằng các thuộc tính phổ biến

Thẻ select có nhiều thuộc tính hỗ trợ kiểm soát cách hoạt động của danh sách lựa chọn. Một số thuộc tính thường được sử dụng gồm:

• name: Đặt tên cho dữ liệu được gửi từ biểu mẫu.
• required: Yêu cầu người dùng phải chọn một giá trị trước khi gửi form.
• disabled: Vô hiệu hóa danh sách lựa chọn khi chưa muốn người dùng thao tác.
• multiple: Cho phép chọn nhiều giá trị trong cùng một danh sách.
• size: Xác định số lượng mục hiển thị cùng lúc.

Việc lựa chọn thuộc tính phù hợp giúp danh sách hoạt động đúng với nhu cầu thực tế thay vì chỉ tạo một menu lựa chọn đơn giản.

Những lưu ý khi tạo select giúp website dễ sử dụng hơn

Khi xây dựng danh sách lựa chọn, cần ưu tiên sự rõ ràng để người dùng dễ thao tác. Không nên tạo quá nhiều tùy chọn trong một select nếu có thể nhóm chúng theo từng danh mục.

• Sử dụng nhãn label đi kèm để người dùng hiểu mục đích của danh sách.
• Sắp xếp các lựa chọn theo thứ tự hợp lý, đặc biệt với danh sách dài.
• Có thể sử dụng option mặc định để hướng dẫn người dùng chọn dữ liệu.
• Đảm bảo select hoạt động tốt trên cả máy tính và thiết bị di động.

Một thẻ select được thiết kế tốt sẽ giúp quá trình nhập thông tin nhanh chóng, hạn chế nhầm lẫn và mang lại trải nghiệm thân thiện hơn cho người truy cập.

Lời kết

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