HTML5 - Web Forms 2.0

Web Forms 2.0是HTML4中表單功能的擴展。與HTML4相比，HTML5中的表單元素和屬性提供了更大程度的語義標記，並使我們擺脫了HTML4中所需的大量繁瑣的腳本編寫和樣式設置。

The <input> element in HTML4

HTML4輸入元素使用type屬性指定數據類型。HTML4提供以下類型−

Sr.No.	Type & Description
1	文本一個自由格式的文本欄位，名義上沒有換行符。
2	密碼用于敏感信息的自由格式文本欄位，名義上沒有換行符。
3	複選框預定義列表中的一組零或多個值。
4	收音機枚舉值。
5	提交按鈕的自由形式啓動表單提交。
6	文件具有MIME類型和可選文件名的任意文件。
7	圖像一種坐標，相對於特定圖像的大小，具有額外的語義，即它必須是選定的最後一個值並啓動表單提交。
8	隱藏的通常不向用戶顯示的任意字符串。
9	選擇枚舉值，非常類似於radio類型。
10	文本區域一個自由格式的文本欄位，名義上沒有換行限制。
11	按鈕按鈕的一種自由形式，它可以啓動與按鈕有關的任何事件。

下面是使用標籤、單選按鈕和提交按鈕的簡單示例−

... 
<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> 
 ...

The <input> element in HTML5

除了上述屬性之外，HTML5輸入元素還爲type屬性引入了幾個新值。下面列出了這些。

注意−使用最新版本的Opera瀏覽器嘗試以下所有示例。

Sr.No.	Type & Description
1	datetime 根據ISO 8601編碼的日期和時間（年、月、日、時、分、秒、小數），時區設置爲UTC。
2	datetime-local 根據ISO8601編碼的日期和時間（年、月、日、時、分、秒、秒的分數），沒有時區信息。
3	date 根據ISO 8601編碼的日期（年、月、日）。
4	month 根據ISO 8601編碼的一年和一個月的日期。
5	week 根據ISO 8601編碼的一年和一周的日期。
6	time 根據ISO 8601編碼的時間（小時、分鐘、秒、小數秒）。
7	number 它只接受數值。step屬性指定精度，默認爲1。
8	range 範圍類型用於應包含數字範圍中的值的輸入欄位。
9	email 它只接受電子郵件值。此類型用於應包含電子郵件地址的輸入欄位。如果您試圖提交一個簡單的文本，它將強制只以email@example.com格式輸入電子郵件地址。
10	url 它只接受URL值。此類型用於應包含URL地址的輸入欄位。如果您試圖提交一個簡單的文本，它將強制只輸入http://www.example.com格式或http://example.com格式的URL地址。

The <output> element

HTML5引入了一個新元素<output>，用於表示不同類型輸出的結果，例如由腳本編寫的輸出。

可以使用for屬性指定輸出元素與文檔中影響計算的其他元素（例如，作爲輸入或參數）之間的關係。for屬性的值是用空格分隔的其他元素的id列表。

Live Demo

<!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>

它將產生以下結果&負;

The placeholder attribute

HTML5引入了一個名爲placeholder的新屬性。<input>和<textarea>元素上的此屬性向用戶提示可以在欄位中輸入的內容。占位符文本不能包含回車或換行符。

以下是占位符屬性的簡單語法−

<input type = "text" name = "search" placeholder = "search the web"/>

此屬性僅受最新版本的Mozilla、Safari和Crome瀏覽器支持。

Live Demo

<!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>

這將產生以下結果&負;

The autofocus attribute

這是一個簡單的單步模式，在加載文檔時很容易用JavaScript編程，可以自動聚焦一個特定的表單欄位。

HTML5引入了一個名爲autofocus的新屬性，該屬性的用法如下−

<input type = "text" name = "search" autofocus/>

此屬性僅受最新版本的Mozilla、Safari和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>

The required attribute

現在，您不需要讓JavaScript進行客戶端驗證，比如空文本框將永遠不會被提交，因爲HTML5引入了一個名爲required的新屬性，該屬性將按如下方式使用，並將堅持使用一個值−

<input type = "text" name = "search" required/>

此屬性僅受最新版本的Mozilla、Safari和Chrome瀏覽器支持。

Live Demo

<!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>

它將產生以下結果&負;