1. Giới thiệu

HTML Form Attributes (thuộc tính của biểu mẫu HTML) là những thuộc tính được sử dụng để điều khiển hành vi của biểu mẫu khi người dùng tương tác và gửi dữ liệu. Các thuộc tính này giúp kiểm soát cách thức gửi dữ liệu, địa chỉ nhận dữ liệu, và cung cấp các tính năng như tự động điền, xác thực dữ liệu, và nhiều chức năng khác.

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết các thuộc tính phổ biến của thẻ <form>, bao gồm action, method, target, enctype, autocomplete, và nhiều thuộc tính khác.

2. Các thuộc tính quan trọng của HTML Form

a. Action

Thuộc tính action xác định địa chỉ URL mà dữ liệu của biểu mẫu sẽ được gửi đến để xử lý khi người dùng nhấn nút gửi (submit). Nếu thuộc tính này bị bỏ qua, dữ liệu biểu mẫu sẽ được gửi đến chính URL của trang hiện tại.

Ví dụ:

<form action="https://example.com/submit_form" method="post">
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Gửi">
</form>

• Trong ví dụ này, khi biểu mẫu được gửi, dữ liệu sẽ được gửi đến URL "https://example.com/submit_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 biểu mẫu. Có hai giá trị chính:

• GET: Gửi dữ liệu biểu mẫu dưới dạng chuỗi truy vấn trong URL. Phương thức này thường được sử dụng khi biểu mẫu không chứa dữ liệu nhạy cảm và muốn hiển thị kết quả tìm kiếm hoặc các tham số trong URL.
• POST: Gửi dữ liệu biểu mẫu dưới dạng thân của yêu cầu HTTP, an toàn hơn vì dữ liệu không xuất hiện trong URL. Thích hợp cho việc gửi dữ liệu lớn hoặc nhạy cảm như mật khẩu, thông tin cá nhân.

Ví dụ:

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

c. Target

Thuộc tính target xác định nơi để hiển thị kết quả sau khi biểu mẫu được gửi. Giá trị phổ biến của target bao gồm:

• _self: Mặc định, mở kết quả trong cùng cửa sổ/tab hiện tại.
• _blank: Mở kết quả trong một cửa sổ hoặc tab mới.
• _parent: Mở kết quả trong khung cha của trang (nếu có).
• _top: Mở kết quả trong cửa sổ trình duyệt chính, thay thế tất cả các khung nếu trang có sử dụng khung.

Ví dụ:

<form action="/submit" method="post" target="_blank">
    <label for="username">Tên người dùng:</label>
    <input type="text" id="username" name="username">
    <input type="submit" value="Đăng ký">
</form>

• Ở đây, khi người dùng nhấn "Đăng ký", kết quả sẽ mở ra trong một cửa sổ hoặc tab mới.

d. Enctype

Thuộc tính enctype xác định loại mã hóa được sử dụng để gửi dữ liệu từ biểu mẫu đến máy chủ. Điều này đặc biệt quan trọng khi bạn muốn gửi tệp tin hoặc dữ liệu phức tạp.

Các giá trị của enctype bao gồm:

• application/x-www-form-urlencoded: Giá trị mặc định. Dữ liệu sẽ được mã hóa dưới dạng URL.
• multipart/form-data: Được sử dụng khi biểu mẫu chứa các trường tệp (file upload), cho phép gửi tệp tin đến máy chủ.
• text/plain: Dữ liệu sẽ được gửi dưới dạng văn bản thuần túy (không được mã hóa), rất hiếm khi sử dụng.

Ví dụ:

<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="file">Chọn tệp:</label>
    <input type="file" id="file" name="file">
    <input type="submit" value="Tải lên">
</form>

• Trong ví dụ này, thuộc tính enctype="multipart/form-data" được sử dụng để hỗ trợ tải lên tệp tin.

e. Autocomplete

Thuộc tính autocomplete cho phép bạn bật hoặc tắt tính năng tự động điền dữ liệu của trình duyệt. Nếu autocomplete được bật, trình duyệt sẽ tự động đề xuất các giá trị mà người dùng đã nhập trước đó cho các trường nhập liệu có tên tương tự.

• on: Bật tính năng tự động điền (mặc định).
• off: Tắt tính năng tự động điền.

Ví dụ:

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

f. Novalidate

Thuộc tính novalidate dùng để tắt tính năng xác thực biểu mẫu mặc định của HTML5. Khi biểu mẫu có novalidate, trình duyệt sẽ bỏ qua tất cả các xác thực dữ liệu khi biểu mẫu được gửi đi, ngay cả khi có các thuộc tính như required, minlength, pattern, v.v.

Ví dụ:

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

g. Name

Thuộc tính name trong thẻ <form> (không bắt buộc) có thể được sử dụng để đặt tên cho biểu mẫu. Khi được sử dụng, name có thể giúp xác định biểu mẫu cụ thể nếu có nhiều biểu mẫu trên cùng một trang, đặc biệt trong các ngôn ngữ lập trình phía máy khách như JavaScript.

Ví dụ:

<form action="/submit" method="post" name="registrationForm">
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Gửi">
</form>

h. Accept-charset

Thuộc tính accept-charset xác định bộ mã ký tự (charset) mà máy chủ có thể xử lý khi nhận dữ liệu biểu mẫu. Điều này quan trọng khi trang web hỗ trợ nhiều ngôn ngữ với các ký tự khác nhau.

Ví dụ:

<form action="/submit" method="post" accept-charset="UTF-8">
    <label for="name">Họ và tên:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Gửi">
</form>

3. Ví dụ về form với nhiều thuộc tính

Dưới đây là một ví dụ thực tế về biểu mẫu với các thuộc tính action, method, enctype, và target được sử dụng đồng thời:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ví dụ Form - CodeTutHub</title>
</head>
<body>

<h1>Đăng ký tài khoản</h1>
<form action="/register" method="post" enctype="multipart/form-data" target="_blank">
    <label for="username">Tên người dùng:</label>
    <input type="text" id="username" name="username" required><br><br>

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

    <label for="password">Mật khẩu:</label>
    <input type="password" id="password" name="password" minlength="6" required><br><br>

    <label for="avatar">Tải lên ảnh đại diện:</label>
    <input type="file" id="avatar" name="avatar" accept="image/*"><br><br>

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

</body>
</html>

• action="/register": Dữ liệu sẽ được gửi đến trang xử lý đăng ký.
• method="post": Phương thức POST được sử dụng để gửi dữ liệu.
• enctype="multipart/form-data": Biểu mẫu có thể gửi tệp (ảnh đại diện).
• target="_blank": Kết quả sẽ mở ra trong tab mới.

4. Kết luận

HTML Form Attributes cung cấp nhiều tùy chọn và tính năng giúp kiểm soát cách thức dữ liệu biểu mẫu được gửi và xử lý. Từ việc chỉ định địa chỉ URL nhận dữ liệu đến việc xác định cách mã hóa tệp hoặc dữ liệu, các thuộc tính này giúp biểu mẫu của bạn hoạt động một cách linh hoạt và hiệu quả hơn.

Hãy sử dụng các thuộc tính này một cách hợp lý để tạo ra các biểu mẫu phù hợp với mục đích của trang web và mang lại trải nghiệm tốt nhất cho người dùng!