34. Các Thành Phần Của Form Trong HTML

Các thành phần của Form trong HTML: một biểu mẫu (<form>) chứa nhiều thành phần khác nhau để người dùng nhập thông tin và gửi dữ liệu đến máy chủ để xử lý. Dưới đây là danh sách các thành phần quan trọng thường được sử dụng trong một biểu mẫu:

Text Input: Dùng để nhập văn bản ngắn như tên người dùng, email, số điện thoại, v.v.

html

<input type="text" id="username" name="username" placeholder="Enter your username">

Password Input: Dùng để nhập mật khẩu, hiển thị các ký tự được ẩn.

html

<input type="password" id="password" name="password" placeholder="Enter your password">

Textarea: Dùng để nhập văn bản dài, như bình luận hoặc nội dung thông điệp.

html

<textarea id="message" name="message" rows="4"></textarea>

Radio Buttons: Cho phép người dùng chọn một lựa chọn từ danh sách các tùy chọn.

html

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Checkboxes: Cho phép người dùng chọn một hoặc nhiều tùy chọn từ danh sách.

html

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>

Select: Cho phép người dùng chọn một lựa chọn từ danh sách dạng thả xuống.

html

<select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

File Input: Cho phép người dùng tải lên tệp từ máy tính.

html

<input type="file" id="avatar" name="avatar">

Submit Button: Dùng để gửi biểu mẫu sau khi nhập thông tin.

html

<button type="submit">Submit</button>

Reset Button: Dùng để làm lại biểu mẫu, xóa các giá trị đã nhập.

html

<button type="reset">Reset</button>

Hidden Input: Dùng để truyền dữ liệu ẩn không hiển thị cho người dùng, thường được sử dụng để truyền dữ liệu meta hoặc dữ liệu điều khiển.

html

<input type="hidden" name="csrf_token" value="your_csrf_token_here">

Đây chỉ là một số thành phần cơ bản trong biểu mẫu HTML. Bạn có thể kết hợp chúng theo cách linh hoạt để tạo các biểu mẫu phức tạp và đáp ứng nhu cầu cụ thể của dự án.

Dưới đây là một ví dụ về cách sử dụng các thành phần của biểu mẫu trong HTML để tạo một biểu mẫu đơn giản để đăng ký thành viên:

html

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

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

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

        <label for="gender">Gender:</label>
        <input type="radio" id="male" name="gender" value="male" required>
        <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female" required>
        <label for="female">Female</label><br>

        <label for="country">Country:</label>
        <select id="country" name="country" required>
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="uk">United Kingdom</option>
        </select><br>

        <input type="checkbox" id="subscribe" name="subscribe" value="yes">
        <label for="subscribe">Subscribe to newsletter</label><br>

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

Trong ví dụ này:

action: Biểu mẫu sẽ gửi dữ liệu đăng ký tới tệp process_registration.php để xử lý.
method: Dữ liệu sẽ được gửi bằng phương thức “POST”.
Mỗi trường nhập dữ liệu có thuộc tính name để xác định tên của dữ liệu gửi đi khi biểu mẫu được gửi đi.

Bạn cần tạo tệp process_registration.php để xử lý dữ liệu đăng ký, kiểm tra tính hợp lệ của dữ liệu và thực hiện các hành động cần thiết.

Leave a Comment Cancel Reply