HTML5 - Biểu mẫu web 2.0
Web Forms 2.0 là phần mở rộng cho các tính năng của biểu mẫu trong HTML4. Các phần tử và thuộc tính của biểu mẫu trong HTML5 cung cấp mức độ đánh dấu ngữ nghĩa cao hơn HTML4 và giải phóng chúng ta khỏi rất nhiều kiểu tạo và tạo kịch bản tẻ nhạt vốn được yêu cầu trong HTML4.
Phần tử <input> trong HTML4
Các phần tử đầu vào HTML4 sử dụng type để chỉ định kiểu dữ liệu. HTML4 cung cấp các kiểu sau:
| Sr.No. | Loại & Mô tả |
|---|---|
| 1 | text Trường văn bản dạng tự do, trên danh nghĩa không có ngắt dòng. |
| 2 | password Trường văn bản dạng tự do cho thông tin nhạy cảm, trên danh nghĩa không có ngắt dòng. |
| 3 | checkbox Một tập hợp không hoặc nhiều giá trị từ một danh sách được xác định trước. |
| 4 | radio Một giá trị được liệt kê. |
| 5 | submit Một biểu mẫu nút miễn phí bắt đầu gửi biểu mẫu. |
| 6 | file Một tệp tùy ý với kiểu MIME và tùy chọn tên tệp. |
| 7 | image Một tọa độ, liên quan đến kích thước của một hình ảnh cụ thể, với ngữ nghĩa bổ sung rằng nó phải là giá trị cuối cùng được chọn và bắt đầu gửi biểu mẫu. |
| số 8 | hidden Một chuỗi tùy ý thường không được hiển thị cho người dùng. |
| 9 | select Một giá trị được liệt kê, giống như kiểu radio. |
| 10 | textarea Trường văn bản dạng tự do, trên danh nghĩa không có giới hạn ngắt dòng. |
| 11 | button Một dạng nút miễn phí có thể bắt đầu bất kỳ sự kiện nào liên quan đến nút. |
Sau đây là ví dụ đơn giản về việc sử dụng nhãn, nút radio và nút gửi -
...
<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, các phần tử đầu vào HTML5 đã giới thiệu một số giá trị mới cho typethuộc tính. Chúng được liệt kê dưới đây.
NOTE - Hãy thử tất cả các ví dụ sau bằng cách sử dụng phiên bản mới nhất của Opera trình duyệt.
| Sr.No. | Loại & Mô tả |
|---|---|
| 1 | ngày giờ
Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601 với múi giờ được đặt thành UTC. |
| 2 | datetime-local
Ngày và giờ (năm, tháng, ngày, giờ, phút, giây, phần nhỏ của giây) được mã hóa theo ISO 8601, không có thông tin múi giờ. |
| 3 | ngày
Một ngày (năm, tháng, ngày) được mã hóa theo ISO 8601. |
| 4 | tháng
Ngày bao gồm một năm và một tháng được mã hóa theo ISO 8601. |
| 5 | tuần
Ngày bao gồm một năm và một số tuần được mã hóa theo ISO 8601. |
| 6 | thời gian
Thời gian (giờ, phút, giây, giây phân số) được mã hóa theo ISO 8601. |
| 7 | con số
Nó chỉ chấp nhận giá trị số. Thuộc tính step chỉ định độ chính xác, mặc định là 1. |
| số 8 | phạm vi
Loại phạm vi được sử dụng cho các trường đầu vào phải chứa giá trị từ một phạm vi số. |
| 9 | e-mail
Nó chỉ chấp nhận giá trị email. Kiểu này được sử dụng cho các trường nhập phải chứa địa chỉ e-mail. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ email ở định dạng [email protected]. |
| 10 | url
Nó chỉ chấp nhận giá trị URL. Loại này được sử dụng cho các trường nhập phải chứa địa chỉ URL. Nếu bạn cố gắng gửi một văn bản đơn giản, nó buộc chỉ nhập địa chỉ URL ở định dạng http://www.example.com hoặc ở định dạng http://example.com. |
Phần tử <output>
HTML5 đã giới thiệu một phần tử mới <output> được sử dụng để biểu diễn kết quả của các loại đầu ra khác nhau, chẳng hạn như đầu ra được viết bởi một tập lệnh.
Bạn có thể dùng forđể chỉ định mối quan hệ giữa phần tử đầu ra và các phần tử khác trong tài liệu đã ảnh hưởng đến phép tính (ví dụ: dưới dạng đầu vào hoặc tham số). Giá trị của thuộc tính for là danh sách ID của các phần tử khác được phân tách bằng dấu cách.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>
<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"></output>
</form>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính giữ chỗ
HTML5 đã giới thiệu một thuộc tính mới có tên là placeholder. Thuộc tính này trên các phần tử <input> và <textareosystem cung cấp gợi ý cho người dùng về những gì có thể được nhập vào trường. Văn bản giữ chỗ không được chứa ký tự xuống dòng hoặc nguồn cấp dữ liệu dòng.
Đây là cú pháp đơn giản cho thuộc tính trình giữ chỗ -
<input type = "text" name = "search" placeholder = "search the web"/>Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "email" name = "newinput"
placeholder = "[email protected]"/>
<input type = "submit" value = "submit" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính lấy nét tự động
Đây là mẫu một bước đơn giản, được lập trình dễ dàng bằng JavaScript tại thời điểm tải tài liệu, tự động tập trung vào một trường biểu mẫu cụ thể.
HTML5 đã giới thiệu một thuộc tính mới có tên là autofocus sẽ được sử dụng như sau:
<input type = "text" name = "search" autofocus/>Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Chrome.
<!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>Thuộc tính bắt buộc
Bây giờ bạn không cần phải có JavaScript để xác thực phía máy khách như hộp văn bản trống sẽ không bao giờ được gửi vì HTML5 đã giới thiệu một thuộc tính mới được gọi là required sẽ được sử dụng như sau và sẽ đòi hỏi phải có một giá trị -
<input type = "text" name = "search" required/>Thuộc tính này chỉ được hỗ trợ bởi các phiên bản mới nhất của trình duyệt Mozilla, Safari và Chrome.
<!DOCTYPE HTML>
<html>
<body>
<form action = "/cgi-bin/html5.cgi" method = "get">
Enter email : <input type = "text" name = "newinput" required/>
<p>Try to submit using Submit button</p>
<input type = "submit" value = "submit" />
</form>
</body>
</html>Nó sẽ tạo ra kết quả sau: