37. Input Form Attribute Trong HTML

Input Form Attribute trong HTML: Có một số thuộc tính của biểu mẫu (<form>) trong HTML mà bạn có thể sử dụng để điều chỉnh cách biểu mẫu hoạt động hoặc xử lý dữ liệu được gửi lên máy chủ. Dưới đây là một số thuộc tính quan trọng cho thẻ <form>:

action: Xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến để xử lý.

html

<form action="process_form.php" method="POST">
    <!-- các trường nhập dữ liệu -->
</form>

method: Xác định phương thức gửi dữ liệu. Có hai phương thức chính là “GET” và “POST”.

html

<form action="process_form.php" method="POST">
    <!-- các trường nhập dữ liệu -->
</form>

target: Xác định cửa sổ hoặc khung mục tiêu để hiển thị kết quả trả về sau khi gửi biểu mẫu.

html

<form action="process_form.php" method="POST" target="_blank">
    <!-- các trường nhập dữ liệu -->
</form>

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ủ. Thường sử dụng cho việc tải tệp lên ("multipart/form-data") hoặc gửi dữ liệu một cách tiêu chuẩn ("application/x-www-form-urlencoded").

html

<form action="process_upload.php" method="POST" enctype="multipart/form-data">
    <!-- các trường nhập dữ liệu -->
</form>

autocomplete: Xác định xem trình duyệt có nên kích hoạt chế độ tự động hoàn thành (tự động điền) cho các trường hay không.

html

<form action="process_form.php" method="POST" autocomplete="on">
    <!-- các trường nhập dữ liệu -->
</form>

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ủ.

html

<form action="process_form.php" method="POST" novalidate>
    <!-- các trường nhập dữ liệu -->
</form>

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.

html

<form action="process_form.php" method="POST" name="contact_form">
    <!-- các trường nhập dữ liệu -->
</form>

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.

html

<form action="process_form.php" method="POST" accept-charset="UTF-8">
    <!-- các trường nhập dữ liệu -->
</form>

Đây chỉ là một số thuộc tính cơ bản mà bạn có thể sử dụng để tùy chỉnh hành vi của biểu mẫu trong HTML. Tùy thuộc vào yêu cầu cụ thể của dự án, bạn có thể sử dụng các thuộc tính này một cách linh hoạt.

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 liên hệ:

html

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

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

        <label for="subject">Subject:</label>
        <input type="text" id="subject" name="subject"><br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea><br>

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

Trong ví dụ này:

action: Biểu mẫu sẽ gửi dữ liệu liên hệ tới tệp process_contact.php để xử lý.
method: Dữ liệu sẽ được gửi bằng phương thức “POST”.
name: Đặt tên cho biểu mẫu, cho phép bạn tham chiếu đến biểu mẫu bằng JavaScript.
autocomplete: Chế độ tự động hoàn thành được kích hoạt.
Các trường nhập dữ liệu có thuộc tính required để yêu cầu nhập đầy đủ thông tin trước khi gửi.

Khi người dùng điền thông tin và nhấn nút “Send”, dữ liệu sẽ được gửi đến tệp process_contact.php để xử lý. Bạn cần tạo tệp process_contact.php để xử lý thông tin liên hệ và thực hiện các hành động cần thiết.

Leave a Comment Cancel Reply