Bài 3. Forms & Validation – Form và kiểm tra dữ liệu

Forms & Validation – Xây dựng biểu mẫu và kiểm tra dữ liệu với HTML

Trong hầu hết các Website, chúng ta đều bắt gặp những biểu mẫu cho phép người dùng nhập và gửi dữ liệu, chẳng hạn như form đăng nhập, đăng ký tài khoản, liên hệ hoặc đặt hàng.

Để xây dựng những chức năng này, Frontend Developer cần hiểu cách HTML thu thập dữ liệu, cách các trường nhập liệu hoạt động và cách kiểm tra dữ liệu trước khi gửi đi.

Đó chính là nội dung của Forms & Validation.

1. HTML Form là gì?

HTML Form là biểu mẫu được sử dụng để thu thập dữ liệu từ người dùng và gửi dữ liệu đến nơi xử lý.

Ví dụ, một form đăng nhập thường bao gồm:

• Email hoặc tên đăng nhập.
• Mật khẩu.
• Nút đăng nhập.

Cấu trúc cơ bản:

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

    <label for="password">Password</label>
    <input type="password" id="password" name="password">

    <button type="submit">Login</button>
</form>

Trong ví dụ này, form là phần tử bao quanh các trường nhập liệu. Khi người dùng nhấn nút gửi, trình duyệt có thể thực hiện kiểm tra dữ liệu và gửi form theo cấu hình được khai báo.

2. Những phần tử thường dùng trong Form

2.1. form – Phần tử biểu mẫu

form xác định phạm vi của một biểu mẫu và cách dữ liệu được gửi đi.

Hai thuộc tính quan trọng:

• action: Địa chỉ nhận dữ liệu khi gửi form.
• method: Phương thức gửi dữ liệu.

Ví dụ:

<form action="/login" method="post">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <button type="submit">Login</button>
</form>

Khi gửi form, trình duyệt gửi dữ liệu đến /login bằng phương thức POST.

Trong ứng dụng thực tế, địa chỉ này thường trỏ đến một endpoint do Server cung cấp. Nếu dùng React hoặc Next.js, bạn cũng có thể xử lý form bằng JavaScript, nhưng nguyên tắc về dữ liệu và validation vẫn cần được hiểu rõ.

2.2. input – Trường nhập liệu

input là phần tử được sử dụng để thu thập nhiều loại dữ liệu khác nhau. Thuộc tính type quyết định loại trường nhập liệu và hành vi mặc định của nó.

Ví dụ:

<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="date" name="birthday">

Việc chọn đúng type giúp trình duyệt cung cấp cách nhập dữ liệu phù hợp. Chẳng hạn, trường email có thể hiển thị bàn phím thuận tiện hơn trên điện thoại.

2.3. label – Nhãn của trường nhập liệu

label mô tả ý nghĩa của một trường nhập liệu.

<label for="username">Username</label>
<input type="text" id="username" name="username">

Giá trị for của label phải khớp với id của phần tử được liên kết.

Khi nhấn vào nhãn, trình duyệt có thể chuyển tiêu điểm đến trường nhập liệu tương ứng. Nhãn rõ ràng cũng hỗ trợ người dùng sử dụng trình đọc màn hình.

Không nên chỉ dùng placeholder thay cho label, vì placeholder không phải là nhãn thay thế đầy đủ và thường biến mất khi người dùng nhập dữ liệu.

2.4. textarea – Nhập nội dung nhiều dòng

Khi cần người dùng nhập mô tả, phản hồi hoặc nội dung liên hệ dài, chúng ta có thể sử dụng textarea.

<label for="message">Message</label>
<textarea
    id="message"
    name="message"
    rows="5"
    placeholder="Enter your message"
></textarea>

Khác với input, textarea cho phép nhập nội dung trên nhiều dòng.

2.5. select và option – Danh sách lựa chọn

Khi người dùng cần chọn một giá trị trong danh sách, chúng ta có thể sử dụng select.

<label for="country">Country</label>

<select id="country" name="country">
    <option value="">Choose a country</option>
    <option value="vn">Vietnam</option>
    <option value="us">United States</option>
    <option value="jp">Japan</option>
</select>

Trong đó, option xác định từng lựa chọn. Thuộc tính value là giá trị được gửi đi khi lựa chọn đó được chọn.

2.6. button – Nút thao tác

button tạo ra nút tương tác. Thuộc tính type quyết định hành vi của nút.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click me</button>

Ba loại thường gặp:

