HTML5 表單元素

TML5 新的表單元素

HTML5 有以下新的表單元素:

<datalist>
<keygen>
<output>

注意:不是所有的瀏覽器都支持HTML5 新的表單元素，但是你可以在使用它們，即使瀏覽器不支持表單屬性，仍然可以顯示為常規的表單元素。

HTML5 <datalist> 元素

<datalist> 元素規定輸入域的選項列表。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

實例

<input> 元素使用<datalist>預定義值:

<inputlist="browsers"><datalistid="browsers"><optionvalue="Internet Explorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"></datalist>

HTML5 <keygen> 元素

<keygen> 元素的作用是提供一種驗證用戶的可靠方法。

<keygen>標簽規定用于表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲于客戶端，公鑰（public key）則被發送到服務器。公鑰可用于之后驗證用戶的客戶端證書（client certificate）。

實例

帶有keygen字段的表單:

<formaction="demo_keygen.asp"method="get">用戶名: <inputtype="text"name="usr_name">加密: <keygenname="security"><inputtype="submit"></form>

嘗試一下 ?

HTML5 <output> 元素

<output> 元素用于不同類型的輸出，比如計算或腳本輸出：

實例

將計算結果顯示在 <output> 元素:

<formoninput="x.value=parseInt(a.value)+parseInt(b.value)">0<inputtype="range"id="a"value="50">100 +<inputtype="number"id="b"value="50">=<outputname="x"for="a b"></output></form>

HTML5 新表單元素

標簽	描述
<datalist>	<input>標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>	><keygen> 標簽規定用于表單的密鑰對生成器字段。
<output>	<output> 標簽定義不同類型的輸出，比如腳本的輸出。

如您還有不明白的可以在下面與我留言或是與我探討QQ群{{308855039，我們一起飛！

html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能，接下來我們來說1下自動驗證。

在html5中，通過對元素使用屬性的方法，可以實現在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內容是不是為數字，如果驗證通不過，將顯示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下來我們來看1下在html5 中追加的關于對元素內輸入內容進行限制的屬性的指定。

1.required屬性

html5 中新增的required屬性可以利用在大多數輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內容，效果如圖

2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設置為某個格式的正則表達式，在提交時會檢查其內容是不是符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內容必須符合給定格式，代碼以下，要求輸入內容為1個數字與3個大寫字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入指定內容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數字3個大寫字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min屬性與max屬性

min與max這兩個屬性是日期類型或數值類型的input元素的專用屬性，他們限制了在input元素中輸入的數值與日期的范圍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入數值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step屬性

step屬性控制input元素中的值增加過減少時的步驟。例如當你想讓用戶輸入的值在0與100之間，但必須是5的倍數時，你可以指定step為5，代碼以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

用過Delphi的程序員，對Form這個詞應該比較熟悉。在Delphi中，Form被翻譯為“窗體、窗口”，作用是：為用戶提供界面，供用戶輸入信息，向用戶展示處理結果。

HTML5中也有Form，功能與Delphi中的Form差不多，用于接收用戶輸入，和服務器進行交互。不過HTML5中的Form，中文一般譯為“表單”。

1、Web前端與Web后端的交互

Web前端，指瀏覽器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript腳本。

Web后端，指運行在服務器上的，為Web前端提供服務的軟件，Web后端也常常被稱為Web服務器。

在HTML5中，Web前端與Web后端交互的流程一般如下：

（1）Web前端向Web后端發起HTTP請求；

（2）Web后端收到HTTP請求后，進行業務處理；

（3）Web后端向Web前端返回HTTP響應。

到目前為止，我們在HTML5中碰到的Web前端發起HTTP請求的方式有兩種：

第1種：HTML頁面通過<a>元素向用戶提供超級鏈接，用戶點擊該鏈接時，會向服務器發起請求；

第2種：HTML頁面通過表單為用戶提供輸入界面，用戶提交表單時，會向服務器發起請求。

2、GET請求和POST請求

HTTP請求有八種，對Web前端開發者來說，最常用的是GET請求和POST請求。

GET請求：向Web后端請求指定的頁面；GET請求攜帶的數據，以URL參數的形式提供；

POST請求：向Web后端提交數據，請求Web后端對數據進行處理；POST請求攜帶的數據，在請求消息體中提供。

在HTML5中，用戶點擊鏈接地址，Web前端向后端發起GET請求；

在HTML5中，用戶提交表單，Web前端可以向后端發起GET請求，也可以發起POST請求。

說明：由于目前沒有和后端服務器對接，為了便于對表單設計進行展示，下面的例子HTML文檔，都是用GET請求來提交數據。

3、表單的主要元素

<form>元素：表示表單；

<input>元素：表單中的輸入控件，輸入控件可以是文本框、單選框、復選框、按鈕等等；

<label>元素：表單中的標簽控件；

<button>元素：表單中的按鈕控件；

<select>與<option>元素：用于實現列表框和下拉菜單；

<textarea>元素：多行文本控件。

4、表單提交文本框的輸入

下面是一個可以提交文本框輸入的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請輸入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，展示效果如下：

我們可以在文本框中輸入信息，例如輸入tom：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下；

可以看到，數據被提交給process.html頁面，并且附帶了一個參數name，且值為我們輸入的tom。

5、表單提交用戶對單選框的選擇

下面是一個可以提交單選框被選信息的HTML文檔：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性別：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>國籍：</label>
<br/>
中國：<input type="radio" name="nationality" value="Chinese" /> <br/>
美國：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英國：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇性別和國籍，例如我們選擇“男”和“中國”：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了gender參數的值為male，nationality參數的值為Chinese。

6、表單提交用戶對復選框的選擇

下面是一個可以提交復選框被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的業余愛好：</label>
<br/>
美術：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
廚藝：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以選擇自己的業余愛好，例如我們選擇足球、唱歌、廚藝：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了三個hobby參數，其值分別為Football，Singing和Cook。

7、表單提交用戶對下拉菜單的選擇

下面是一個可以提交下拉菜單被選信息的HTML文檔；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>請選擇您的學歷：</label>
<br/>
<select name="education">
<option value="primary_school">小學</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大學</option>
</select>
<br/><br/>
<label>請選擇您的興趣愛好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美術</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">廚藝</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在瀏覽器中打開該HTML文檔時，顯示效果如下：

我們可以單選我們的學歷，也可以通過按下Shift+鼠標鍵多選我們的興趣。例如我們選擇“初中”學歷，選擇“美術”和“廚藝”兩項愛好：

當我們點擊“提交”按鈕后，瀏覽器顯示信息如下：

可以看到，我們選擇的信息被提交給process.html文件，并且附帶了education參數和兩個hobby參數，education的值為junior_high_school，hobby的值為Art和Cook。

上面列舉了幾種控件的HTML5表單設計方法，其它的控件也大概差不多，把多個控件組合在同一個<form>元素中的方法也是相同的，這里就不再贅述了。

在線咨詢

上一篇：手把手教你前端的各種文件上傳攻略和大文件斷點續傳
下一篇：綁架什么的太低級太沒技術含量你聽說過自己純手工打造的鋼琴嗎