Danh sách chọn gồm các option
```html
<label for="nhom">Nhóm:</label>
<select id="nhom" name="nhom">
<option value="a">Nhóm A</option>
<option value="b">Nhóm B</option>
</select>
```
Mỗi option tạo một lựa chọn trong select. Nhãn Nhóm B hiện cho người dùng, còn value="b" là giá trị tương ứng. Mẫu select không có multiple nên chọn một mục tại một thời điểm.
Radio và select đều có thể dùng cho yêu cầu chọn một. Radio cho thấy các lựa chọn ngay trên trang; select thường gọn hơn. Không có quy tắc HTML bắt buộc chỉ đổi sang select khi vượt một số lượng lựa chọn cố định.
Nhập văn bản nhiều dòng
```html
<label for="ghi-chu">Ghi chú:</label><br>
<textarea id="ghi-chu" name="ghi_chu" rows="3" cols="25">Dữ liệu mẫu</textarea>
```
textarea có thẻ mở và thẻ đóng. Chữ Dữ liệu mẫu giữa hai thẻ là nội dung ban đầu, không phải nhãn. rows và cols gợi kích thước vùng nhập theo hàng và cột; không giới hạn tổng số dòng được phép gõ chỉ bằng rows.
Để vùng nhập ban đầu trống, không đặt nội dung giữa hai thẻ. label vẫn dùng for khớp id của textarea.
Gom trường có liên quan
```html
<fieldset>
<legend>Lựa chọn hoạt động</legend>
<!-- Đặt các ô có liên quan ở đây -->
</fieldset>
```
fieldset nhóm các phần tử liên quan; legend đặt tên nhóm. Viền nhóm giúp nhận biết phạm vi, nhưng fieldset không thay form và không tự gửi thông tin.
Danh sách gợi ý khác danh sách bắt buộc chọn
```html
<label for="lop-mau">Lớp minh họa:</label><br>
<input id="lop-mau" name="lop" type="text" list="cac-lop">
<datalist id="cac-lop">
<option value="12A">
<option value="12B">
</datalist>
```
list="cac-lop" của input khớp id="cac-lop" của datalist. id="lop-mau" vẫn là mã riêng của input để nối label; không dùng chung id cho hai phần tử.
datalist cung cấp gợi ý khi trình duyệt hỗ trợ. Ô text vẫn có thể nhận một chuỗi khác gợi ý. Đây khác select của mẫu, nơi lựa chọn lấy từ các option có sẵn.
Bài luyện
Trong select mẫu, chọn Nhóm B thì giá trị của trường nhom là gì?
Mẫu đã khai báo value riêng.
nhom là tên trường, không phải giá trị lựa chọn.
Đúng. Option Nhóm B có value b.
option là tên phần tử.
Lời giải
select có name nhom. Option hiển thị Nhóm B khai báo value b, nên trường nhom có giá trị b khi chọn mục ấy.
Bài luyện
textarea có rows="3". Nhận xét nào đúng?
rows không đặt giới hạn tổng số dòng như vậy.
Đúng. Kích thước vùng nhìn khác giới hạn nội dung.
Không có việc tự tách ba trường bởi rows.
textarea nhận văn bản.
Lời giải
rows mô tả số hàng hiển thị của vùng nhập. Nội dung dài hơn vẫn có thể nhập và cuộn, nên không coi rows là số dòng tối đa được phép gõ.
Bài luyện
Phần tử nào đặt tên cho nhóm fieldset?
Đúng. legend là tên của nhóm.
option tạo lựa chọn trong danh sách.
source chọn nguồn media.
poster là thuộc tính ảnh đại diện của video.
Lời giải
legend nằm trong fieldset và cung cấp tên nhóm. Các ô liên quan được đặt trong fieldset để người đọc nhận biết chúng thuộc cùng một phần thông tin.
Bài luyện
Ô text dùng datalist có gợi ý 12A và 12B. Theo mã mẫu, có thể nhập 12C không?
Datalist cung cấp gợi ý, không tự khóa text như vậy.
list không đổi type thành radio.
label không cấm hay cho phép giá trị mới.
Đúng. Input text vẫn nhận chuỗi khác.
Lời giải
list liên kết ô text tới datalist để gợi ý. Trong mẫu không có điều kiện bổ sung giới hạn giá trị, nên vẫn có thể nhập 12C; không nhầm datalist với select.
Đang học