Form trong HTML: trường nhập, action, method và validation

Cách tạo form trong HTML

Form (biểu mẫu) là một phần tử <form> chứa các trường nhập và một nút gửi. Mỗi trường cần một name: đó là khóa mà giá trị được gửi kèm. Điền vào form rồi bấm Send. Bản xem trước không gửi dữ liệu đi đâu cả; nó hiện chính xác những gì trình duyệt lẽ ra đã gửi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact form</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input, textarea { display: block; font: inherit; margin-top: 4px; }
  </style>
</head>
<body>
  <form action="/contact" method="post">
    <label>Name <input name="name" autocomplete="name" required></label>
    <label>Email <input type="email" name="email" autocomplete="email" required></label>
    <label>Message <textarea name="message" rows="3"></textarea></label>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Các thành phần:

• action là URL nhận dữ liệu, còn method là cách gửi (ở đây là post).
• name trên mọi trường. Giá trị của trường là những gì người dùng đã gõ.
• <label> đặt tên cho từng trường trên màn hình và cho trình đọc màn hình (xem label trong HTML).
• required và type="email" khiến trình duyệt kiểm tra các trường trước khi gửi. Thử gửi khi để trống tên, hoặc nhập abc vào ô email.
• Nút submit gửi form. Nhấn Enter trong một ô văn bản cũng vậy.

action và method: dữ liệu đi đâu và đi thế nào

Với method="get", các trường trở thành query string của URL: một form tìm kiếm có name="q" sẽ đi tới /search?q=blue+shoes. Cách này đúng cho tìm kiếm và bộ lọc, vì kết quả có thể được lưu dấu trang và chia sẻ. Với method="post", các trường nằm trong phần thân của request và không hiện trên thanh địa chỉ hay trong lịch sử. Dùng POST cho mọi thao tác đăng nhập, tạo, sửa hoặc xóa dữ liệu, và cho mật khẩu.

Form có tải tệp lên (<input type="file">) cần method="post" và enctype="multipart/form-data", nếu không thì chỉ tên tệp được gửi. method="dialog" dành cho form nằm trong <dialog>: gửi form sẽ đóng hộp thoại thay vì gửi request.

Những gì được gửi đi

Chỉ những trường có name mới được gửi, và chỉ khi chúng không bị disabled. Bấm Submit rồi so sánh các trường với những gì form gửi đi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>What is sent</title>
  <style>
    label { display: block; margin-bottom: 6px; }
  </style>
</head>
<body>
  <form>
    <label>With a name <input name="city" value="Lisbon"></label>
    <label>No name <input value="not sent"></label>
    <label>Disabled <input name="country" value="Portugal" disabled></label>
    <label>Read only <input name="zip" value="1100" readonly></label>
    <label><input type="checkbox" name="newsletter" value="yes"> Unchecked box</label>
    <input type="hidden" name="source" value="footer">
    <button type="submit" name="action" value="save">Submit</button>
  </form>
</body>
</html>

Form gửi city, zip, source và action. Trường không có tên, trường bị vô hiệu hóa và checkbox chưa chọn đều bị bỏ ra. Input ẩn vẫn được gửi nhưng không bao giờ hiển thị, còn nút submit gửi name và value của chính nó vì đó là nút đã được bấm.

Nhóm trường bằng fieldset và legend

