Thuộc tính xử lí Input trong HTML - HTML Input Attributes

value Attribute

Attribute value chỉ định giá trị ban đầu cho trường đầu vào:

Ví dụ

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

readonly Attribute

Attribute readonly vào chỉ định rằng trường đầu vào là chỉ đọc.

Không thể sửa đổi trường đầu vào chỉ đọc (tuy nhiên, người dùng có thể gắn thẻ, đánh dấu và sao chép văn bản từ trường đó).

Giá trị của trường đầu vào chỉ đọc sẽ được gửi khi submit form!

Ví dụ

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

disabled Attribute

Attribute disabled chỉ định rằng một trường đầu vào sẽ bị vô hiệu hóa.

Attribute disabled không thể sử dụng được và không thể nhấp được.

Giá trị của trường đầu vào bị vô hiệu hóa sẽ không được gửi khi submit form!

Ví dụ

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

size Attribute

Attribute size đầu vào chỉ định chiều rộng hiển thị, tính bằng ký tự, của trường đầu vào.

Giá trị mặc định cho size là 20.

Lưu ý: Attribute size hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, điện thoại, url, email và mật khẩu.

Ví dụ

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

maxlength Attribute

Attribute maxlength đầu vào chỉ định số ký tự tối đa được phép trong một trường đầu vào.

Lưu ý: Khi đặt cường độ tối đa, trường nhập sẽ không chấp nhận nhiều hơn số ký tự được chỉ định. Tuy nhiên, thuộc tính này không cung cấp bất kỳ phản hồi nào. Vì vậy, nếu bạn muốn cảnh báo người dùng, bạn phải viết JavaScript.

Ví dụ

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

min and max Attributes

Các attribute min và max chỉ định các giá trị tối thiểu và tối đa cho một trường đầu vào.

Các attribute min và max hoạt động với các loại đầu vào sau: số, phạm vi, ngày, ngày giờ-cục bộ, tháng, thời gian và tuần.

Mẹo: Sử dụng các thuộc tính max và min cùng nhau để tạo ra một loạt các giá trị pháp lý.

Ví dụ

<form>    <label for="datemax">Nhập ngày trước 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 2000-01-01:</label>    <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>      <label for="quantity">Giá trị (giữa 1 và 5):</label>    <input type="number" id="quantity" name="quantity" min="1" max="5">  </form>

multiple Attribute

Attribute multiple chỉ định rằng người dùng được phép nhập nhiều giá trị vào một trường đầu vào.

Attribute multiple hoạt động với các loại đầu vào sau: email và tệp.

Ví dụ

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

pattern Attribute

Attribute pattern chỉ định một biểu thức chính quy mà giá trị của trường đầu vào được kiểm tra, khi form được submit.

Attribute pattern hoạt động với các loại đầu vào sau: văn bản, ngày tháng, tìm kiếm, url, số điện thoại, email và mật khẩu.

Mẹo: Sử dụng attribute title chung để mô tả mẫu giúp người dùng.

Mẹo: Tìm hiểu thêm về biểu thức chính quy trong hướng dẫn JavaScript của chúng tôi.

Ví dụ

<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 3 chữ cái">  </form>

placeholder Attribute

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

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