1. Phần tử input
| Kiểu | Miêu tả |
| datetime | 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 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. |
| date | Ngày và thời gian (năm, tháng, ngày) được mã hóa theo ISO 8601 |
| month | Một ngày trong một năm và tháng được mã hóa theo ISO 8601 |
| week | Một ngày trong một năm và số tuần được mã hóa theo ISO 8601 |
| time | Thời gian (giờ, phút, giây, các phần giây) được mã hóa theo ISO 8601 |
| number | Chỉ chấp nhận các giá trị số. Thuộc tính step xác định độ chính xác, mặc định là 1 |
| range | Kiểu range được sử dụng cho các trường input mà nên chứa một giá trị từ một dãy số. |
| Chỉ chấp nhận giá trị là thư điện tử. Kiểu này được sử dụng cho các 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 | |
| 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 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 |
2. 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=x;
}
</script>
<body>
<form action="/result.php" 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>
3. 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.
<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>
4. 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/>
<!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>
5. Thuộc tính required
Bây giờ bạn không cần có JavaScript cho các xác nhận Client-Side như hộp văn bản trống sẽ không bao giờ được đệ trình bởi vì HTML5 giới thiệu một thuộc tính mới gọi là required mà sẽ được sử dụng như sau và sẽ nhấn mạnh để có một giá trị:
<input type="text" name="search" required/>
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" required/>
<p>Try to submit using Submit button</p>
<input type="submit" value="submit" />
</form>
</body>
</html>