Cuộc thảo luận các biểu mẫu này tập trung vào bốn thẻ:

• <form>
• <fieldset>
• <label>
• <input>

Trong HTML5, có hai thuộc tính mới đã được thêm vào thẻ <form> (biểu mẫu): autocomplete và novalidate. Thuộc tính autocomplete cho phép các danh sách đề xuất thả xuống xuất hiện trên các trang web giống như Google. Thuộc tính novalidate tắt xác nhận hợp lệ cho một biểu mẫu, rất có ích trong quá trình thử nghiệm.

Thẻ <fieldset> (thiết lập trường) có ba thuộc tính mới là: disable (vô hiệu hóa), name (tên), và form. Thuộc tính disable làm cho thẻ <fieldset> không hoạt động. Thuộc tính name đặt tên cho thẻ <fieldset>. Giá trị thuộc tính form là mã định danh (ID) của biểu mẫu này hay các biểu mẫu thuộc về thẻ <fieldset>. Trong HTML5, một thẻ <fieldset> có thể nằm ngoài biểu mẫu này hay các biểu mẫu mà nó thuộc về. Khi một thẻ <fieldset> được đặt bên ngoài của biểu mẫu, bạn phải thiết lập thuộc tính form của thẻ <fieldset> để cho thẻ <fieldset> có thể được liên kết với biểu mẫu hoặc các biểu mẫu đúng. 

Thẻ <label> (nhãn), định nghĩa một sự phân loại cho một phần tử đầu vào, có một thuộc tính mới là: form. Giá trị thuộc tính form là ID của biểu mẫu này hay các biểu mẫu mà thẻ <label> thuộc về. Thẻ <label> cũng có thể được đặt ở bên ngoài của biểu mẫu, vì vậy ở đây thuộc tính form cũng được sử dụng để liên kết <label> với biểu mẫu thích hợp.

Thẻ <input> (đầu vào) có một số kiểu mới cũng như các thuộc tính nâng cao khả năng sử dụng của biểu mẫu. HTML5 đã giới thiệu một số các kiểu đầu vào mới được thiết kế để tổ chức và phân loại dữ liệu, sao chép toàn bộ cách tiếp cận ngữ nghĩa của HTML5. Câu châm ngôn cũ là biểu mẫu nên thực hiện theo chức năng là một cách tiếp cận thích hợp để mô tả các chức năng của các biểu mẫu HTML5.

Trong HTML5, trường <input> của biểu mẫu có thể nằm ngoài các thẻ <form>. Thuộc tính form xác định biểu mẫu này hay các biểu mẫu mà trường đầu vào thuộc về. Nó cũng xác định biểu mẫu mà nó thuộc về bằng cách đưa ra ID của biểu mẫu. Bảng 1 cho thấy các kiểu <input> mới.

Bảng 2 cho thấy các thuộc tính <input> mới.

Trong quá trình tạo trang web, bạn sử dụng hầu hết các kiểu và các thuộc tính này.

Tạo biểu mẫu

Trang web được hiển thị trong Hình 2 dùng cho Điểm âm nhạc cổ điển (Classical Music Place), một trang web có các tác phẩm của một số nhà soạn nhạc để tải về. Trang này cũng cho phép những người say mê các tác phẩm cổ điển đưa lên các bản ghi âm những bản nhạc cổ điển. Đây là trang bạn sẽ tạo ra.

Cấu tạo của biểu mẫu này bắt đầu bằng thẻ <form>. Trong ví dụ này, bạn sử dụng thuộc tính autocomplete mới, được đưa ra dưới đây:

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

Một hành động JavaScript cũng được chứa trong thẻ <form>, mà tôi sẽ thảo luận trong phần sau.

Thẻ <form> có bốn thẻ <fieldset>, được phác ra trực quan bởi các vùng màu xám trong Hình 2: Tên, điện thoại, địa chỉ Email, và ngày. Thẻ <fieldset> tạo nhóm thẻ như nội dung trong biểu mẫu. Chúng ta hãy xem xét từng thẻ <fieldset> riêng biệt.

Thẻ <fieldset> đầu tiên

Thẻ <fieldset> đầu tiên chứa thông tin khách hàng (xem Hình 3). Nó có một trường Name, một trường Telephone, một trường Email address, và một trường Date. Trường Name có thuộc tính autofocus, cho phép bạn bắt đầu nhập văn bản vào mà không cần phải nhấn vào trường này.

Thẻ <fieldset> đầu tiên chứa một thẻ <legend> (ghi chú), một thẻ <label>, và một thẻ <input>, như trong Liệt kê 1. Trường Name, là kiểu text, có ba thuộc tính <input> mới là: placeholder, autofocus, và required.

	
 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Enter your name" 
	                      autofocus required size="50">
    </label>
  </p>

