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

    88 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.

Advertisement

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

Tin tức mới

Tin tức thú vị

Nhà tài trợ: