🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẽ cho ace về các thuộc tính khác nhau của phần tử <input> trong HTML.

1. Thuộc tính value

Thuộc tính value đầu vào chỉ định giá trị ban đầu cho trường đầu vào:

Ví dụ: Các trường nhập với giá trị ban đầu (mặc định):

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="David"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Xuan"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Copy and chạy code

2. Thuộc tính readonly

Thuộc tính readonly của input định nghĩa rằng trường đầu vào chỉ đọc và không edit được.

Không thể sửa đổi trường nhập readonly (tuy nhiên, người dùng có thể tab vào nó, tô sáng nó và sao chép văn bản từ nó).

Giá trị của trường nhập readonly sẽ được gửi khi gửi biểu mẫu!

Ví dụ:

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Xuan" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="David">
</form>

Copy and chạy code

3. Thuốc tính disabled

Thuộc tính disabled đầu vào định nghĩa rằng một trường input sẽ bị vô hiệu hóa.

Một trường đầu vào bị vô hiệu hóa là không thể sử dụng và không thể nhấp.

Giá trị của trường nhập bị vô hiệu hóa sẽ không được gửi khi gửi biểu mẫu.

Ví dụ:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="David" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Xuan">
</form>

Copy and chạy code

4. Thuộc tính size

Thuộc tính size của đầu vào xác đị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 chosize là 20.

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

Ví dụ:

 <form>
  <label for="fname">First name:</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>

5. Thuộc tính maxlength

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

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

Ví dụ:

 <form>
  <label for="fname">First name:</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>

Copy and chạy code

6. Thuộc tính min vs max

Các thuộc tínhmin vàmax đầu vào xác định các giá trị tối thiểu và tối đa cho trường đầu vào.

Các thuộc tính min và max hoạt động với các loại đầu vào sau: số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần.

Mẹo: Sử dụng các thuộc tính tối đa và tối thiểu để tạo ra một loạt các giá trị trong phạm vi nào đó.

Ví dụ: Đặt ngày tối đa, ngày tối thiểu và phạm vi giá trị pháp lý:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

7. Thuộc tính multiple

Thuộc tính multiple xác định rằng người dùng được phép nhập nhiều hơn một giá trị trong trường đầu vào.

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

Ví dụ: Trường tải lên file chấp nhận nhiều giá trị:

 <form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

8. Thuộc tính pattern

Thuộc tính pattern của đầu vào định nghĩa biểu thức để kiểm tra với giá trị của trường đầu vào được kiểm tra có thoãi mãn với biểu thức không trước khi gửi biểu mẫu.

Thuộc tính pattern hoạt động với các loại đầu vào sau: văn bản, ngày, tìm kiếm, url, tel, email và mật khẩu.

Mẹo: Sử dụng thuộc tính title để mô tả pattern để giúp người dùng nhập đúng giá trị.

Ví dụ: Trường nhập liệu chỉ có thể chứa ba chữ cái (không có số hoặc ký tự đặc biệt):

 <form>
  <label for="country_code">Country code:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

9. Thuộc tính placeholder

Thuộc tính placeholder của đầu vào định nghĩa ngắn một gợi ý mô tả giá trị dự kiến ​​của trường đầu vào (giá trị mẫu hoặc mô tả ngắn về định dạng dự kiến).

Gợi ý ngắn được hiển thị trong trường đầu vào trước khi người dùng nhập một giá trị.

Thuộc tính placeholder hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, tel, email và mật khẩu.

Ví dụ: Trường nhập liệu có văn bản giữ chỗ:

 <form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

10. Thuộc tính required

Thuộc tính required vào xác định rằng một trường đầu vào phải được điền trước khi gửi biểu mẫu(form).

Thuộc tính required hoạt động với các loại đầu vào sau: văn bản, tìm kiếm, url, tel, email, mật khẩu, bộ chọn ngày, số, checkbox, radio và file.

Ví dụ: 

 <form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

11. Thuộc tính step

Thuộc tính step của đầu vào chỉ định các khoảng số hợp pháp cho trường đầu vào.

Ví dụ: nếu step = “3”, các số hợp pháp có thể là -3, 0, 3, 6, v.v.

Mẹo: Thuộc tính này có thể được sử dụng cùng với các thuộc tính max và min để tạo ra một loạt các giá trị trong phạm vi nào đó.

Thuộc tính step hoạt động với các loại đầu vào sau: số, phạm vi, ngày, datetime-local, tháng, thời gian và tuần.

Ví dụ: Một trường đầu vào với các khoảng số được chỉ định:

 <form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

Lưu ý: Các hạn chế đầu vào không thể đánh lừa được và JavaScript cung cấp nhiều cách để thêm đầu vào bất hợp pháp. Để hạn chế đầu vào một cách an toàn, nó cũng phải được kiểm tra bởi người nhận (máy chủ)!

12. Thuộc tính autofocus

Thuộc tính autofocus lấy con trỏ chuột cho đầu vào để định rằng trường đầu vào này sẽ tự động có con trỏ chuộc khi tải trang.

Ví dụ: Để trường nhập “First name” tự động lấy con trỏ chuột khi tải trang:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

13. Thuộc tính list

Thuộc tính list của đầu vào đề cập đến một phần tử <datalist> có chứa các tùy chọn được xác định trước cho một phần tử input.

Ví dụ: Phần tử input với các giá trị được xác định trước trong datalist:

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

14. Thuộc tính autocomplete

Thuộc tính autocomplete của đầu vào xác định xem một biểu mẫu hoặc trường đầu vào nên tự động hoàn thành bật hay tắt.

Tự động hoàn tất(autocomplete) cho phép trình duyệt dự đoán giá trị. Khi người dùng bắt đầu nhập vào một trường, trình duyệt sẽ hiển thị các tùy chọn để điền vào trường, dựa trên các giá trị được nhập trước đó.

Thuộc tính tự động hoàn thành(autocomplete) hoạt động với <form> và các loại <input> sau: văn bản, tìm kiếm, url, tel, email, mật khẩu, bảng ngày, phạm vi và màu.

Ví dụ: Biểu mẫu HTML tự động bật và tắt cho một trường đầu vào:

 <form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</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="Submit">
</form>

Mẹo: Trong một số trình duyệt, bạn có thể cần kích hoạt chức năng tự động hoàn tất để hoạt động này (Xem trong “Preferences” trong menu của trình duyệt).

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM