HTML5 & CSS3 – Các phần tử trong form

HTML5 & CSS3 – Các phần tử trong form

HTML5 đưa ra một số thuộc tính mới dành cho <form> và <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 đó):

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

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

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

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

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

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

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

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

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

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

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

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:

<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

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

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

<input type="number" name="points" step="3"> 
Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Cài đặt lại GRUB vào Master Boot Record

Cài đặt lại GRUB vào Master Boot Record

Đã có các hệ điều hành Windows XP/Vista và muốn cài đặt thêm Ubuntu; Cài Ubuntu trước hoặc giữa các hệ điều hành

Chức năng và cách hoạt động của ví điện tử

Chức năng và cách hoạt động của ví điện tử

Hiên nay, khi lướt net các bạn thấy cụm tù "Ví điện tử" xuất hiện nhiều trên mạng đặc biệt là các trang mua bán hàng trực tuyến, vậy "Ví điện tử" là gì ?

10 món quà công nghệ xa xỉ trong dịp Noel

10 món quà công nghệ xa xỉ trong dịp Noel

Nếu bạn là người có điều kiện và muốn mua một món quà công nghệ phong cách và ấn tượng cho bạn bè, người thân hay cấp trên, những sản phẩm sau đây sẽ làm bạn hài lòng.

Công ty diệt chuột T&C

 

Diet con trung