• submit: Gửi form.
• reset: Đưa các trường trong form về giá trị ban đầu.
• button: Nút thông thường, không tự gửi form.

Một lưu ý quan trọng: nút button nằm bên trong form thường mặc định có hành vi submit nếu không khai báo type. Vì vậy, nên chỉ định rõ type để tránh gửi form ngoài ý muốn.

3. Những thuộc tính quan trọng của Form

Ngoài type, các trường nhập liệu còn có những thuộc tính giúp kiểm soát dữ liệu và trải nghiệm người dùng.

Ví dụ:

<label for="username">Username</label>

<input
    type="text"
    id="username"
    name="username"
    minlength="3"
    maxlength="20"
    required
>

Trường này bắt buộc có dữ liệu và giới hạn độ dài từ 3 đến 20 ký tự.

Lưu ý rằng disabled và readonly không giống nhau. Trường disabled thường không được gửi cùng dữ liệu form, còn trường readonly vẫn có thể được gửi nếu có name.

4. Form Validation là gì?

Form Validation là quá trình kiểm tra dữ liệu người dùng nhập vào có đáp ứng những điều kiện được yêu cầu hay không.

Ví dụ, một form đăng ký có thể yêu cầu:

• Email đúng định dạng cơ bản.
• Mật khẩu không được để trống.
• Tên người dùng có độ dài tối thiểu.
• Các trường bắt buộc phải được điền.

Validation giúp phát hiện dữ liệu không phù hợp sớm, trước khi ứng dụng tiếp tục xử lý.

Có hai nhóm validation chính:

1. Client-side validation: Kiểm tra dữ liệu ở phía trình duyệt.
2. Server-side validation: Kiểm tra dữ liệu tại Server.

HTML hỗ trợ một số cơ chế Client-side validation ngay cả khi không cần viết JavaScript.

5. HTML Validation – Kiểm tra dữ liệu không cần JavaScript

5.1. required

Thuộc tính required yêu cầu người dùng nhập hoặc chọn giá trị trước khi gửi form.

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

    <button type="submit">Submit</button>
</form>

Nếu trường email bị bỏ trống, trình duyệt sẽ ngăn form được gửi theo cơ chế validation mặc định và hiển thị thông báo phù hợp.

5.2. type="email"

<input type="email" name="email" required>

Thuộc tính này giúp trình duyệt kiểm tra định dạng email cơ bản.

Tuy nhiên, nó không thể xác nhận địa chỉ email thực sự tồn tại hoặc người dùng có quyền truy cập hộp thư đó hay không.

5.3. minlength và maxlength

<input
    type="text"
    name="username"
    minlength="3"
    maxlength="20"
    required
>

Hai thuộc tính này đặt giới hạn độ dài cho dữ liệu văn bản.

5.4. min và max

Với trường nhập số, chúng ta có thể đặt giới hạn:

<label for="age">Age</label>

<input
    type="number"
    id="age"
    name="age"
    min="18"
    max="100"
    required
>

Ở đây, giá trị cần nằm trong khoảng từ 18 đến 100 để vượt qua các ràng buộc tương ứng.

5.5. pattern

pattern cho phép sử dụng biểu thức chính quy để kiểm tra một số trường văn bản.

Ví dụ, yêu cầu mã gồm đúng sáu chữ số:

<label for="code">Verification code</label>

<input
    type="text"
    id="code"
    name="code"
    pattern="[0-9]{6}"
    title="Enter exactly 6 digits"
    required
>

Giá trị như 123456 phù hợp với mẫu, trong khi 12345 không phù hợp.

pattern không phải giải pháp cho mọi kiểu validation. Hãy chọn quy tắc phù hợp với dữ liệu thực tế và cung cấp hướng dẫn dễ hiểu cho người dùng.

6. Kết hợp các thuộc tính Validation

Chúng ta có thể kết hợp nhiều thuộc tính để tạo form đăng ký cơ bản.

<form action="/register" method="post">
    <div>
        <label for="username">Username</label>

        <input
            type="text"
            id="username"
            name="username"
            minlength="3"
            maxlength="20"
            required
        >
    </div>

    <div>
        <label for="email">Email</label>

        <input
            type="email"
            id="email"
            name="email"
            required
        >
    </div>

    <div>
        <label for="password">Password</label>

        <input
            type="password"
            id="password"
            name="password"
            minlength="8"
            required
        >
    </div>

    <button type="submit">Register</button>
</form>

