33. Thuộc Tính Form Trong HTML

Thuộc tính form trong HTML: <form> là một thẻ quan trọng để tạo biểu mẫu trên trang web. Thẻ <form> có một loạt các thuộc tính mà bạn có thể sử dụng để điều chỉnh cách biểu mẫu hoạt động và tương tác với máy chủ. Dưới đây là một số thuộc tính quan trọng của thẻ <form>:

action: Xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến để xử lý. Ví dụ: action="process_form.php".
method: Xác định phương thức gửi dữ liệu. Hai phương thức chính là “GET” và “POST”. Ví dụ: method="POST".
target: Xác định cửa sổ hoặc khung mục tiêu cho kết quả trả về sau khi gửi biểu mẫu. Thường được sử dụng với các giá trị như _blank, _self, _parent, _top.
enctype: Xác định cách dữ liệu biểu mẫu được mã hóa trước khi gửi lên máy chủ. Các giá trị thông thường bao gồm application/x-www-form-urlencoded và multipart/form-data.
autocomplete: Xác định có nên kích hoạt chế độ tự động điền (tự động hoàn thành) cho các trường trong biểu mẫu hay không. Các giá trị thường là “on” hoặc “off”.
novalidate: Ngăn trình duyệt thực hiện kiểm tra dữ liệu trước khi gửi biểu mẫu lên máy chủ. Thường được sử dụng để tắt kiểm tra mặc định của trình duyệt.
name: Xác định tên của biểu mẫu. Thuộc tính này thường được sử dụng trong việc gửi dữ liệu bằng JavaScript.
accept-charset: Xác định bộ ký tự mà máy chủ nên sử dụng khi xử lý dữ liệu biểu mẫu. Ví dụ: accept-charset="UTF-8".

Dưới đây là một ví dụ về cách sử dụng các thuộc tính này trong một thẻ <form>:

html

<form action="process_form.php" method="POST" enctype="multipart/form-data" autocomplete="on" novalidate>
    <!-- Các trường nhập dữ liệu ở đây -->
</form>

Lưu ý rằng việc sử dụng các thuộc tính phụ thuộc vào yêu cầu cụ thể của biểu mẫu và cách bạn muốn tương tác với dữ liệu được gửi đi và máy chủ.

Dưới đây là một ví dụ về cách sử dụng các thuộc tính của thẻ <form> trong HTML để tạo một biểu mẫu đăng nhập:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
</head>
<body>
    <h1>Login</h1>
    <form action="process_login.php" method="POST" autocomplete="on">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>

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

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

Trong ví dụ này:

action: Biểu mẫu sẽ gửi dữ liệu đăng nhập tới tệp process_login.php để xử lý.
method: Dữ liệu sẽ được gửi bằng phương thức “POST”.
autocomplete: Chế độ tự động điền được bật (on) để trình duyệt gợi ý các giá trị trước đó đã nhập.
required: Trường nhập dữ liệu phải được điền đầy đủ trước khi gửi.

Sau khi người dùng nhập tên người dùng và mật khẩu, dữ liệu sẽ được gửi đến tệp process_login.php để xử lý. Trong thực tế, bạn cần tạo tệp process_login.php để kiểm tra thông tin đăng nhập và thực hiện các hành động tương ứng.

Lưu ý rằng trong thực tế, bạn cần xử lý thông tin đăng nhập một cách an toàn, bảo mật để đảm bảo tính bảo mật cho người dùng.

Leave a Comment Cancel Reply