HTML5 - Web 表單 2.0

上一頁
下一頁

Web 表單 2.0 是 HTML4 中表單功能的擴充套件。HTML5 中的表單元素和屬性提供了比 HTML4 更高級別的語義標記，使我們免於在 HTML4 中需要的大量繁瑣的指令碼編寫和樣式設計。

HTML4 中的<input> 元素

HTML4 input 元素使用type 屬性來指定資料型別。HTML4 提供以下型別 -

序號 型別和描述
1

text

一個自由格式的文字欄位，通常不包含換行符。
2

password

一個用於敏感資訊的自由格式文字欄位，通常不包含換行符。
3

checkbox

從預定義列表中選擇零個或多個值。
4

radio

一個列舉值。
5

submit

一個自由格式的按鈕，用於初始化表單提交。
6

file

一個任意檔案，帶有 MIME 型別和可選的檔名。
7

image

相對於特定影像大小的座標，具有額外的語義，即它必須是最後一個選定的值並初始化表單提交。
8

hidden

一個任意字串，通常不顯示給使用者。
9

select

一個列舉值，類似於 radio 型別。
10

textarea

一個自由格式的文字欄位，通常沒有換行限制。
11

button

一個自由格式的按鈕，可以初始化與按鈕相關的任何事件。

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

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

HTML5 中的<input> 元素

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

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

序號 型別和描述
1 datetime

一個日期和時間（年、月、日、時、分、秒、秒的小數部分），根據 ISO 8601 編碼，時區設定為 UTC。
2 datetime-local

一個日期和時間（年、月、日、時、分、秒、秒的小數部分），根據 ISO 8601 編碼，沒有時區資訊。
3 date

一個日期（年、月、日），根據 ISO 8601 編碼。
4 month

一個由年份和月份組成的日期，根據 ISO 8601 編碼。
5 week

一個由年份和星期陣列成的日期，根據 ISO 8601 編碼。
6 time

一個時間（時、分、秒、秒的小數部分），根據 ISO 8601 編碼。
7 number

它只接受數值。step 屬性指定精度，預設為 1。
8 range

range 型別用於輸入欄位，這些欄位應包含一個來自數字範圍的值。
9 email

它只接受電子郵件值。此型別用於應包含電子郵件地址的輸入欄位。如果您嘗試提交純文字，它會強制您以 email@example.com 格式輸入電子郵件地址。
10 url

它只接受 URL 值。此型別用於應包含 URL 地址的輸入欄位。如果您嘗試提交純文字，它會強制您以 http://www.example.com 格式或 http://example.com 格式輸入 URL 地址。

<output> 元素

HTML5 引入了一個新元素<output>，用於表示不同型別輸出的結果，例如指令碼編寫的輸出。

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

即時演示 
<!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>

它將產生以下結果 -

placeholder 屬性

HTML5 引入了一個名為placeholder的新屬性。此屬性在<input> 和<textarea> 元素上為使用者提供了有關可以在欄位中輸入什麼的提示。佔位符文字不得包含回車符或換行符。

以下是 placeholder 屬性的簡單語法 -

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

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

即時演示 
<!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>

這將產生以下結果 -

autofocus 屬性

這是一個簡單的單步模式，可以在文件載入時使用 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>

required 屬性

現在您不再需要 JavaScript 進行客戶端驗證，例如空文字框永遠不會提交，因為 HTML5 引入了一個名為required的新屬性，使用方法如下，並且會堅持要求有一個值 -

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

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

它將產生以下結果 -

列印頁面
上一頁
下一頁
廣告