Web Forms 2.0 là phần mở rộng trong HTML4.
Các phần tử <input> trong HTML4
Các phần tử input HTML4 sử dụng kiểu thuộc tính để xác định kiểu dữ liệu. HTML4 cung cấp các kiểu sau đây:
| Kiểu | Mô tả |
| text | Trường văn bản, trống và ngắt dòng. |
| password | Trường văn bản che lại bởi các ký tự chấm đen, trống và ngắt dòng. |
| checkbox | Tập các số không hoặc nhiều giá trị từ danh sách được xác định trước. |
| radio | Giá trị liệt kê. |
| submit | Nút form khởi tạo tiến trình bắt đầu khi nhấn |
| file | Tập tin tùy ý định dạng MIME, và tùy chọn tên tập tin. |
| image | Liên quan đến kích thước hình ảnh cụ thể, với sự thêm ngữ nghĩa nó phải là giá trị cuối cùng được lựa chọn và bắt đầu trình đơn. |
| hidden | Chuỗi tùy ý không được hiển thị cho người dùng. |
| select | Giá trị được liệt kê, giống như kiểu radio. |
| textarea | Trường văn bản dạng, chưa nhiều dòng và không bị vỡ |
| button | Nút form khởi tạo tiến trình khi nhấn |
Sau đây là ví dụ đơn giản của việc sử dụng label, các nút radio, 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>
...
Các phần tử <input> trong HTML5
Ngoài các thuộc tính được đề cập ở trên, phần tử input HTML5 giới thiệu các giá trị mới sevral cho kiểu thuộc tính.
Chú ý: Hãy thử tất cả các ví dụ sau sử dụng phiên bản mới nhất của trình duyệt.
| STT | Kiểu | Mô tả |
| 1 | datetime | Ngày và thời gian (năm, tháng, ngày, giờ, phút, giây, phần của giây) được mã hóa theo chuẩn ISO 8601 với múi giờ đặt thành UTC. |
| 2 | datetime-local | Ngày và thời gian (năm, tháng, ngày, giờ, phút, giây, phần của một giây) được mã hóa theo chuẩn ISO 8601, không có thông tin múi giờ. |
| 3 | date | Ngày (năm, tháng, ngày) được mã hóa theo chuẩn ISO 8601. |
| 4 | month | Ngày bao gồm năm và tháng được mã hóa theo chuẩn ISO 8601. |
| 5 | week | Ngày bao gồm năm và số tuần được mã hóa theo chuẩn ISO 8601. |
| 6 | time | Thời gian (giờ, phút, giây, giây phân đoạn) được mã hóa theo chuẩn ISO 8601. |
| 7 | number | Chỉ chấp nhận giá trị số. Thuộc tính xác định xác thực, mặc định là 1. |
| 8 | range | Phạm vi được sử dụng cho trường đầu vào nên có giá trị từ một loạt các con số. |
| 9 | email | Chỉ chấp nhận giá trị email. Kiểu này được sử dụng cho các trường đầu vào cần có địa chỉ e-mail. Nếu bạn cố gắng gửi văn bản đơn giản, nó buộc chỉ nhập địa chỉ email ở định dạng email@example.com. |
| 10 | url | Chỉ chấp nhận giá trị URL. Kiểu này được sử dụng cho các trường đầu vào cần có địa chỉ URL. Nếu bạn cố gắng để gửi văn bản đơn giản, nó buộc chỉ nhập địa chỉ URL hoặc định dạng http://www.example.com hoặc định dạng http://example.com |
Các phần tử <output>
HTML5 giới thiệu phần tử <output>mới được sử dụng để đại diện cho kết quả của kiểu đầu ra, chẳng hạn như đầu ra bằng văn bản của script.
Bạn có thể sử dụng thuộc tính để xác định mối liên hệ giữa các phần tử output với phần tử khác trong văn bản có ảnh hưởng đến việc tính toán.
Thuộc tính placeholder
HTML5 giới thiệu thuộc tính mới gọi là placeholder. Thuộc tính này trên phần tử <input> và <textarea> cung cấp gợi ý cho người dùng có thể được input trong trường này. Các văn bản placeholder không được chứa kí tự xuống dòng hoặc line-feeds.
Đây là cú pháp đơn giản:
<input type="text" name="search" placeholder="search the web"/>
Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.
Thuộc tính tự động lấy nét(autofocus)
Đây là mẫu đơn giản, dễ dàng lập trình JavaScript tại thời điểm tải văn bản, tự động nhấn vào trường form cụ thể.
HTML5 giới thiệu thuộc tính mới gọi là tự động lấy nét(autofocus):
<input type="text" name="search" autofocus/>
Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.
Các thuộc tính cần thiết
Bây giờ bạn không cần validations của javascript cho phía client như hộp văn bản trống sẽ không bao giờ được gửi vì HTML5 giới thiệu thuộc tính mới gọi là required sẽ được sử dụng như sau và sẽ nhấn mạnh phải có giá trị:
<input type="text" name="search" required/>
Thuộc tính này được hỗ trợ bởi phiên bản mới nhất của trình duyệt Mozilla, Safari và Crome.