Thuộc tính autofocus bảo đảm rằng trọng tâm đầu vào sẽ ở trên trường này khi trang được mở ra. Đây là một chức năng làm cho trang này tập trung vào ngay khi nó tải, cho phép người dùng truy cập ngay lập tức vào biểu mẫu đó.

Thuộc tính placeholder đặt văn bản vào giữa các dấu ngoặc kép bên trong trường này dưới dạng văn bản màu xám nhạt. Thuộc tính placeholder sẽ nói cho người dùng biết trường này phải chứa những gì và được hiển thị thế nào khi trường này rỗng. Tuy nhiên, vì các trường Name cũng có thuộc tính autofocus được thiết lập, nên khi bạn nhập vào trang này, bạn không thể thấy văn bản thực sự. Lưu ý rằng trong Hình 3, trường Name không hiển thị giữ chỗ, và nó được đóng khung trong phần đánh dấu màu vàng. Nếu bạn di chuyển đến một trường khác mà không nhập dữ liệu, thì văn bản giữ chỗ sẽ được hiển thị. Khi bạn sử dụng thuộc tính autofocus với thuộc tính placeholder, văn bản giữ chỗ sẽ biến mất do trong tâm được được đặt vào trường này.

Thuộc tính required tạo điều kiện thuận lợi cho việc đặt một trường bắt buộc như là một điều kiện tiên quyết để trình lên biểu mẫu. Điều này là hợp lệ với các trường văn bản, tìm kiếm, URL, điện thoại, email, mật khẩu, các nút chọn ngày, số, hộp kiểm tra, nút tròn, và các trường tệp.

Trường Telephone, là kiểu tel, có các thuộc tính required, placeholder, size, và pattern, như trong Liệt kê 2. Kiểu tel là một trường văn bản được thiết kế để chứa các số điện thoại. Trong ví dụ này, trường Telephone có sự hạn chế theo mẫu cần phải được tuân thủ nghiêm ngặt, vì hệ thống sẽ không cho phép bạn trình lên cho đến khi bạn sử dụng các mẫu ký tự đúng. Trường placeholder dùng cho điện thoại thiết lập mẫu dựa vào bạn dùng đầu vào nào

Trường pattern mô phỏng các chức năng của một biểu thức chính quy (regex) JavaScript truyền thống. Đầu vào phải khớp với cấu trúc mẫu của biểu thức chính quy được định nghĩa trước khi nó có thể được xác nhận hợp lệ. Trường này làm việc với các kiểu text, search, url, telephone, email, và password.

	
 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910" 
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

Trường địa chỉ Email là kiểu email, như trong Liệt kê 3. Địa chỉ email được xác nhận hợp lệ tự động mà không cần phải sử dụng một mẫu: Xác nhận hợp lệ là một phần của HTML5. Nếu không trình bày địa chỉ email này theo định dạng đúng, thì biểu mẫu không thể được trình lên.

	
  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

Mục nhập cuối cùng trong thẻ <fieldset> này là trường Date. Kiểu date cung cấp một nút chọn lịch để chọn ngày trong trình duyệt Opera nhưng tạo ra một nút quay tròn trong Google Chrome, như đã thấy trong Hình 3. Hình 4 cho thấy biểu diễn Opera của trang web này có nút chọn trường Date được hiển thị. Lưu ý rằng trong Opera, các góc thiết lập trường này không được làm tròn, mặc dù đã sử dụng cùng một bảng định kiểu để làm tròn các góc như trong Chrome.

Liệt kê 4 cho thấy đoạn mã được sử dụng để tạo nút chọn ngày.

	
    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

Bạn có thể tạo ra một bản ghi cho bất kỳ ngày nào. Bạn thậm chí có thể chia nó theo giờ. Dưới đây là các kiểu ngày giờ mà bạn có thể tạo:

• date. Chọn ngày, tháng, và năm
• month. Chọn tháng và năm
• week. Chọn tuần và năm
• time. Chọn thời gian (giờ và phút)
• datetime. Chọn thời gian, ngày, tháng, và năm (thời gian UTC)
• datetime-local. Chọn thời gian, ngày, tháng, và năm (thời gian địa phương)

Thẻ <fieldset> thứ hai

Thẻ <fieldset> thứ hai chứa một thẻ <input> có một thuộc tính list và một thẻ <datalist>. Thuộc tính list quy định một <datalist> của trường đầu vào. Thẻ <datalist> cung cấp một danh sách các tùy chọn trường đầu vào. Thuộc tính list làm việc với các kiểu <input> sau: text, search, url, telephone, email, date pickers, number, range, và color.

Thẻ <datalist> được hiển thị trong một danh sách thả xuống, như trong Hình 5. Ảnh này được lấy trong Opera. Trong Chrome, danh sách này được hiển thị như một hộp văn bản đơn giản. Người dùng sẽ không được trình bày bằng danh sách này.

Liệt kê 5 cung cấp thiết lập trường để tạo ra phần Favorite Composer (Nhà soạn nhạc yêu thích).

	
<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

Thẻ <fieldset> thứ ba

Thẻ <fieldset> thứ ba hiển thị một danh sách các nhà soạn nhạc, theo sau là một trường số chỉ rõ có bao nhiêu tác phẩm có sẵn với mỗi nhà soạn nhạc được liệt kê. Hình 6 cho thấy phần này.

Ví dụ, Bạch có năm tác phẩm, và Beethoven có 10 tác phẩm. Liệt kê 6 cho thấy các giá trị tối đa cho mỗi nhà soạn nhạc. Trường số sẽ không chấp nhận nhiều hơn giá trị tối đa khi bạn trình lên biểu mẫu này. Khi được trình lên, trường này đáp ứng với các giá trị ngoài dải, không đúng bằng cách nhắc bạn sửa lại đầu vào cho nó phù hợp với các giới hạn số chấp nhận được của trường này.

Kiểu number tạo ra một trường nút quay tròn cho đầu vào. Sử dụng thuộc tính min, max, và step được sử dụng với kiểu số number. Giá trị bước mặc định là 1. Các thuộc tính min, max, và step được sử dụng với các ràng buộc số, phạm vi, hoặc đầu vào nút chọn ngày. Thuộc tính max xác định giá trị tối đa cho phép đối với trường đầu vào. Thuộc tính min xác định giá trị tối thiểu cho phép đối với trường đầu vào. Thuộc tính step xác định bước tăng hợp lệ.

	   
<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

Thẻ <fieldset> thứ tư

Thẻ <fieldset> thứ tư chứa kiểu <input> file và thuộc tính multiple, như trong Hình 7. Thuộc tính multiple quy định rằng một trường đầu vào có thể chọn nhiều giá trị từ một danh sách dữ liệu hoặc danh sách tệp. Trong ví dụ này, một người dùng có thể chọn nhiều tệp để tải lên.

Mã cho kiểu tệp và thuộc tính multiple được hiển thị trong Liệt kê 7.

	
 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Upload one of your orchestra's file(s) for inclusion in our library</p>
    <p><label> 
      <input type="file" multiple="multiple" /> 
    </label>
  </p>
 </fieldset>

Nút Submit (Trình lên) sử dụng các thuộc tính height (chiều cao) và width (chiều rộng), như trong Liệt kê 8. Bạn sử dụng các thuộc tính này để thiết lập chiều cao và chiều rộng của kiểu đầu vào image. Khi bạn thiết lập các thuộc tính này, vùng không gian của trang web dành cho hình ảnh không bị thay đổi do bị các ràng buộc về các kích thước chiều rộng và chiều cao đặt sẵn, để làm cho việc nạp trang dễ dàng nhằm nâng cao hiệu quả hiển thị trang.

	
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript và CSS3

Không thể thực hiện biểu diễn HTML5 mà không có CSS3. Và, mặc dù HTML5 đã phủ nhận sự cần thiết đối với một số mã JavaScript, thì JavaScript vẫn là một công cụ có giá trị. Sau đây là các tệp mã JavaScript và CSS3 được sử dụng để tạo các biểu mẫu ví dụ.

Mã JavaScript là một hộp cảnh báo đơn giản trả về ba trường cần thiết, như trong Liệt kê 9. Mặc dù đoạn mã JavaScript được sử dụng ở đây chỉ có một dòng, những nó đã được đặt trong một tệp JavaScript riêng biệt, sau đây là các thực hành tốt nhất để sử dụng nó.

	
function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

Liệt kê 10 cho thấy mã CSS3 định dạng biểu mẫu ví dụ. Thông tin <header> và <footer> không có ở đây.

	
form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

Kết luận

Chìa khóa cho thành công rõ ràng cho cá nhân và tổ chức là truyền thông. Các nút điều khiển của biểu mẫu và các hướng dẫn dựng trang nói chung là quan trọng cho quá trình này, và HTML5 đã cung cấp nhiều công cụ mạnh mẽ khác thường thích hợp cho nhiệm vụ này. Những người được chuẩn bị cho tương lai — ngay lúc này — sẽ được hưởng lợi; còn những người không được chuẩn bị sẽ phải chịu rủi ro nghiêm trọng bởi tốc độ phát triển và các yêu cầu của xã hội toàn cầu, trung tâm mạng, một thế giới-web.