Một số thuộc tính của form và thẻ input trong html

bantoi

Moderator
Một số thuộc tính của form và thẻ input trong html

HTML5 Form Attributes



Link Demo


HTML5 đưa ra một số thuộc tính mới dành cho <form><input>.


Thuộc tính mới dành cho <form>:


• autocomplete
• novalidate


Thuộc tính mới dành cho <input>:


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


Thuộc tính autocomplete


Thuộc tính autocomplete là thuộc tính của form, khi bạn bật autocomplete thì trình duyệt tự động điền lại giá trị trước đó bạn đã nhập vào form của bạn.


Mách nhỏ: Ta có thể bật autocomplete=”on” cho form và tắt automcomplete = "off"cho thẻ input bên trong, hoặc ta có thể làm ngược lại.


Lưu ý: Thuộc tính autocomplete dùng được cho <form> và các loại thẻ <input> sau: text, search, url, tel, email, password, datepickers, range, and color.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox, IE9.

Ví dụ
Một form HTML dùng autocomplete (tắt autocomplete cho 1 thẻ trong đó):




PHP:
<form action="demo_form.asp" autocomplete="on">  First name:<input type="text" name="fname" autocomplete="off"><><br>  Last name: <input type="text" name="lname"><br>  E-mail: <input type="email" name="email" br>  <input type="submit"></form>

Mách nhỏ: Một vài trình duyệt cần mở chức năng autocomplete.


Thuộc tính novalidate
Thuộc tính novalidate là thuộc tính boolean, nghĩa là có hoặc không.
Thuộc tính này khiến cho form không bắt lỗi nhập liệu khi submit.


Hỗ trợ các loại trình duyệt :Opera, Chrome, Firefox.

Ví dụ
Form không bắt lỗi khi nhập sai email:




PHP:
<form action="demo_form.asp" novalidate="novalidate">  E-mail: <input type="email" name="user_email">  <input type="submit"></form>

Thuộc tính autofocus


Thuộc tính novalidate là thuộc tính boolean, nghĩa là có hoặc không.
Khi load một trang web, con trỏ tự động nằm tại thẻ <input> nào có thuộc tính autofocus.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.

Ví dụ


Tự động chuyển đến trường "Last name" khi load trang:





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

Thuộc tính form


Trước đây <input> thuộc form nào thì nằm trong form đó, giờ đây với thuộc tính form ta có nhiều cách hơn để quy định <input> là của form nào.

Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Ví dụ


Thẻ input nằm ngoài form nhưng vẫn là một phần của form:




PHP:
<form action="demo_form.asp" 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 giúp ta có thể tùy chọn file nào sẽ xử lý dữ liệu nhập vào.
Thuộc tính formaction sẽ ghi đè lên thuộc tính action của thẻ form.


Hỗ trợ các loại trình duyệt :Opera, Safari,Chrome, Firefox.


Lưu ý: Thuộc tính formaction được dùng cho 2 kiểu <input> là kiểu type="submit" và kiểu type="image".


Ví dụ
Một HTML form có 2 nút submit để gửi đi xử lý ở 2 nơi khác nhau:




PHP:
<form action="demo_form.asp">  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>

Thuộc tính formenctype


Thuộc tính formenctype giúp ta mã hóa dữ liệu "multipart/form-data" khi gửi đến server (yêu cầu method="post")
Thuộc tính formenctype sẽ ghi đè lên thuộc tính enctype của phần tử <form>.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Lưu ý: Thuộc tính formenctype được dùng cho 2 kiểu <input> là type="submit" and type="image".

Ví dụ
Gửi dữ liệu với kiểu mã hóa mặc định và kiểu mã hóa "multipart/form-data




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

Thuộc tính formmethod


Thuộc tính formmethod quy định phương thức gửi form đến phần xử lý trên sever.
Thuộc tính formmethod ghi đè lên thuộc tính Thuộc tính của phần tử form.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Lưu ý: Thuộc tính formmethod được dùng cho 2 kiểu <input> là type="submit" and type="image".

Ví dụ
Nút submit thay đồi lại phương thức get thành post:




PHP:
<form action="demo_form.asp" 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>

Thuộc tính formnovalidate


Thuộc tính novalidate có 2 giá trị là có hoặc không. Nó làm cho form không bắt lỗi dữ liệu người dùng nhập vào.
Thuộc tính formnovalidate sẽ ghi đè lên thuộc tính novalidate của <form>.


Hỗ trợ các loại trình duyệt :Opera, Chrome, Firefox.


Lưu ý: Thuộc tính formnovalidate dùng cho kiều <input> type="submit".

Ví dụ
Một form với 2 nút submit (bắt và không bắt lỗi):




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

Thuộc tính formtarget


