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">
Trích nguồn từ: (https://www.w3schools.com/html/html_form_attributes.asp)
