Các thuộc tính của thẻ input trong HTML - HTML Input Attributes

  • Huân

    Tác giả

    Huân

  • Ngày đăng

    26 thg 10, 2023

  • Số lượt xem

    254 lượt xem


Bài học hướng dẫn các cách sử dụng các thuộc tính của thẻ <input> trong HTML (HTML Input Attributes). Các thuộc tính của thẻ <input> sẽ giúp cho website tăng hiệu suất.

Các thuộc tính của thẻ <input> trong HTML:

Thuộc tính value

Thuộc tính value của thẻ <input> được xác định là giá trị mặc định cho thẻ <input> đó

Ví dụ:

Thẻ <input> với giá trị mặc định

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Họ:</label><br>
        <input type="text" id="lname" name="lname" value="Doe">
</form>

Thuộc tính readonly

Thuộc tính readonly của thẻ <input> xác định rằng thẻ <input> đó chỉ có thể đọc và không thể chỉnh sửa

Ví dụ:

thẻ <input> chỉ đọc (readonly):

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" value="John" readonly><br>
        <label for="lname">Họ:</label><br>
        <input type="text" id="lname" name="lname" value="Doe">
</form>

Thuộc tính disabled

Thuộc tính disabled của thẻ <input> xác định rằng thẻ <input> đó nên bị vô hiệu hóa

Ví dụ:

thẻ <input> bị vô hiệu hóa (disabled):

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" value="John" disabled><br>
        <label for="lname">Họ:</label><br>
        <input type="text" id="lname" name="lname" value="Doe">
</form>

Thuộc tính size

 Thuộc tính size của thẻ <input> xác định độ rộng hiển thị, tính bằng số ký tự, của thẻ <input> đó.

Ví dụ:

Xác định độ rộng cho thẻ <input>:

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" size="50"><br>
        <label for="pin">Mã PIN:</label><br>
        <input type="text" id="pin" name="pin" size="4">
</form>

Thuộc tính maxlength

 Thuộc tính maxlength của thẻ <input> xác định số ký tự tối đa được phép trong thẻ <input> đó.

Ví dụ:

Xác định độ dài tối đa cho thẻ <input>:

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" size="50"><br>
        <label for="pin">Mã PIN:</label><br>
        <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Thuộc tính min và max

Thuộc tính min và max của thẻ <input> xác định giá trị tối thiểu và tối đa cho thẻ <input> đó.

Ví dụ:

Xác định giá trị tối thiểu, tối đa và một phạm vi giá trị hợp lệ:

<form>
        <label for="datemax">Nhập ngày trước ngày 1980-01-01:</label>
        <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
        <label for="datemin">Nhập ngày sau ngày 2000-01-01:</label>
        <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
        <label for="quantity">Số lượng (từ 1 đến 5):</label>
        <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

Thuộc tính multiple

Thuộc tính multiple của thẻ <input> xác định rằng người dùng có thể nhập nhiều giá trị trong thẻ <input> đó.

Ví dụ:

thẻ <input> cho phép nhập nhiều giá trị:

<form>
        <label for="files">Chọn các tệp:</label>
        <input type="file" id="files" name="files" multiple>
</form>

Thuộc tính pattern

 Thuộc tính pattern của thẻ <input> xác định một biểu thức chính quy để kiểm tra giá trị nhập vào thẻ <input> khi form được gửi.

Ví dụ:

Một thẻ <input> chỉ có thể chứa ba ký tự (không chứa số hoặc ký tự đặc biệt):

 

<form>
        <label for="country_code">Mã quốc gia:</label>
        <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Mã quốc gia ba chữ cái">
</form>

Thuộc tính placeholder

Thuộc tính placeholder của thẻ <input> xác định một gợi ý ngắn mô tả giá trị được mong đợi của thẻ <input>.

Ví dụ:

Một thẻ <input> với văn bản gợi ý:

<form>
        <label for="phone">Nhập số điện thoại:</label>
        <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Thuộc tính required

Thuộc tính required của thẻ <input> xác định rằng thẻ <input> phải được điền trước khi gửi form.

Ví dụ:

Một thẻ <input> bắt buộc:

<form>
        <label for="username">Tên người dùng:</label>
        <input type="text" id="username" name="username" required>
</form>

Thuộc tính step

Thuộc tính step của thẻ <input> xác định các khoảng cách số hợp lệ cho thẻ <input>.

Ví dụ:

thẻ <input> với các khoảng cách số hợp lệ đã được xác định:

<form>
        <label for="points">Điểm số:</label>
        <input type="number" id="points" name="points" step="3">
</form>

Thuộc tính autofocus

Thuộc tính autofocus của thẻ <input> xác định rằng thẻ <input> đó nên tự động có tiêu điểm khi trang tải

Ví dụ:

Thiết lập thẻ <input> "Tên" tự động có tiêu điểm khi trang tải:

<form>
        <label for="fname">Tên:</label><br>
        <input type="text" id="fname" name="fname" autofocus><br>
        <label for="lname">Họ:</label><br>
        <input type="text" id="lname" name="lname">
</form>

Thuộc tính height và width

Thuộc tính height và width của thẻ <input> hình ảnh (type="image") xác định chiều cao và chiều rộng của thẻ <input> hình ảnh.

Ví dụ:

Xác định hình ảnh là nút gửi với thuộc tính chiều rộng và chiều cao:

<form>
 <label for="fname">Tên:</label
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Họ:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="image" src="img_submit.gif" alt"Gửi" width"48" height="48">
</form>

Thuộc tính list

Thuộc tính list của thẻ <input> liên quan đến một phần tử <datalist> chứa các tùy chọn đã được định sẵn cho một phần tử <input>.

Ví dụ:

Một phần tử <input> với các giá trị được định sẵn trong một phần tử <datalist>:

<form>
    <input list="browsers">
    <datalist id="browsers">
        <option value="Edge">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>

Thuộc tính autocomplete

Thuộc tính autocomplete của thẻ <input> xác định liệu form hoặc thẻ <input> có nên có tính năng tự động hoàn thành (autocomplete) hay không.

Ví dụ:

Một form HTML với autocomplete bật hoặc tắt cho một thẻ <input> cụ thể:

<form action="/action_page.php" autocomplete="on">
        <label for="fname">Tên:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Họ:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" autocomplete="off"><br><br>
        <input type="submit" value="Gửi">
</form>

 Lưu ý: Trong một số trình duyệt, bạn có thể cần kích hoạt chức năng autocomplete để sử dụng (Xem trong "Tùy chọn" trong menu trình duyệt).


Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.