Giống thuộc tính target của form, tùy theo giá trị của target sau khi submit dữ liệu thì sẽ mở trang mới hoặc cửa sổ mới,..
Thuộc tính formtarget ghi đè thuộc tính target của <form>.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Lưu ý: Thuộc tính formtarget được dùng cho 2 kiểu <input> là type="submit" and type="image".

Ví dụ
Một form với 2 nút submit 2 kiểu target:




PHP:
<form action="demo_form.asp">  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 height và width


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


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox, IE9.


Lưu ý: Thuộc tính height and width chỉ dùng cho thẻ <input type="image">.
Mách nhỏ: Đối với một hình ảnh, ta nên ghi rõ chiều cao và chiều rộng vì khi tải trang web sẽ dành riêng không gian cho nó và chất lượng hình ảnh không bị ảnh hưởng.

Ví dụ


Quy định chiều cao và chiều rộng cho ảnh:
PHP:
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">



Thuộc tính list


Thuộc tính list hiển thị ra một <datalist> chứa các dữ liệu mà ta định sẵn để thuận tiện cho việc nhập liệu.


Hỗ trợ các loại trình duyệt :Opera, Chrome, Firefox.

Ví dụ
Phần tử <input> sử dụng các dữ liệu định sẵn trong <datalist>:




PHP:
<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 and max


Thuộc tính min and max xác định giá trị nhỏ nhất và lớn nhất của thẻ <input>.


Hỗ trợ các loại trình duyệt :Opera, Chrome.


Lưu ý: Thuộc tính min and max dùng cho các loại <input> sau: number, range, date, datetime, datetime-local, month, time và week.

Ví dụ
Phần tử <input> với giá trị min và max:






PHP:
Nhập thời gian trước ngày 1980-01-01:<input type="date" name="bday" max="1979-12-31">
Nhập thời gian sau ngày 2000-01-01:<input type="date" name="bday" min="2000-01-02">
Số lượng (từ 1 đến 5):<input type="number" name="quantity" min="1" max="5">



Thuộc tính multiple


Thuộc tính multiple có 2 giá trị là có hoặc không.
Cho phép ta nhập nhiều hơn một giá trị vào thẻ <input>.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Lưu ý: Thuộc tính multiple được dùng cho 2 kiểu <input> là: email và file.

Ví dụ
Cho phép chọn nhiều file ảnh:




PHP:
<input type="file" name="img" multiple="multiple">



Thuộc tính pattern


Tạo ra sự ràng buộc đối với dữ liệu nhập vào.
Lưu ý: Thuộc tính pattern được dùng cho các kiểu : text, search, url, tel, email, and password.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.

Ví dụ
Trường nhập liệu chỉ tối đa 3 từ và không cho phép nhập các ký tự đặc biệt
PHP:
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="3 ký tự chữ nhé">



Thuộc tính placeholder


Thuộc tính placeholder tạo ra giá trị mẫu trên thẻ <input>, giá trị mẫu sẽ bị xóa đi nếu ta chọn đến trường của nó.


Hỗ trợ các loại trình duyệt :Opera, Safari, Chrome, Firefox.


Lưu ý: Thuộc tính placeholder dùng cho các kiểu <input> sau: text, search, url, tel, email, and password.

Ví dụ
Trường nhập liệu có chú thích giá trị mẫu:
PHP:
<input type="text" name="fname" placeholder="First name">



Thuộc tính required


Thuộc tính required có 2 giá trị có hoặc không.
Thuộc tính này quy định một trường nhập liệu bắt buộc không được rỗng .


Hỗ trợ các loại trình duyệt :Opera, Chrome, Firefox.


Lưu ý: Thuộc tính required được dùng cho các kiểu nhập liệu : text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

Ví dụ
Bắt buộc nhập:




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


Thuộc tính step


Thuộc tính step quy định bước số khi nhập vào <input>.


Hỗ trợ các loại trình duyệt :Opera, Chrome.


Ví dụ:
Nếu step="3", các số mà ta có thể nhập là -3, 0, 3, 6, ….





Mách nhỏ: Thuộc tính step có thể sử dụng kết hợp với max và min để tạo ra một khoảng giá trị các số mà các số kề bên hơn kém nhau “step” đơn vị.
Lưu ý: Thuộc tính step được dùng cho các kiểu dữ liệu: number, range, date, datetime, datetime-local, month, time and week.

Ví dụ
Tạo một trường cho nhập dữ liệu với bước số là 3:

PHP:
<input type="number" name="points" step="3">
Nguồn: Sưu tầm​
 
xây nhà trọn gói tại quảng ngãi xây nhà trọn gói quảng ngãi xây nhà trọn gói tại quảng ngãi nội thất quảng ngãi
Top