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