HTML Input 属性

value 属性

value 属性规定输入字段的初始值：

Mẫu

<form action="">
 Tên đầu: <br>
<input type="text" name="firstname" value="Bill">
<br>
 Tên cuối: <br>
<input type="text" name="lastname">
</form>

Thử ngay

readonly 属性

readonly 属性规定输入字段为只读（不能修改）：

Mẫu

<form action="">
 Tên đầu: <br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 Tên cuối: <br>
<input type="text" name="lastname">
</form>

Thử ngay

readonly 属性不需要值。它等同于 readonly="readonly"。

disabled 属性

disabled 属性规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

Mẫu

<form action="">
 Tên đầu: <br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 Tên cuối: <br>
<input type="text" name="lastname">
</form>

Thử ngay

disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性

size 属性规定输入字段的尺寸（以字符计）：

Mẫu

<form action="">
 Tên đầu: <br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 Tên cuối: <br>
<input type="text" name="lastname">
</form>

Thử ngay

maxlength 属性

maxlength 属性规定输入字段允许的最大长度：

Mẫu

<form action="">
 Tên đầu: <br>
<input type="text" name="firstname" maxlength="10">
<br>
 Tên cuối: <br>
<input type="text" name="lastname">
</form>

Thử ngay

Nếu thiết lập thuộc tính maxlength, thì bộ điều khiển nhập sẽ không chấp nhận超过所允许数的字符。

Thuộc tính này sẽ không cung cấp bất kỳ phản hồi nào. Nếu cần thông báo cho người dùng, bạn phải viết mã JavaScript.

Ghi chú:Giới hạn nhập vào không phải lúc nào cũng chính xác. JavaScript cung cấp nhiều phương pháp để tăng cường kiểm tra nhập liệu không hợp lệ. Để giới hạn an toàn, người nhận (máy chủ) phải kiểm tra cùng lúc.

Thuộc tính HTML5

HTML5 đã tăng thêm các thuộc tính cho <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height và width
  • list
  • min và max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

và thêm các thuộc tính cần thiết cho <form>:

  • autocomplete
  • novalidate

Thuộc tính autocomplete

Thuộc tính autocomplete xác định biểu mẫu hoặc trường nhập liệu có nên tự động hoàn thành hay không.

Khi tự động hoàn thành được bật, trình duyệt sẽ tự động điền giá trị dựa trên giá trị nhập trước của người dùng.

Lưu ý:Bạn có thể thiết lập autocomplete của biểu mẫu là on, đồng thời thiết lập trường nhập liệu cụ thể là off, ngược lại cũng vậy.

Thuộc tính autocomplete áp dụng cho <form> và các loại <input> sau: text, search, url, tel, email, password, datepickers, range và color。

Mẫu

HTML表单开启自动完成（某个输入字段为 off）：

<form action="action_page.php" autocomplete="on">
   Tên đầu: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

Thử ngay

Lưu ý:Trong một số trình duyệt, bạn có thể cần phải kích hoạt thủ công chức năng hoàn thành tự động.

Thuộc tính novalidate

Thuộc tính novalidate thuộc về thuộc tính <form>.

Nếu được thiết lập, thuộc tính novalidate quy định không kiểm tra dữ liệu biểu mẫu khi gửi biểu mẫu.

Mẫu

Chỉ thị rằng biểu mẫu không được kiểm tra khi gửi:

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

Thử ngay

Thuộc tính autofocus

Thuộc tính autofocus là thuộc tính boolean.

Nếu được thiết lập, quy định rằng phần tử <input> nên tự động nhận được sự tập trung khi trang được tải lên.

Mẫu

Làm cho trường nhập liệu "First name" tự động nhận được sự tập trung khi trang được tải lên:

First name:<input type="text" name="fname" autofocus>

Thử ngay

Thuộc tính form

Thuộc tính form quy định một hoặc nhiều biểu mẫu mà phần tử <input> thuộc.

Lưu ý:Nếu cần tham chiếu nhiều biểu mẫu, hãy sử dụng danh sách id biểu mẫu được phân tách bằng khoảng trống.

Mẫu

Trường nhập liệu nằm ngoài biểu mẫu HTML (nhưng vẫn thuộc biểu mẫu):

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

Thử ngay

Thuộc tính formaction

Thuộc tính formaction quy định URL xử lý tệp của bộ điều khiển đầu vào khi gửi biểu mẫu.

Thuộc tính formaction che phủ thuộc tính action của thẻ <form>.

Thuộc tính formaction áp dụng cho type="submit" và type="image".

Mẫu

Biểu mẫu HTML có hai nút submit và thực hiện các hành động khác nhau:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

Thử ngay

Thuộc tính formentype

Thuộc tính formentype quy định cách mã hóa dữ liệu biểu mẫu (form-data) khi gửi lên máy chủ (chỉ áp dụng cho biểu mẫu có method="post").

Thuộc tính formentype che phủ thuộc tính enctype của thẻ <form>.

Thuộc tính formenctype áp dụng cho type="submit" và type="image".

Mẫu

Gửi dữ liệu mẫu đơn mặc định và mã hóa "multipart/form-data" (nút submit thứ hai):

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

Thử ngay

Thuộc tính formmethod

Thuộc tính formmethod xác định phương thức HTTP để gửi dữ liệu mẫu đơn (form-data) đến URL action.

