Thẻ SELECT trong HTML

• Ngọc Thanh
• 76
• 24/02/2025

Theo dõi Web Mới

Tìm hiểu Thẻ SELECT trong HTML, đó là một loại thẻ 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, chi tiết như nào hãy cùng chúng tôi phân tích:

Thẻ SELECT trong HTML

Thẻ <select> trong HTML là gì?

Thẻ <select> trong HTML là một loại thẻ 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 đầu tiê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" 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ử >>

Lời kết

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

Ngọc Thanh

Chia sẻ nội dung đánh giá của bạn về Thẻ SELECT 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