Bảng & biểu mẫu (form)

Có những nội dung tự nhiên xếp thành hàng và cột: bảng điểm, bảng giá, lịch học. Với loại dữ liệu đó, HTML có thẻ <table>. Một bảng gồm các hàng <tr> (table row), trong mỗi hàng là các ô. Ô tiêu đề là <th>, ô dữ liệu thường là <td>.

Bảng gọn gàng nên chia hai phần: <thead> chứa hàng tiêu đề, <tbody> chứa các hàng dữ liệu.

<table>
  <thead>
    <tr>
      <th>Tên</th>
      <th>Tuổi</th>
      <th>Món thích</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mun</td>
      <td>2</td>
      <td>Cá khô</td>
    </tr>
    <tr>
      <td>Bông</td>
      <td>1</td>
      <td>Sữa ấm</td>
    </tr>
  </tbody>
</table>

• ▸table chứa các hàng tr; mỗi hàng chứa các ô.
• ▸th là ô tiêu đề (tên cột/hàng); td là ô dữ liệu thường.
• ▸thead gom hàng tiêu đề, tbody gom các hàng dữ liệu.

Thêm một chi tiết nhỏ làm bảng dễ đọc hơn nhiều với người khiếm thị: thuộc tính scope trên thẻ th. Nó cho biết ô tiêu đề này là của một cột (scope="col") hay một hàng (scope="row"), để screen reader đọc mỗi ô dữ liệu kèm đúng tiêu đề của nó.

<tr>
  <th scope="col">Tên</th>
  <th scope="col">Tuổi</th>
</tr>

Tới giờ trang chỉ HIỆN nội dung ra. Muốn trang nhận thông tin từ người dùng (đăng ký, đăng nhập, gửi góp ý), ta cần biểu mẫu - thẻ <form>. Hãy hình dung form như một tờ phiếu giấy: có nhiều ô để điền và một nút để nộp.

Ô điền phổ biến nhất là <input>. Cùng một thẻ input nhưng đổi type sẽ ra nhiều loại ô khác nhau: text (chữ), email (địa chỉ email), password (mật khẩu, hiện dấu chấm), number, date… Cuối form là một <button> để gửi.

<form>
  <input type="text" />
  <input type="email" />
  <input type="password" />
  <button type="submit">Gửi</button>
</form>

• ▸form bọc các trường nhập và nút gửi - như một tờ phiếu.
• ▸input là ô nhập; đổi type để ra ô chữ, email, mật khẩu, số, ngày…
• ▸button type="submit" là nút nộp form.

Một ô input trơ trọi thì người dùng không biết phải điền gì. Mỗi ô cần một nhãn - thẻ <label>. Nhưng đặt chữ cạnh ô thôi chưa đủ: phải nối nhãn với ô bằng cặp thuộc tính for (của label) trùng với id (của input).

<form>
  <label for="ten">Tên của mèo con</label>
  <input type="text" id="ten" />

  <label for="email">Email</label>
  <input type="email" id="email" />
</form>

Liên kết này mang lại hai điều: bấm vào chữ nhãn thì con trỏ nhảy thẳng vào ô (vùng bấm rộng hơn, rất tiện trên điện thoại), và screen reader đọc đúng tên trường cho người khiếm thị - cùng tinh thần với thuộc tính alt cho ảnh ở bài Liên kết, ảnh & đa phương tiện. Đây cũng là một viên gạch của a11y: web cho mọi người - một thẻ nhỏ, khác biệt lớn.

• ▸Mỗi input cần một label cho biết phải nhập gì.
• ▸Nối label với input bằng for (label) trùng id (input).
• ▸Nối đúng thì bấm label là focus vào ô, và screen reader đọc đúng tên trường.
• ▸placeholder chỉ là gợi ý mờ trong ô, KHÔNG thay được label.

Điều bất ngờ dễ chịu: trình duyệt có sẵn một lớp kiểm tra cơ bản (validation) mà chưa cần JavaScript. Thêm required thì ô đó bắt buộc phải điền; đặt type="email" thì trình duyệt tự kiểm địa chỉ có đúng dạng email không khi bấm gửi.

<form>
  <label for="ten">Tên</label>
  <input type="text" id="ten" required />

  <label for="email">Email</label>
  <input type="email" id="email" required />

  <button type="submit">Đăng ký</button>
</form>