Form này có thể kiểm tra các điều kiện cơ bản ngay trên trình duyệt. Tuy nhiên, việc khai báo minlength="8" không có nghĩa là mật khẩu đã đủ an toàn. Khi xây dựng ứng dụng thật, bạn cần xác định chính sách mật khẩu phù hợp và thực hiện kiểm tra ở Server.

7. Form gửi dữ liệu như thế nào?

Khi người dùng gửi form, trình duyệt lấy dữ liệu từ các trường phù hợp và gửi theo cấu hình của form.

Hai thuộc tính quan trọng là action và method.

GET

<form action="/search" method="get">
    <label for="keyword">Search</label>
    <input type="text" id="keyword" name="keyword">

    <button type="submit">Search</button>
</form>

Khi nhập html, URL có thể trở thành:

/search?keyword=html

GET thường phù hợp với các thao tác truy vấn dữ liệu, chẳng hạn như tìm kiếm hoặc lọc danh sách.

POST

<form action="/register" method="post">
    <label for="email">Email</label>
    <input type="email" id="email" name="email">

    <button type="submit">Register</button>
</form>

POST thường được sử dụng khi gửi dữ liệu để Server xử lý, chẳng hạn như tạo tài khoản hoặc gửi biểu mẫu.

Dữ liệu POST thông thường được gửi trong phần body của Request thay vì được đặt trong query string như GET. Tuy nhiên, POST không tự động mã hóa hay bảo vệ dữ liệu. Khi truyền dữ liệu nhạy cảm, cần sử dụng HTTPS và áp dụng các biện pháp bảo mật thích hợp.

Một lưu ý quan trọng: trường nhập liệu cần có thuộc tính name để được đưa vào dữ liệu form theo cách gửi thông thường. id chủ yếu phục vụ định danh phần tử và liên kết với label, không thay thế cho name.

8. Client-side Validation có đủ an toàn không?

Câu trả lời là không.

Hãy tưởng tượng một form yêu cầu người dùng nhập tuổi từ 18 trở lên:

<input type="number" name="age" min="18" required>

Người dùng có thể bị trình duyệt ngăn gửi giá trị không phù hợp thông qua giao diện thông thường. Tuy nhiên, họ vẫn có thể gửi Request được tạo thủ công hoặc bỏ qua các kiểm tra phía Client.

Vì vậy, không được xem Client-side validation là cơ chế bảo mật.

Một ứng dụng thực tế nên có cả hai lớp:

Người dùng nhập dữ liệu
        ↓
Client-side Validation
        ↓
Gửi Request
        ↓
Server-side Validation
        ↓
Xử lý dữ liệu hợp lệ

Server phải tự kiểm tra dữ liệu, quyền truy cập và các điều kiện nghiệp vụ trước khi thực hiện thao tác.

9. Những lưu ý khi xây dựng Form

Khi làm việc với HTML Form, hãy ghi nhớ:

1. Luôn liên kết label với trường nhập liệu tương ứng.
2. Chọn type phù hợp với loại dữ liệu.
3. Sử dụng required, minlength, maxlength, min hoặc max khi phù hợp.
4. Đặt name cho các trường cần gửi dữ liệu.
5. Khai báo rõ type của nút bấm.
6. Cung cấp thông báo lỗi và hướng dẫn dễ hiểu.
7. Không chỉ dựa vào placeholder để giải thích trường nhập liệu.
8. Luôn kiểm tra dữ liệu tại Server, kể cả khi Client đã validation.
9. Không đặt mật khẩu hoặc thông tin nhạy cảm vào URL.
10. Khi xử lý lỗi, cần đảm bảo thông báo có thể được nhận biết bằng công nghệ hỗ trợ.

10. Kết luận

HTML Forms giúp Website thu thập dữ liệu từ người dùng, trong khi Validation giúp phát hiện dữ liệu không đáp ứng những điều kiện đã đặt ra.

Trong bài này, chúng ta đã tìm hiểu:

• Các phần tử form, input, label, textarea, select và button.
• Các thuộc tính quan trọng như name, required, minlength, maxlength, min, max và pattern.
• Cách gửi dữ liệu bằng GET và POST.
• Sự khác nhau giữa Client-side validation và Server-side validation.

Nắm vững những kiến thức này sẽ giúp bạn xây dựng các biểu mẫu cơ bản có cấu trúc rõ ràng, dễ sử dụng và dễ tích hợp với JavaScript hoặc Framework.

Bài tiếp theo sẽ chuyển sang CSS Fundamentals – CSS là gì, cách trình duyệt áp dụng CSS và vì sao các quy tắc CSS đôi khi ghi đè lên nhau.