32. Form Trong HTML

Form trong HTML: một <form> là một phần quan trọng để tạo ra các biểu mẫu trên trang web, cho phép người dùng nhập thông tin và gửi nó đến máy chủ để xử lý. Dưới đây là cách tạo và sử dụng một biểu mẫu HTML sử dụng thẻ <form>:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    <form action="process_form.php" method="POST">
        <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="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea><br>

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

Trong ví dụ trên:

<form>: Thẻ này định nghĩa một biểu mẫu. Thuộc tính action xác định URL mà dữ liệu biểu mẫu sẽ được gửi đến để xử lý. Thuộc tính method xác định phương thức gửi dữ liệu, thường là “GET” hoặc “POST”.
<label>: Thẻ này đại diện cho nhãn dùng để mô tả cho người dùng biết thông tin cần nhập vào các trường biểu mẫu. Thuộc tính for liên kết với id của trường nhập tương ứng.
<input>: Đây là trường để người dùng nhập dữ liệu. Thuộc tính type xác định loại trường (ví dụ: text, email, password,…). Thuộc tính id liên kết với <label>, và thuộc tính name là tên của trường dữ liệu được sử dụng khi dữ liệu gửi đến máy chủ.
<textarea>: Thẻ này cho phép người dùng nhập nhiều dòng văn bản. Thuộc tính rows xác định số dòng hiển thị.
<button>: Đây là nút gửi biểu mẫu. Khi người dùng nhấn nút này, dữ liệu sẽ được gửi đến URL được chỉ định trong thuộc tính action.

Trong thực tế, bạn cần xử lý dữ liệu biểu mẫu trên máy chủ bằng cách sử dụng ngôn ngữ lập trình như PHP, Python, Java, hoặc bất kỳ ngôn ngữ nào phù hợp.

Dưới đây là một ví dụ cơ bản về cách xử lý dữ liệu biểu mẫu từ HTML bằng PHP trên máy chủ. Trong ví dụ này, chúng ta sẽ tạo một biểu mẫu liên hệ đơn giản và xử lý dữ liệu được gửi đến máy chủ.

Tạo một tệp có tên là contact_form.html:

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_form.php" method="POST">
        <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="message">Message:</label>
        <textarea id="message" name="message" rows="4" required></textarea><br>

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

Tạo một tệp có tên là process_form.php để xử lý dữ liệu biểu mẫu:

php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Submission Result</title>
</head>
<body>
    <h1>Form Submission Result</h1>
    
    <?php
    if ($_SERVER["REQUEST_METHOD"] === "POST") {
        $name = $_POST["name"];
        $email = $_POST["email"];
        $message = $_POST["message"];
        
        echo "<p><strong>Name:</strong> $name</p>";
        echo "<p><strong>Email:</strong> $email</p>";
        echo "<p><strong>Message:</strong> $message</p>";
    } else {
        echo "<p>No data submitted.</p>";
    }
    ?>
</body>
</html>

Khi bạn điền thông tin vào biểu mẫu và nhấn nút “Submit”, dữ liệu sẽ được gửi đến process_form.php để xử lý. Sau đó, trang sẽ hiển thị thông tin bạn đã nhập.

Lưu ý rằng đây chỉ là ví dụ cơ bản để minh họa cách xử lý biểu mẫu sử dụng PHP. Trong thực tế, bạn cần kiểm tra và xử lý dữ liệu cẩn thận để đảm bảo tính bảo mật và ngăn ngừa tấn công từ người dùng không trung thực. Trên đây là giới thiệu về Form trong HTML.

Leave a Comment Cancel Reply