Thuộc tính formmethod sẽ thay thế thuộc tính method của thẻ <form>.

Thuộc tính formmethod áp dụng cho type="submit" và type="image".

Mẫu

Nút submit thứ hai sẽ thay thế phương thức HTTP của mẫu đơn:

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

Thử ngay

Thuộc tính formnovalidate

Thuộc tính novalidate là thuộc tính boolean.

Nếu được thiết lập, nó sẽ quy định không thực hiện việc xác thực đối với thẻ <input> khi gửi mẫu đơn.

Thuộc tính formnovalidate sẽ thay thế thuộc tính novalidate của thẻ <form>.

Thuộc tính formnovalidate có thể được sử dụng với type="submit"。

Mẫu

Mẫu đơn có hai nút submit (xác thực và không xác thực):

<form action="action_page.php">
   Email: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

Thử ngay

Thuộc tính formtarget

Tên hoặc từ khóa do thuộc tính formtarget quy định chỉ ra nơi hiển thị phản hồi nhận được sau khi submit biểu mẫu.

Thuộc tính formtarget sẽ ghi đè thuộc tính target của phần tử <form>.

Thuộc tính formtarget có thể được sử dụng với type="submit" và type="image".

Mẫu

This form has two submit buttons, corresponding to different target windows:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

Thử ngay

Thuộc tính height và width

Thuộc tính height và width quy định chiều cao và chiều rộng của phần tử <input>.

Thuộc tính height và width chỉ được sử dụng cho <input type="image">.

Ghi chú:Luôn luôn quy định kích thước của hình ảnh. Nếu trình duyệt không biết kích thước của hình ảnh, trang web sẽ chớp sáng khi hình ảnh được tải lên.

Mẫu

Định nghĩa hình ảnh là nút submit, và thiết lập thuộc tính height và width:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Thử ngay

Thuộc tính list

Thuộc tính list tham chiếu đến phần tử <datalist> chứa các tùy chọn trước định sẵn của phần tử <input>.

Mẫu

Sử dụng <datalist> để thiết lập các giá trị trước định sẵn của phần tử <input>:

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

Thử ngay

Thuộc tính min và max

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

Thuộc tính min và max áp dụng cho các loại nhập như: number, range, date, datetime, datetime-local, month, time và week.

Mẫu

Thẻ <input> có giá trị tối thiểu và tối đa:

Nhập ngày trước 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
 Nhập ngày trước 1980-01-01:
Nhập ngày sau 2000-01-02:
 Số lượng (giữa 1 và 5):
<input type="number" name="quantity" min="1" max="5">

Thử ngay

Thuộc tính multiple

Thuộc tính multiple là thuộc tính布尔.

Nếu được thiết lập, nó quy định cho phép người dùng nhập nhiều giá trị hơn một trong thẻ <input>.

Thuộc tính multiple áp dụng cho các loại nhập sau: email và file.

Mẫu

Trường nhập tải lên tệp chấp nhận nhiều giá trị:

Chọn ảnh:<input type="file" name="img" multiple>

Thử ngay

Thuộc tính pattern

Thuộc tính pattern quy định biểu thức chính quy để kiểm tra giá trị của thẻ <input>.

Thuộc tính pattern áp dụng cho các loại nhập sau: text, search, url, tel, email và password.

Lưu ý:Sử dụng thuộc tính title toàn cục để mô tả mẫu để giúp người dùng.

Lưu ý:Học thêm về biểu thức chính quy trong giáo trình JavaScript của chúng tôi.

Mẫu

Chỉ bao gồm ba chữ cái cho trường nhập (không có số hoặc ký tự đặc biệt):

Mã quốc gia: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Thử ngay

Thuộc tính placeholder

Thuộc tính placeholder quy định sử dụng để mô tả giá trị mong đợi của trường nhập (giá trị mẫu hoặc mô tả ngắn gọn về định dạng).

Cảnh báo này sẽ hiển thị trong trường nhập trước khi người dùng nhập giá trị.

Thuộc tính placeholder áp dụng cho các loại đầu vào sau: text, search, url, tel, email và password.

Mẫu

Trường đầu vào có văn bản chiếm chỗ:

<input type="text" name="fname" placeholder="Tên đầu tiên">

Thử ngay

Thuộc tính required

Thuộc tính required là thuộc tính boolean.

Nếu được thiết lập, sẽ quy định rằng trước khi gửi biểu mẫu, trường đầu vào phải được điền đầy đủ.

Thuộc tính required áp dụng cho các loại đầu vào sau: text, search, url, tel, email, password, bộ chọn ngày, number, checkbox, radio và file.

Mẫu

Trường đầu vào bắt buộc:

Username: <input type="text" name="usrname" required>

Thử ngay

Thuộc tính step

Thuộc tính step quy định khoảng cách số hợp lệ của phần tử <input>.

Mẫu: Nếu step="3", thì số hợp lệ là -3, 0, 3, 6, v.v.

Lưu ý:Thuộc tính step có thể được sử dụng cùng với thuộc tính max và min để tạo ra phạm vi giá trị hợp lệ.

Thuộc tính step áp dụng cho các loại đầu vào sau: number, range, date, datetime, datetime-local, month, time và week.

Mẫu

Trường đầu vào có khoảng cách số hợp lệ cụ thể:

<input type="number" name="points" step="3">

Thử ngay