Login

Làm form HTML đúng cách: input, label và validation có sẵn

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Form là cách người dùng nói chuyện với website: đăng ký, đăng nhập, tìm kiếm, thanh toán. Một form viết cẩu thả khiến người dùng bực mình và bỏ đi. Một form viết tốt thì gần như không ai để ý, vì mọi thứ cứ chạy trơn tru.

Bộ khung của một form

Thẻ form chứa các ô nhập liệu và một nút gửi. Hai thuộc tính quan trọng là action (nơi gửi dữ liệu đến) và method (GET hoặc POST).

<form action='/dang-ky' method='post'>
  <label for='email'>Email</label>
  <input type='email' id='email' name='email' required>

  <label for='mk'>Mật khẩu</label>
  <input type='password' id='mk' name='password' minlength='8' required>

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

Dùng GET khi chỉ lấy dữ liệu (như tìm kiếm), vì dữ liệu hiện trên URL. Dùng POST khi gửi dữ liệu làm thay đổi hệ thống hoặc có thông tin nhạy cảm.

Label: chi tiết nhỏ, tác dụng lớn

Thẻ label liên kết với ô nhập thông qua for trùng với id của input. Điều này mang lại hai lợi ích. Một là trình đọc màn hình đọc được nhãn của ô nhập. Hai là khi bấm vào nhãn, ô nhập được focus, rất tiện trên điện thoại với checkbox và radio có vùng bấm nhỏ.

Đừng dùng placeholder thay cho label. Placeholder biến mất khi người dùng gõ, và màu chữ nhạt thường khó đọc. Placeholder chỉ nên là gợi ý định dạng, ví dụ "name@example.com".

Chọn đúng type

Thuộc tính type quyết định hành vi của ô nhập, đặc biệt trên di động vì bàn phím phù hợp sẽ hiện ra:

  • email: kiểm tra dạng email và hiện bàn phím có ký tự @.
  • tel: bàn phím số điện thoại.
  • number: nhập số, có thể đặt min, max, step.
  • date: bộ chọn ngày của trình duyệt.
  • password: ẩn ký tự khi gõ.
  • checkbox và radio: chọn nhiều hoặc chọn một.

Với danh sách lựa chọn, dùng select và option. Với đoạn văn dài, dùng textarea.

Validation có sẵn của HTML5

Trước khi nghĩ đến JavaScript, hãy tận dụng những gì trình duyệt cho sẵn:

  • required: bắt buộc nhập.
  • minlength và maxlength: giới hạn độ dài.
  • min và max: giới hạn giá trị số hoặc ngày.
  • pattern: kiểm tra bằng biểu thức chính quy.
<label for='sdt'>Số điện thoại</label>
<input type='tel' id='sdt' name='phone'
  pattern='0[0-9]{9}'
  title='Nhập 10 chữ số, bắt đầu bằng 0'>

Thuộc tính title sẽ hiện trong thông báo lỗi của trình duyệt. Trên CSS, bạn có thể tô màu theo trạng thái bằng :invalid và :valid, nhưng nên chờ người dùng tương tác xong mới hiện lỗi, kẻo form báo đỏ ngay khi họ chưa kịp gõ.

Đừng quên phía máy chủ

Validation phía trình duyệt chỉ để cải thiện trải nghiệm, nó không đảm bảo an toàn. Bất kỳ ai cũng có thể bỏ qua nó bằng công cụ dành cho nhà phát triển hoặc gửi yêu cầu trực tiếp. Vì vậy máy chủ luôn phải kiểm tra lại mọi dữ liệu nhận được.

Mẹo trải nghiệm người dùng

  1. Dùng autocomplete với giá trị phù hợp (như email, current-password) để trình duyệt điền giúp.
  2. Nhóm các ô liên quan bằng fieldset và legend.
  3. Thông báo lỗi nên nói rõ cách sửa, không chỉ nói "không hợp lệ".
  4. Nút gửi nên có chữ mô tả hành động, như "Tạo tài khoản" thay vì "Gửi".
  5. Hạn chế số ô bắt buộc, mỗi ô thừa làm giảm số người hoàn thành form.

Ví dụ form hoàn chỉnh có nhóm lựa chọn

Khi có nhiều lựa chọn liên quan, hãy dùng fieldset và legend để nhóm lại. Cách này giúp trình đọc màn hình thông báo được câu hỏi chung trước mỗi lựa chọn:

<fieldset>
  <legend>Bạn muốn học gì?</legend>
  <label><input type='radio' name='topic' value='web'> Lập trình web</label>
  <label><input type='radio' name='topic' value='game'> Làm game</label>
  <label><input type='radio' name='topic' value='app'> Ứng dụng di động</label>
</fieldset>

Ở ví dụ này, thẻ input được đặt bên trong label nên không cần thuộc tính for. Cả hai cách đều hợp lệ. Lưu ý các radio cùng nhóm phải dùng chung giá trị name để trình duyệt hiểu chỉ được chọn một.

Cuối cùng, hãy luôn thử form bằng bàn phím: bấm Tab để di chuyển, Space để chọn checkbox, Enter để gửi. Nếu có chỗ bạn không thao tác được, người dùng thật cũng sẽ gặp khó khăn tương tự.

Kết luận

Form tốt bắt đầu từ HTML chuẩn: label rõ ràng, type đúng, validation có sẵn và kiểm tra lại ở máy chủ. Làm tốt những điều cơ bản này, bạn đã đi trước nhiều form thiếu chăm chút ngoài kia.

Khi bạn đã sẵn sàng kết nối form với JavaScript và máy chủ thật, các bài giảng thực hành trong khóa học trên codebem.com sẽ là bước tiếp theo hợp lý.

author_photo
Nguyễn Đình Cường

0 comment