35. Input Type Trong HTML

Input Type trong HTML: thuộc tính type được sử dụng để xác định loại dữ liệu hoặc hành động mà một phần tử HTML sẽ chứa. Dưới đây là một số giá trị phổ biến của thuộc tính type khi sử dụng với các thẻ input:

Text Input: Dùng để nhập văn bản ngắn.

html

<input type="text" name="username">

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

html

<input type="password" name="password">

Email Input: Dùng để nhập địa chỉ email và kiểm tra tính hợp lệ của định dạng email.

html

<input type="email" name="email">

Number Input: Dùng để nhập số.

html

<input type="number" name="age">

Checkbox Input: Dùng để chọn một hoặc nhiều tùy chọn từ danh sách.

html

<input type="checkbox" name="newsletter" value="yes">

Radio Input: Dùng để chọn một lựa chọn duy nhất từ danh sách.

html

<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

File Input: Dùng để tải lên tệp từ máy tính.

html

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

Submit Button: Dùng để gửi biểu mẫu.

html

<input type="submit" value="Submit">

Reset Button: Dùng để làm lại biểu mẫu.

html

<input type="reset" value="Reset">

Button: Dùng để thực hiện các hành động khác (không cần gửi biểu mẫu).

html

<input type="button" value="Click me">

Hidden Input: Dùng để truyền dữ liệu ẩn không hiển thị cho người dùng.

html

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

Date Input: Dùng để nhập ngày.

html

<input type="date" name="birth_date">

Vui lòng lưu ý rằng một số thuộc tính type có thể không được hỗ trợ hoặc có thể hiển thị khác nhau trên các trình duyệt khác nhau.

Dưới đây là một ví dụ về cách sử dụng các giá trị của thuộc tính type trong các trường <input> trong HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Types Example</title>
</head>
<body>
    <h1>Input Types Example</h1>
    <form action="process_data.php" method="POST">
        <label for="text-input">Text Input:</label>
        <input type="text" id="text-input" name="text_input"><br>

        <label for="password-input">Password Input:</label>
        <input type="password" id="password-input" name="password_input"><br>

        <label for="email-input">Email Input:</label>
        <input type="email" id="email-input" name="email_input"><br>

        <label for="number-input">Number Input:</label>
        <input type="number" id="number-input" name="number_input"><br>

        <label>Checkbox Input:</label>
        <input type="checkbox" id="checkbox-1" name="option_1" value="yes">
        <label for="checkbox-1">Option 1</label>
        <input type="checkbox" id="checkbox-2" name="option_2" value="yes">
        <label for="checkbox-2">Option 2</label><br>

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

        <label for="file-input">File Input:</label>
        <input type="file" id="file-input" name="file_input"><br>

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

Trong ví dụ này, mỗi trường <input> có một thuộc tính type khác nhau để hiển thị loại dữ liệu hoặc hành động tương ứng. Khi người dùng nhập thông tin vào các trường và nhấn nút “Submit”, dữ liệu sẽ được gửi đến tệp process_data.php để xử lý. Bạn cần tạo tệp process_data.php để xử lý dữ liệu và thực hiện các hành động cần thiết. Trên đây là giới thiệu về Input Type trong HTML.

Leave a Comment Cancel Reply