Bạn sẽ mở rộng form bằng lựa chọn môn học, thời điểm, trình độ và số buổi. Qua mỗi yêu cầu, bạn học cách chọn đúng điều khiển thay vì cố dùng input text cho mọi loại dữ liệu.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Chọn kiểu theo ý nghĩa dữ liệu

Email phù hợp type=”email”, ngày có thể dùng date, một số cần tăng giảm phù hợp number. Nhưng số điện thoại, mã bưu chính hay mã sinh viên không phải lúc nào cũng là đại lượng số để làm phép tính: tel hoặc text có thể phù hợp hơn. Số 0 đầu và dấu + cũng có thể mang ý nghĩa.

Giao diện bộ chọn ngày hoặc bàn phím gợi ý khác nhau giữa trình duyệt và thiết bị. Đừng hứa rằng cùng một kiểu input luôn hiển thị giống hệt nhau trên mọi máy. Hãy kiểm tra dữ liệu và khả năng thao tác hơn là so màu của điều khiển.

Checkbox và radio trả lời hai nhu cầu khác nhau

Checkbox cho phép bật hoặc tắt một lựa chọn độc lập; nhiều checkbox có thể cùng được chọn. Radio cùng name tạo một nhóm chọn một giá trị. Nếu mỗi radio dùng một name khác nhau, chúng không còn loại trừ nhau như nhóm bạn mong muốn.

value cho biết giá trị gửi khi được chọn. Checkbox không được chọn thông thường không tạo cặp tên–giá trị trong dữ liệu gửi. Trong ví dụ nhiều môn có thể tạo nhiều giá trị cùng khóa mon; cách phía máy chủ đọc chúng tùy nền tảng. Đừng giả định backend luôn nhận một mảng chỉ vì HTML có nhiều checkbox.

Nhóm điều khiển cần câu hỏi chung

fieldset nhóm các điều khiển liên quan; legend đặt tên chung của nhóm. Nó rất hữu ích cho nhóm radio vì nhãn Buổi sáng riêng lẻ chưa cho biết câu hỏi đang trả lời là gì. Các nhãn cá nhân vẫn cần để phân biệt từng lựa chọn.

Bạn có thể bọc input trong label như ví dụ hoặc nối for và id. Hai cách đều có ngữ cảnh phù hợp. Không lồng label vào label và không ghép nhiều điều khiển không liên quan vào một nhãn làm tên trở nên mơ hồ.

Select, option và lựa chọn mặc định

select giúp chọn trong một tập các phương án; option chứa nhãn và value tương ứng. Nếu muốn người dùng phải chủ động chọn, có thể đặt phương án đầu với value rỗng và dùng required theo cấu trúc phù hợp. Không mặc định chọn sẵn một đáp án quan trọng mà không cân nhắc trải nghiệm.

datalist là danh sách gợi ý cho input, không phải luôn giới hạn người dùng chỉ được chọn trong danh sách. Nếu yêu cầu chỉ chấp nhận một trong vài phương án, select thường dễ diễn giải hơn cho người mới.

disabled, readonly và dữ liệu gửi

disabled làm điều khiển không tham gia tương tác và thông thường không được gửi cùng form. readonly áp dụng cho những kiểu điều khiển hỗ trợ nó, vẫn có thể gửi giá trị và thường vẫn có thể focus. Không thể gắn readonly cho mọi điều khiển rồi mong radio hoặc select giữ nguyên như một trường văn bản.

autocomplete giúp trình duyệt nhận diện mục đích thông tin; nó không phải tính năng bạn nên tắt bừa cho mọi form. Khi thử bài học, chỉ dùng dữ liệu giả và quan sát từng nhóm name/value trong đường dẫn của ví dụ GET.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<form action="result.html" method="get">
<fieldset><legend>Bạn muốn học gì?</legend>
<label><input type="checkbox" name="mon" value="html"> HTML</label>
<label><input type="checkbox" name="mon" value="css"> CSS</label>
</fieldset>
<fieldset><legend>Thời điểm phù hợp</legend>
<label><input type="radio" name="thoi_diem" value="sang" required> Buổi sáng</label>
<label><input type="radio" name="thoi_diem" value="toi"> Buổi tối</label>
</fieldset>
<label for="trinh-do">Trình độ</label>
<select id="trinh-do" name="trinh_do"><option value="moi">Mới bắt đầu</option><option value="da-hoc">Đã học HTML</option></select>
<label for="so-buoi">Số buổi mong muốn</label>
<input id="so-buoi" type="number" name="so_buoi" min="1" max="10" value="3">
<p><button type="submit">Gửi dữ liệu giả</button></p>
</form>

Kết quả hiển thị

Có thể chọn cả HTML và CSS, nhưng chỉ một thời điểm trong nhóm radio. Chọn lại để thấy sự khác nhau giữa nhiều lựa chọn độc lập và một nhóm loại trừ nhau.

Mở ví dụ bài 11 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Radio dùng name khác nhau: dùng cùng name cho cùng câu hỏi.
• Checkbox không có value rõ ràng: đặt giá trị phù hợp ứng dụng.
• Dùng number cho số điện thoại chỉ vì gồm chữ số: chọn theo ý nghĩa dữ liệu.

Tự kiểm tra

• Chọn hai môn rồi xem các khóa GET trong trang kết quả.
• Giải thích vì sao fieldset vẫn hữu ích dù trang đã có các label.

Tra cứu khi cần

• Thẻ input trong HTML
• Thẻ option trong HTML
• Thẻ fieldset trong HTML
• Thẻ legend trong HTML
• Thẻ datalist trong HTML

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu