詳細(xì)介紹創(chuàng)建 HTML 表單中常用的幾個(gè)表單標(biāo)簽

lt;form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。

表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用于向服務(wù)器傳輸數(shù)據(jù)。

下面小編為大家介紹幾個(gè)常用的表單標(biāo)簽。

<datalist>標(biāo)簽

這個(gè)標(biāo)簽規(guī)定了 <input> 元素可能的選項(xiàng)列表。

一般會(huì)被用來(lái)在為<input> 元素提供"自動(dòng)完成"的特性。用戶能看到一個(gè)下拉列表，里邊的選項(xiàng)是預(yù)先定義好的，將作為用戶的輸入數(shù)據(jù)。

我們來(lái)演示一個(gè)案例，大家就知道怎么用了：

上面這個(gè)小代碼，我們看得出，input標(biāo)簽的list屬性值和datalist標(biāo)簽的id是一樣的，沒(méi)錯(cuò)，它們就是這樣來(lái)相互關(guān)聯(lián)起來(lái)的。當(dāng)它們結(jié)合起來(lái)之后，不僅可以像select標(biāo)簽一樣可以通過(guò)下拉來(lái)選擇已有的選項(xiàng)，還可以根據(jù)用戶輸入的字符，對(duì)選項(xiàng)進(jìn)行匹配篩選。

效果圖如下：

有了datalist標(biāo)簽，我們實(shí)現(xiàn)這種效果起來(lái)十分簡(jiǎn)單，不需要任何的JavaScript代碼也能輕松實(shí)現(xiàn)。

<output>標(biāo)簽：

標(biāo)簽定義不同類型的輸出。比如腳本的輸出、一些加減乘除的運(yùn)算結(jié)果，我們都可以使用這個(gè)標(biāo)簽。

我們來(lái)舉個(gè)例子：輸入的數(shù)字乘以2后得到的結(jié)果，我們用output輸出顯示。

我們用oninput屬性監(jiān)聽(tīng)著表單的變化，并把得到的結(jié)果賦值到output標(biāo)簽的value。我們來(lái)看看效果圖：

其中，output標(biāo)簽是可以離開(kāi)form表單標(biāo)簽的，但是，如果你這樣做的話，必須給output標(biāo)簽添加form屬性，其屬性值是與其相關(guān)聯(lián)form表單的id。

我們來(lái)將output移到form表單的外面試試：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代碼有幾處不同之處，form標(biāo)簽多了一個(gè)id，值為“demo”，output標(biāo)簽被移到了form標(biāo)簽外面，不再是form標(biāo)簽的子節(jié)點(diǎn)，變成了兄弟節(jié)點(diǎn)（當(dāng)然你可以把它移到文檔的其他位置）。output標(biāo)簽還多了一個(gè)form屬性，此時(shí)，它的值正好是form標(biāo)簽的id值：“demo”。這種寫(xiě)法，代碼同樣是奏效的。

<keygen>標(biāo)簽

這個(gè)標(biāo)簽相信大家很少用到，但是也是為了學(xué)習(xí)，我們來(lái)了解一下就好。

這個(gè)標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段。當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器，這種機(jī)制是專為使用基于Web的證書(shū)管理系統(tǒng)。

我在MDN（Mozilla Developer Network）的網(wǎng)站上看到了關(guān)于它的一些介紹：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大瀏覽器廠商還在討論是否要保留它，在討論結(jié)束之前，你最好還是別用它。

而另一段話則是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：雖然有些瀏覽器還支持它，但是這個(gè)特性已經(jīng)被移除出web標(biāo)準(zhǔn)了，以后別使用它了。

.HTML中表單元素的基本概念

HTML表單是HTML元素中較為復(fù)雜的部分,表單往往和腳本,動(dòng)態(tài)頁(yè)面,數(shù)據(jù)處理等功能相結(jié)合,因此是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容.

表單一般用來(lái)收集用戶的輸入信息

2.表單工作原理

訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí),可填寫(xiě)必需的信息,然后按某個(gè)按鈕提交,這些信息通過(guò)網(wǎng)絡(luò)傳送到服務(wù)器上.服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理,如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息,并要求糾正錯(cuò)誤.當(dāng)數(shù)據(jù)完整無(wú)誤后,服務(wù)器反饋一個(gè)輸入完成的信息

3.表單的功能

功能:表單用于向服務(wù)器傳輸數(shù)據(jù),從而實(shí)現(xiàn)用戶與WEB服務(wù)器的交互表單能夠包含input系統(tǒng)標(biāo)簽,比如文本字段,復(fù)選框,單選框,提交按鈕等表單還可以包含textarea,select,fieldset,label標(biāo)簽.

4.表單的常用類型及說(shuō)明

1.表單常用的類型有:

2.表單屬性：

3.文本輸入框(text)：

當(dāng)用戶要在表單中輸入字母,數(shù)字內(nèi)容時(shí),就會(huì)用到文本域

代碼如下:

注意,表單本身并不可見(jiàn).同時(shí),在大多瀏覽器中,文本域的缺省寬度是20個(gè)字符.

在密碼域中輸入的字符,瀏覽器將使用項(xiàng)目符號(hào)來(lái)代替這些字符.

4.單選按鈕(radio)：

當(dāng)用戶從若干給定的選擇中選取一個(gè)選項(xiàng)時(shí),就會(huì)用到單選框.

代碼如下:

用戶只能從眾多選擇中選取一個(gè)選項(xiàng).

當(dāng)用戶點(diǎn)擊一個(gè)單選按鈕時(shí),該按鈕會(huì)變?yōu)檫x中狀態(tài),其他所有按鈕會(huì)變?yōu)榉沁x中狀態(tài).

5.復(fù)選框(checkboxes)

當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或多個(gè)選項(xiàng)時(shí),就會(huì)用到復(fù)選框

代碼如下:

用戶一次可以選擇多個(gè)選項(xiàng).

6.重置按鈕(reset)

重置按鈕會(huì)清除當(dāng)前頁(yè)面上的用戶輸入的所有數(shù)據(jù),把當(dāng)前頁(yè)面恢復(fù)到打開(kāi)時(shí)的樣子.

代碼如下:

<form><p><input type="reset"></p></form>

7.提交按鈕

會(huì)在當(dāng)前頁(yè)面生成一個(gè)提交按鈕,用戶點(diǎn)擊此按鈕,瀏覽器就會(huì)把當(dāng)前頁(yè)面用戶輸入的數(shù)據(jù)傳送到服務(wù)端

代碼如下:

<form><p><input type="button" value="按鈕"/></p></form>

8.提交文件

當(dāng)需要把客戶端的文件發(fā)送到服務(wù)端時(shí),需要用到提交文件按鈕

代碼如下:

<form action="/index/" method="post"><p><input type="file"/></p></form>

上傳文件注意兩點(diǎn): 請(qǐng)求方式必須是post enctype="multipart/form-data"

9.下拉菜單

當(dāng)需要用戶從很多選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)時(shí),也可以使用下拉列表.

代碼如下:

這樣的下拉列表,用戶只能從其中選擇一個(gè)選項(xiàng),當(dāng)需要用戶選擇兩個(gè)或以下時(shí),可以添加參數(shù)來(lái)進(jìn)行控制.

代碼如下:

還可以在

OPTION

中添加

selected="selected"

選項(xiàng)來(lái)設(shè)置默認(rèn)值.

10.表單屬性

1.action屬性的說(shuō)明:

使用action選項(xiàng)來(lái)指定服務(wù)端的腳本來(lái)處理被提交的表單

<form action="/index/" method="post">

如果省略action屬性,則action會(huì)被設(shè)置為當(dāng)前頁(yè)面

2.method屬性的說(shuō)明:

method屬性規(guī)定在提交表單時(shí)所用的http方法(POST或GET)

<form action="/index/" method="post">

或

<form action="/index/" method="get">

3.get方法或post方法的使用方式說(shuō)明:

如果表單提交是被動(dòng)的(比如搜索引擎查詢),并且沒(méi)有敏感信息.

當(dāng)使用get方法時(shí),表單的數(shù)據(jù)在頁(yè)面地址欄中是可見(jiàn)的

因此,get最適合少量數(shù)據(jù)的提交,瀏覽器會(huì)設(shè)定容量限制

如果表單正在更新數(shù)據(jù),或者包含敏感信息(比如密碼)時(shí)應(yīng)該使用post,post的安全性更好.

因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見(jiàn)的.

切圖 qietu(.com)

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語(yǔ)法，常見(jiàn)類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見(jiàn)的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱
maxlength —— 定義文本框可輸入字符最大長(zhǎng)度
size —— 定義文本框在頁(yè)面中顯示的長(zhǎng)度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(gè)登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個(gè)新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時(shí)間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語(yǔ)法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁(yè)面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開(kāi)窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會(huì)返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語(yǔ)法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁(yè)面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來(lái)實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無(wú)法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過(guò)它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語(yǔ)法如下：

<select name="名稱">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語(yǔ)法如下：

<select name="名稱" size="可看見(jiàn)的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒(méi)有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網(wǎng)頁(yè)中使用窗口框架

在線咨詢

上一篇：JSP 自定義標(biāo)簽
下一篇：html開(kāi)發(fā)筆記20-合并單元格-列和行