1. Giới thiệu

HTML Forms (biểu mẫu HTML) là một trong những phần quan trọng của bất kỳ trang web nào, giúp người dùng tương tác với trang web bằng cách nhập dữ liệu. Thông qua các biểu mẫu, người dùng có thể gửi thông tin như tên, địa chỉ email, mật khẩu, bình luận, và nhiều loại dữ liệu khác. Các biểu mẫu này thường được sử dụng để thu thập dữ liệu và gửi chúng tới máy chủ để xử lý.

Trong bài viết này, chúng ta sẽ tìm hiểu về HTML Forms, các thành phần cơ bản của một biểu mẫu, và cách sử dụng chúng để tạo biểu mẫu hiệu quả.

2. Các thành phần của HTML Forms

Một form trong HTML được tạo ra bằng thẻ <form>. Bên trong thẻ này, bạn có thể thêm các phần tử đầu vào như text fields, radio buttons, checkboxes, dropdown menus, buttons, v.v.

Cú pháp cơ bản:

<form action="/submit_form" method="post">
    <!-- Các phần tử đầu vào sẽ được đặt ở đây -->
</form>

• action: Xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến để xử lý.
• method: Xác định phương thức HTTP được sử dụng để gửi dữ liệu (thường là GET hoặc POST).

3. Các phần tử cơ bản của HTML Forms

a. Text Input Fields – Trường nhập văn bản

Đây là trường nhập liệu cơ bản cho phép người dùng nhập văn bản.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name">
</form>

• <label>: Được sử dụng để mô tả trường nhập liệu.
• <input type="text">: Tạo ra trường nhập văn bản.
• name: Tên của trường nhập, đây là thông tin quan trọng để máy chủ nhận diện dữ liệu khi biểu mẫu được gửi.

b. Password Field – Trường nhập mật khẩu

Trường mật khẩu được sử dụng để nhập dữ liệu nhạy cảm như mật khẩu. Dữ liệu trong trường này được ẩn đi dưới dạng các dấu chấm hoặc dấu sao.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="password">Mật khẩu:</label>
    <input type="password" id="password" name="password">
</form>

• <input type="password">: Tạo ra trường nhập mật khẩu.

c. Radio Buttons – Nút lựa chọn

Radio buttons cho phép người dùng chọn một trong nhiều tùy chọn có sẵn. Người dùng chỉ có thể chọn một tùy chọn tại một thời điểm.

Ví dụ:

<form action="/submit_form" method="post">
    <p>Giới tính:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Nam</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Nữ</label><br>
</form>

• <input type="radio">: Tạo ra radio button.
• name: Tên phải giống nhau cho các radio button thuộc cùng một nhóm để người dùng chỉ có thể chọn một tùy chọn.

d. Checkboxes – Hộp kiểm

Checkboxes cho phép người dùng chọn nhiều tùy chọn cùng lúc.

Ví dụ:

<form action="/submit_form" method="post">
    <p>Sở thích:</p>
    <input type="checkbox" id="coding" name="hobby" value="coding">
    <label for="coding">Lập trình</label><br>
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">Đọc sách</label><br>
</form>

• <input type="checkbox">: Tạo ra checkbox.
• value: Giá trị của tùy chọn được gửi đi khi checkbox được chọn.

e. Dropdown List – Danh sách thả xuống

Danh sách thả xuống (dropdown list) cho phép người dùng chọn một trong nhiều tùy chọn từ danh sách.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="country">Chọn quốc gia:</label>
    <select id="country" name="country">
        <option value="vn">Việt Nam</option>
        <option value="us">Hoa Kỳ</option>
        <option value="jp">Nhật Bản</option>
    </select>
</form>

• <select>: Tạo ra danh sách thả xuống.
• <option>: Đại diện cho các tùy chọn bên trong danh sách.

f. Textarea – Ô nhập văn bản dài

Thẻ <textarea> cho phép người dùng nhập các đoạn văn bản dài.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="message">Tin nhắn:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea>
</form>

• <textarea>: Tạo ra ô nhập văn bản nhiều dòng.
• rows và cols: Xác định số lượng dòng và cột của khung nhập liệu.

g. Submit Button – Nút gửi biểu mẫu

Submit Button được sử dụng để gửi dữ liệu biểu mẫu đến máy chủ.

Ví dụ:

<form action="/submit_form" method="post">
    <input type="submit" value="Gửi biểu mẫu">
</form>

• <input type="submit">: Tạo ra nút gửi biểu mẫu.
• value: Xác định văn bản hiển thị trên nút.

4. Thuộc tính quan trọng của <form>

a. Action

Thuộc tính action xác định địa chỉ URL mà dữ liệu biểu mẫu sẽ được gửi đến để xử lý.

Ví dụ:

<form action="https://example.com/submit_form" method="post">
    <!-- Các phần tử biểu mẫu -->
</form>

b. Method

Thuộc tính method xác định phương thức HTTP được sử dụng để gửi dữ liệu. Có hai phương thức chính là:

• GET: Gửi dữ liệu biểu mẫu dưới dạng chuỗi truy vấn trong URL. Phương pháp này nên được sử dụng cho các biểu mẫu tìm kiếm hoặc khi bạn muốn dữ liệu hiển thị trong URL.

<form action="/search" method="get">
    <input type="text" name="query">
    <input type="submit" value="Tìm kiếm">
</form>

• POST: Gửi dữ liệu biểu mẫu dưới dạng thân của yêu cầu HTTP. Đây là phương thức an toàn hơn và nên sử dụng khi gửi dữ liệu nhạy cảm hoặc dữ liệu lớn.

<form action="/submit_form" method="post">
    <input type="text" name="name">
    <input type="submit" value="Gửi">
</form>

c. Autocomplete

Thuộc tính autocomplete xác định xem trình duyệt có nên tự động điền dữ liệu trước đó vào các trường nhập liệu hay không.

<form action="/submit_form" method="post" autocomplete="on">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>

5. Tính năng nâng cao trong HTML Forms

a. Validation (Xác thực dữ liệu)

HTML cung cấp các thuộc tính xác thực dữ liệu cơ bản như required, minlength, maxlength, pattern, và type để kiểm tra tính hợp lệ của dữ liệu người dùng nhập vào trước khi gửi biểu mẫu.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <input type="submit" value="Gửi">
</form>

b. Placeholder (Gợi ý trong trường nhập liệu)

placeholder cung cấp văn bản gợi ý bên trong trường nhập liệu để hướng dẫn người dùng.

Ví dụ:

<form action="/submit_form" method="post">
    <label for="name">Tên:</label>
    <input type="text" id="name" name="name" placeholder="Nhập tên của bạn">
</form>

6. Kết luận

HTML Forms là công cụ không thể thiếu trong các trang web hiện đại, cho phép người dùng tương tác và gửi dữ liệu tới máy chủ. Từ các trường nhập văn bản đơn giản đến các tính năng xác thực dữ liệu nâng cao, HTML Forms cung cấp nhiều lựa chọn để thu thập dữ liệu người dùng một cách hiệu quả.

Việc sử dụng HTML Forms đúng cách không chỉ giúp thu thập dữ liệu chính xác mà còn mang lại trải nghiệm người dùng tốt hơn trên trang web.