Các thuộc tính input

Thuộc tính value

 

Thuộc tính value chỉ ra giá trị ban đầu cho một trường nhập

Ví dụ

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form> 

 

Thuộc tính readonly

Thuộc tính readonly chỉ ra trường nhập này chỉ có thể đọc (không thể thay đổi)

Ví dụ

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form> 

 

Thuộc tính disabled

Thuộc tính disabled chỉ ra trường nhập bị vô hiệu hóa

Một trường nhập bị vô hiệu hóa không thể nhấp vào hoặc sử dụng, và giá trị của nó sẽ không được gửi đi khi submit (gửi).

Ví dụ

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form> 

 

Thuộc tính size

Thuộc tính size chỉ ra kích thước (tính bằng ký tự) cho trường nhập:

Ví dụ

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form> 

 

Thuộc tính maxlength

Thuộc tính maxlength chỉ ra độ dài tối đa cho phép của trường nhập

Ví dụ

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form> 

 

Với thuộc tính maxlength, trường nhập sẽ không chấp nhận nhiều hơn số ký tự được cho phép .

Thuộc tính maxlength không cung cấp bất kỳ thông báo nào. Nếu muốn cảnh báo người dùng,bạn phải sử dụng Javascript.

 

Các thuộc tính HTML5

HTML5 thêm mới các thuộc tính sau cho <input>:

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

Và các thuộc tính sau cho <form>:

  • autocomplete
  • novalidate

 

Thuộc tính autocomplete

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

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

Tip: Có thể đặt autocomplete cho cả form là “on”, đặt là “off” cho các thẻ input nhất định.

Thuộc tính autocomplete hoạt động trên <form> và các kiểu <input> sau: text, search, url, tel, email, password, datepickers, range, và color.

Ví dụ

Một form HTML có autocomplete “on” (và một thẻ input có autocomplete “off”)

<form action="/action_page.php" autocomplete="on">
  First name:<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> 

 

Thuộc tính novalidate

Thuộc tính novalidate là một thuộc tính của <form>. Nó chỉ ra dữ liệu form không được xác thực (trực tiếp bằng trình duyệt) khi gửi đi.

Ví dụ

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

 

Thuộc tính autofocus

Thuộc tính autofocus chỉ ra trường nhập nên được tự động chọn khi tải trang.

Ví dụ

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

 

 

Thuộc tính form

Thuộc tính form chỉ ra một thẻ input thuộc nhiều form khác nhau.

Để tham chiếu đến nhiều form, dùng dấu cách để phân tách danh sách các id

Giá trị của thuộc tính form tham chiếu đến id của form.

Ví dụ

Một thẻ input được đặt ngoài form nhưng vẫn là một phần của form

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

 

Thuộc tính formaction

Thuộc tính formaction chỉ ra đường dẫn của một file sẽ xử lý thông tin khi form được gửi đi.

Thuộc tính formaction sẽ ghi đè lên thuộc tính action của phần tử <form>

Ví dụ

<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="/action_page2.php"
  value="Submit as admin">
</form> 

 

Thuộc tính formenctype

Thuộc tính formenctype chỉ ra cách dữ liệu form được mã hóa khi được gửi (chỉ hoạt động với form dùng phương thức POST).

Thuộc tính formenctype ghi đè lên thuộc tính enctype của phần tử <form>.

Thuộc tính formenctype được sử dụng với type=”submit” và type=”image”.

Ví dụ

Gửi dữ liệu form với kiểu mã hóa mặc định bằng nút submit đầu tiên, và mã hóa “multipart/form-data” bằng nút thứ 2.

<form action="/action_page_binary.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> 

 

Thuộc tính formmethod

Thuộc tính formmethod chỉ ra phương thức HTTP được dùng để gửi dữ liệu tới đường dẫn trong thuộc tính action.

Thuộc tính formmethod ghi đè lên thuộc tính method của phần tử <form>.

Thuộc tính formmethod được sử dụng với input có type=”submit” và type=”image”.

 

Ví dụ

Nút submit thứ 2 ghi đè lên phương thức HTTP của form.

<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" value="Submit using POST">
</form> 

 

Thuộc tính formnovalidate

Thuộc tính formnovalidate ghi đè lên thuộc tính novalidate của phần tử <form>

Thuộc tính formnovalidate được dùng với type=”submit”.

 

Ví dụ

Một form có 2 nút submit để xác thực và không xác thực (bằng trình duyệt).

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

 

Thuộc tính formtarget

Thuộc tính formtarget chỉ ra nơi để hiện thị kết quả khi gửi form

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

Thuộc tính formtarget được dùng với type=”submit” và type=”image”.

Ví dụ

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

 

Thuộc tính width và height

Thuộc tính width và height chỉ ra chiều rộng và chiều cao của một phần tử <input type=”image”>

Note: Luôn chỉ ra kích thước của ảnh, nếu trình duyệt không biết kích thước, trang sẽ nhấp nháy khi tải hình.

Ví dụ

Thêm một hình làm nút gửi, với thuộc tính width và height  

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

 

Thuộc tính list

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

Ví dụ

<input list="browsers">

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

 

Thuộc tính min và max

Thuộc tính min và max chỉ ra giá trị tối thiểu và tối đa cho một phần tử <input>

Thuộc tính min và max hoạt động trên các kiểu input sau: number, range, date, datetime-local, month, time, và week.

 

Ví dụ

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

 

Thuộc tính multiple

Thuộc tính multiple chỉ ra người dùng được phép nhập nhiều hơn một giá trị vào phần tử <input>

Thuộc tính multiple hoạt động với các kiểu input: email và file.

Ví dụ

Select images: <input type="file" name="img" multiple>

 

Thuộc tính patten

Thuộc tính patten chỉ ra biểu thước chính quy để kiểm tra giá trị của phần tử <input>

Thuộc tính patten hoạt động trên các kiểu input sau: text, search, url, tel, email, và password.

Tip: Thêm thuộc tính title để mô tả mẫu cho người dùng

 

Ví dụ trường nhập chỉ chứa 3 chữ cái (không có số và ký tự đặc biệt)

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

 

Thuộc tính placeholder 

Thuộc tính placeholder chỉ ra gợi ý để mô tả giá trị mong muốn của trường nhập (một ví dụ hoặc một mô tả ngắn về định dạng).

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

Thuộc tính placeholder hoạt động với các kiểu input: text, search, url, tel, email, và password.

Ví dụ

<input type="text" name="fname" placeholder="First name"> 

 

Thuộc tính required

Thuộc tính required chỉ ra thẻ input này không được bỏ trống trước khi gửi form.

Thuộc tính required hoạt động với các kiểu input: text, search, url, tel, email, password.

Ví dụ

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

 

Thuộc tính step

Thuộc tính step chỉ ra khoảng cách giữa các số của một phần tử <input>

Ví dụ nếu step=”5”, thì các số hợp lệ sẽ là 5,10,15,20 v.v

Thuộc tính step có thể kết hợp với thuộc tính min và max để tạo ra khoảng số hợp lệ.

Thuộc tính step hoạt động với các kiểu input sau: number, range, date, datetime-local, month, time and week.

Ví dụ

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

 

Chú ý: Tất cả các bài viết trên TEDU.COM.VN đều thuộc bản quyền TEDU, yêu cầu dẫn nguồn khi trích lại trên website khác.

Lên trên