<fieldset> vẽ một khung quanh các trường liên quan, còn <legend> là tiêu đề của khung. Trình đọc màn hình đọc legend khi focus đi vào nhóm, nhờ vậy một bộ radio button như bên dưới mới dễ hiểu: "Delivery, Standard, radio button".

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fieldset</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; margin-bottom: 12px; }
    legend { font-weight: 600; padding: 0 6px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Delivery</legend>
      <label><input type="radio" name="delivery" value="standard" checked> Standard</label>
      <label><input type="radio" name="delivery" value="express"> Express</label>
    </fieldset>

    <fieldset disabled>
      <legend>Gift options (unavailable)</legend>
      <label><input type="checkbox" name="wrap" value="yes"> Gift wrap</label>
      <label>Note <input name="note"></label>
    </fieldset>

    <button type="submit">Order</button>
  </form>
</body>
</html>

disabled trên fieldset vô hiệu hóa cùng lúc mọi trường bên trong, và không trường nào được gửi. Bỏ nó đi là các trường quà tặng dùng được.

Kiểm tra có sẵn: required, pattern và các thuộc tính khác

Trình duyệt kiểm tra các thuộc tính này trước khi gửi và hiện thông báo ở trường đầu tiên không đạt:

:invalid và :valid định dạng trường theo trạng thái của nó. :user-invalid thường tốt hơn: nó chỉ áp dụng sau khi người dùng đã sửa trường rồi rời đi, hoặc đã thử gửi form, nên một form trống không bị phủ đỏ ngay khi mở.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Validation</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; border: 2px solid #9ca3af; border-radius: 6px; padding: 4px 8px; }
    input:user-invalid { border-color: #dc2626; }
    input:user-valid { border-color: #16a34a; }
    small { color: #4b5563; }
  </style>
</head>
<body>
  <form>
    <label>Username
      <input name="username" required minlength="3" maxlength="16" pattern="[a-z0-9_]+">
      <small>3 to 16 characters: lowercase letters, digits, underscore</small>
    </label>
    <label>Age
      <input type="number" name="age" min="13" max="120" required>
    </label>
    <label>Postcode
      <input name="postcode" pattern="[0-9]{5}" title="Five digits" required>
    </label>
    <button type="submit">Sign up</button>
  </form>
</body>
</html>

Có ba điều về pattern hay khiến người ta vấp. Nó phải khớp toàn bộ giá trị (không cần ^ hay $). Nó chỉ chạy khi trường không trống, nên hãy dùng kèm required. Và thông báo lỗi của trình duyệt rất chung chung, nên hãy mô tả định dạng bằng chữ hiển thị cạnh trường. Chrome và Firefox thêm nội dung title vào thông báo, nhưng rất dễ bị bỏ sót.

Để tắt các bước kiểm tra, ví dụ khi bạn thử phần kiểm tra trên máy chủ, hãy thêm novalidate vào <form>. Một nút submit riêng lẻ có thể bỏ qua chúng bằng formnovalidate.

Kiểm tra trên trình duyệt là để thuận tiện cho người dùng. Ai cũng có thể sửa trang hoặc gửi request mà không qua nó, nên máy chủ phải kiểm tra lại mọi giá trị.

Thông báo tùy chỉnh với setCustomValidity

Khi một quy tắc không viết được thành thuộc tính, chẳng hạn "hai mật khẩu phải trùng nhau", hãy đặt thông báo từ JavaScript. Trường có thông báo tùy chỉnh khác rỗng là không hợp lệ; chuỗi rỗng làm nó hợp lệ trở lại:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validity</title>
  <style>
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Password <input type="password" name="password" id="pw" minlength="8" required></label>
    <label>Repeat <input type="password" id="pw2" required></label>
    <button type="submit">Create account</button>
  </form>

  <script>
    const pw = document.querySelector('#pw');
    const pw2 = document.querySelector('#pw2');
    const check = () => {
      pw2.setCustomValidity(pw.value === pw2.value ? '' : 'The passwords do not match.');
    };
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
  </script>
</body>
</html>

Trường nhập lại không có name, nên chỉ một bản mật khẩu được gửi đi.

Xử lý việc gửi form bằng JavaScript

Để gửi form mà không rời trang, hãy lắng nghe submit, gọi preventDefault() và đọc các trường bằng FormData. Lắng nghe submit thay vì click của nút sẽ bắt được mọi cách gửi form, kể cả Enter, và chỉ chạy sau khi phần kiểm tra có sẵn đã qua:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit with JavaScript</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; }
  </style>
</head>
<body>
  <form id="signup">
    <input name="email" type="email" placeholder="Email" required>
    <select name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Join</button>
  </form>
  <pre id="out"></pre>

  <script>
    const form = document.querySelector('#signup');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = Object.fromEntries(new FormData(form));
      document.querySelector('#out').textContent = JSON.stringify(data, null, 2);
      // A real page would send it: fetch('/api/signup', { method: 'POST', body: new FormData(form) })
    });
  </script>
</body>
</html>

Object.fromEntries(new FormData(form)) biến các trường thành một object thông thường. Với những trường có thể có nhiều giá trị (các checkbox dùng chung tên, select cho chọn nhiều) hãy dùng formData.getAll('name'), vì object chỉ giữ giá trị cuối cùng.

Lỗi thường gặp

• Trường không có name. Chúng bị bỏ khỏi dữ liệu gửi đi mà không có cảnh báo nào.
• Dùng placeholder thay cho label. Gợi ý biến mất ngay khi người dùng bắt đầu gõ. Hãy dùng <label>.
• Một <button> không có type dùng cho việc khác ngoài gửi form. Bên trong form, nó là nút submit.
• Form lồng trong form. Lồng form là không hợp lệ; trình duyệt bỏ qua thẻ <form> bên trong.
• Lắng nghe click trên nút submit thay vì submit trên form. Cách gửi bằng phím Enter sẽ bị bỏ sót.
• Tin vào kiểm tra của trình duyệt ở phía máy chủ. Hãy kiểm tra lại ở đó.
• Dùng GET cho mật khẩu. Mật khẩu sẽ nằm trong URL, lịch sử và log của máy chủ.