上篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
- 輸入類控件
- 菜單類控件
輸入類組件 —— 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
- 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ū)挾日紟琢?，比如上面定義了高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è)中使用窗口框架
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。