Các phần tử và thuộc tính Form trong HTML5 cung cấp một mức độ đánh dấu semantic tốt hơn trong HTML4 và gỡ bỏ phần lớn sự cần thiết của công việc script và tạo kiểu tẻ nhạt được yêu cầu
Trang 1Web Forms 2.0 trong HTML5 Web Form 2.0 là sự mở rộng của các tính năng Form thành lập trong HTML4 Các phần tử
và thuộc tính Form trong HTML5 cung cấp một mức độ đánh dấu semantic tốt hơn trong HTML4 và gỡ bỏ phần lớn sự cần thiết của công việc script và tạo kiểu tẻ nhạt được yêu cầu trong HTML4
Phần tử <input> trong HTML4
Các phần tử HTML4 input sử dụng thuộc tính type để xác định kiểu dữ liệu HTML4 cung
cấp các kiểu sau:
Kiểu Miêu tả
không ràng buộc các dòng ngắt
password Một trường văn bản không ràng buộc kiểu form với thông tin nhạy
cảm, trên danh nghĩa không ràng buộc các dòng ngắt
checkbox Tập hợp của 0 và nhiều giá trị hơn từ một danh sách đã xác định
trước
nó phải là giá trị cuối được chọn và khởi tạo sự đệ trình form
Trang 2select Một giá trị liệt kê, khá giống với kiểu radio
không giới hạn các dòng ngắt
nút
Sau đây là ví dụ đơn giản của việc sử dụng các label, các nút radio, và các nút submit:
form action = "http://example.com/cgiscript.pl" method = "post" > <p>
< label for = "firstname" > first name : </ label > < input type = "text"
id = "firstname" >< br /> < label for = "lastname" > last name :
</ label > < input type = "text" id = "lastname" >< br />
< label for = "email" > email : </ label > < input type = "text" id = "email" >< br > < input type = "radio" name = "sex" value = "male" > Male <br> < input type = "radio" name = "sex" value = "female" > Female <br> < input type = "submit" value = "send" > < input type = "reset" > </ p </ form > Phần tử <input> trong HTML5
Ngoài các thuộc tính được đề cập trên, phần tử input trong HTML5 giới thiệu một số giá trị
mới cho thuộc tính type Bảng dưới liệt kê các giá trị này:
Ghi chú: Bạn thử tất cả các ví dụ sau sử dụng phiên bản trình duyệt Opera mới nhất
Kiểu Miêu tả
giây) được mã hóa theo ISO 8601 với Timezone thiết lập là UTC
datetime-local
Ngày và thời gian (năm, tháng, ngày, giờ, phút, giây, các phần của giây) được mã hóa theo ISO 8601 mà không có thông tin về
Timezone
Trang 3week Một ngày trong một năm và số tuần được mã hóa theo ISO 8601
8601
mặc định là 1
trị từ một dãy số
trường đầu vào mà nên chứa địa chỉ Email Nếu bạn cố gắng để đệ trình một văn bản đơn, nó buộc bạn chỉ nhập giá trị thư điện tử trong định dạng email@example.com
đầu vào mà nên chứa một địa chỉ URL Nếu bạn cố gắng để đệ trình một văn bản đơn, nó buộc bạn chỉ nhập địa chỉ URL trong định dạng hoặc http://www.example.com hoặc http://example.com
Phần tử <output>
HTML5 giới thiệu một phần tử mới là <output> mà được sử dụng để biểu diễn kết quả của
các kiểu đầu ra khác nhau, như đầu ra được viết bởi một script
Bạn có thể sử dụng thuộc tính for để xác định mối quan hệ giữa phần tử output và các
phần tử khác trong tài liệu mà ảnh hưởng tới phép tính (ví dụ như các đầu vào input hoặc
các tham số) Giá trị của thuộc tính for là một danh sách các ID của các phần tử khác được
phân biệt riêng rẽ
<!DOCTYPE HTML> <html> <script type = "text/javascript" > function
showResult () { x = document forms [ "myform" ][ "newinput" ] value ; document forms [ "myform" ][ "result" ] value = ; } </script> <body>
<form action = "/cgi-bin/html5.cgi" method = "get" name = "myform" > Enter a
value : <input type = "text" name = "newinput" /> <input type = "button"
value = "Result" onclick = showResult (); " /> <output name = "result" />
</form> </body> </html>
Trang 4Nó sẽ cho kết quả sau:
Thuộc tính placeholder
HTML5 giới thiệu một thuộc tính mới được gọi là placeholder Thuộc tính này trên phần tử
<input> và <textarea> cung cấp một chỉ dẫn tới người sử dụng về những gì có thể được nhập vào trong trường đó Phần văn bản placeholder phải không chứa carriage returns hoặc line-feeds
Sau đây là cú pháp đơn giản cho thuộc tính placeholder:
<input type = "text" name = "search" placeholder = "search the web" />
Thuộc tính này được hỗ trợ chỉ bởi phiên bản Mozilla, Safari và Chrome mới nhất
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get" > Enter email : <input type = "email" name = "newinput"
placeholder = "email@example.com" /> <input type = "submit" value = "submit"
/> </form> </body> </html>
Nó sẽ cho kết quả sau:
Thuộc tính autofocus
Đây là một mẫu một bước (one-step) đơn giản, dễ dàng được chương trình hóa trong JavaScript tại thời điểm tải tài liệu, tự động nhận trọng tâm một trường form cụ thể
HTML5 giới thiệu một thuộc tính mới gọi là autofocus mà sẽ được sử dụng như sau:
<input type = "text" name = "search" autofocus />
Thuộc tính này được hỗ trợ chỉ bởi phiên bản Mozilla, Safari và Chrome mới nhất
<!DOCTYPE HTML> <html> <body> <form action = "/cgi-bin/html5.cgi" method = "get" > Enter email : <input type = "text" name = "newinput"
autofocus /> <p> Try to submit using Submit button </p> <input
type = "submit" value = "submit" /> </form> </body> </html>
Nó sẽ cho kết quả sau:
Try to submit using Submit button