36. Input Attribute Trong HTML

Input Attribute trong HTML: các thuộc tính (attributes) được sử dụng để cung cấp thông tin bổ sung hoặc điều chỉnh cách một phần tử hoạt động. Dưới đây là một số ví dụ về các thuộc tính thường được sử dụng với các phần tử <input>:

id: Xác định một ID duy nhất cho phần tử, giúp trong việc xác định và tương tác với phần tử bằng JavaScript hoặc CSS.

html

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

name: Xác định tên của phần tử, dùng để gửi giá trị của phần tử khi gửi biểu mẫu.

html

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

value: Xác định giá trị mặc định hoặc giá trị của phần tử.

html

<input type="text" id="username" name="username" value="john_doe">

placeholder: Hiển thị một văn bản gợi ý trong trường khi không có giá trị.

html

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

required: Yêu cầu người dùng nhập dữ liệu vào trường trước khi gửi biểu mẫu.

html

<input type="text" id="name" name="name" required>

readonly: Đặt trường nhập dữ liệu chỉ để đọc và không thể chỉnh sửa.

html

<input type="text" id="readonly-field" name="readonly_field" value="Read only" readonly>

disabled: Vô hiệu hóa trường nhập dữ liệu, ngăn người dùng tương tác với nó.

html

<input type="text" id="disabled-field" name="disabled_field" value="Disabled" disabled>

size: Xác định số ký tự có thể hiển thị trên trường nhập dữ liệu.

html

<input type="text" id="short-text" name="short_text" size="20">

maxlength: Giới hạn số ký tự tối đa có thể nhập vào trường.

html

<input type="text" id="limited-text" name="limited_text" maxlength="50">

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

html

<input type="text" id="autocomplete-on" name="autocomplete_on" autocomplete="on">
<input type="text" id="autocomplete-off" name="autocomplete_off" autocomplete="off">

pattern: Đặt một biểu thức chính quy để kiểm tra tính hợp lệ của giá trị nhập vào.

html

<input type="text" id="phone-number" name="phone_number" pattern="[0-9]{10}">

min và max: Được sử dụng với các loại số (number, range,…) để xác định giá trị tối thiểu và tối đa cho phạm vi giá trị.

html

<input type="number" id="age" name="age" min="18" max="99">

step: Xác định bước tăng/giảm cho các loại số có khả năng thay đổi.

html

<input type="number" id="quantity" name="quantity" step="1">

multiple: Cho phép người dùng chọn nhiều tệp khi sử dụng <input type="file">.

html

<input type="file" id="attachments" name="attachments" multiple>

Đây chỉ là một số ví dụ về các thuộc tính phổ biến mà bạn có thể sử dụng với các phần tử <input>. Các thuộc tính khác cũng có sẵn và tùy thuộc vào loại dữ liệu và yêu cầu của bạn.

Dưới đây là một ví dụ minh họa về cách sử dụng một số thuộc tính khác nhau trong các phần tử <input>:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Attributes Example</title>
</head>
<body>
    <h1>Input Attributes Example</h1>
    <form action="process_input.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" autocomplete="on"><br>

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

        <label for="phone">Phone Number:</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit number"><br>

        <label for="age">Age:</label>
        <input type="number" id="age" name="age" min="18" max="99" step="1"><br>

        <label for="file">Attachments:</label>
        <input type="file" id="file" name="attachments" multiple><br>

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

Trong ví dụ này:

Trường “Username” sử dụng thuộc tính required để yêu cầu người dùng nhập dữ liệu.
Trường “Email” sử dụng thuộc tính autocomplete để kích hoạt chế độ tự động hoàn thành.
Trường “Password” yêu cầu mật khẩu ít nhất 8 ký tự sử dụng thuộc tính minlength và required.
Trường “Phone Number” sử dụng thuộc tính pattern để kiểm tra dữ liệu theo biểu thức chính quy.
Trường “Age” sử dụng thuộc tính min, max, và step để giới hạn và xác định bước tăng/giảm.
Trường “Attachments” cho phép người dùng chọn nhiều tệp sử dụng thuộc tính multiple.

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

Leave a Comment Cancel Reply