Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ
Trang Chủ Giới Thiệu Chương Trình Học Tài Liệu Lịch Khai Giảng Học Phí Việc Làm Lộ trình học

Go Back   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ > WEB - ĐỒ HỌA - LẬP TRÌNH > HTML5, CSS3 & JQUERY > HTML5, CSS3
Đăng Ký Thành Viên Thành Viên Lịch Ðánh Dấu Ðã Ðọc


Vui lòng gõ từ khóa liên quan đến vấn đề bạn quan tâm vào khung dưới , trước khi đặt câu hỏi mới.


Trả lời
 
Ðiều Chỉnh
  #1  
Old 20-11-2012, 12:34
web_kimhung_web web_kimhung_web vẫn chưa có mặt trong diễn đàn
Thành Viên Mới
 
Tham gia ngày: Nov 2012
Tuổi: 31
Bài gởi: 72
Thanks: 11
Thanked 57 Times in 33 Posts
Khóa học HTML5/CSS3 - Form Attributes (Những thành phần trong Form)

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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
<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 Code:
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 Code:
<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 Code:
<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 Code:
<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 Code:
<input type="number" name="points" step="3"

thay đổi nội dung bởi: web_kimhung_web, 22-11-2012 lúc 15:39
Trả Lời Với Trích Dẫn
Những người sau đây đã gửi lời cảm ơn web_kimhung_web vì bài viết hữu ích này:
Trả lời

Bookmarks

Ðiều Chỉnh

Quyền Sử Dụng Ở Diễn Ðàn
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Mở
Smilies đang Mở
[IMG] đang Mở
HTML đang Tắt

Chuyển đến

Similar Threads
Ðề tài Người Gởi Chuyên mục Trả lời Bài mới gởi
HPT Tuyển Dụng My_money Tuyển Dụng 0 05-05-2011 12:30
Từ BOOTP đến DHCP vuivemai KHO LAB NHẤT NGHỆ 0 21-08-2009 00:28



Múi giờ GMT +7. Hiện tại là 13:55
Powered by: vBulletin Version 3.8.7
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Ad Management by RedTyger