整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類(lèi)型可分如下：
此類(lèi)控件有很多種類(lèi)型，使用<input type="類(lèi)型">語(yǔ)法，常見(jiàn)類(lèi)型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見(jiàn)的輸入框 |
file | 文本域，用于上傳文件等非文本數(shù)據(jù) |
文本輸入框和密碼框
除了顯示形式不一樣，其它屬性一樣，有以下屬性：
如下是文本輸入框和密碼框制作一個(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 輸入類(lèi)型
除了以上幾種類(lèi)型，HTML5 還增加了多個(gè)新的輸入類(lèi)型：
如下代碼：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
數(shù)字類(lèi)型（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 類(lèi)型。<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"> 蘋(píng)果
<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="名稱(chēng)" 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> 其它輸入類(lèi)控件
隱藏域 —— 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)文件上傳功能。
除了input 類(lèi)型的控件，還有文本域 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列的文本域。
下拉菜單作用和單選按鈕類(lèi)似，只不過(guò)它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語(yǔ)法如下：
<select name="名稱(chēng)">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>多選列表和多選按鈕類(lèi)似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語(yǔ)法如下：
<select name="名稱(chēng)" 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í)愉快！
上篇 ： 前端入門(mén)——html 表單
下篇： 前端入門(mén) —— 網(wǎng)頁(yè)中使用窗口框架
TML 基礎(chǔ)
非常簡(jiǎn)單的HTML文檔
HTML 標(biāo)題
HTML 段落
HTML 鏈接
HTML 圖片
實(shí)例解析
HTML 標(biāo)題
HTML 標(biāo)題
在html源碼中插入注釋
插入水平線
實(shí)例解析
HTML 段落
HTML 段落
更多段落
本例演示在 HTML 文檔中折行的使用。
HTML 格式化的某些問(wèn)題。
實(shí)例解析
HTML 文本格式化
文本格式化
此例演示如何使用 pre 標(biāo)簽對(duì)空行和空格進(jìn)行控制。
此例演示不同的"計(jì)算機(jī)輸出"標(biāo)簽的顯示效果。
此例演示如何在 HTML 文件中寫(xiě)地址。
此例演示如何實(shí)現(xiàn)縮寫(xiě)或首字母縮寫(xiě)。
此例演示如何改變文字的方向。
此例演示如何實(shí)現(xiàn)長(zhǎng)短不一的引用語(yǔ)。
文本下劃線與刪除線
實(shí)例解析
HTML 樣式
HTML Style 元素
背景色樣式
字體樣式，顏色，大小
文本對(duì)齊樣式
設(shè)置文本字體
設(shè)置文本字體大小
設(shè)置文本字體顏色
設(shè)置文本字體，字體大小，字體顏色
HTML使用不同樣式
沒(méi)有下劃線的鏈接
鏈接到一個(gè)外部樣式表
實(shí)例解析
HTML 鏈接
創(chuàng)建超級(jí)鏈接
將圖像作為鏈接
在新的瀏覽器窗口打開(kāi)鏈接
鏈接到同一個(gè)頁(yè)面的不同位置
跳出框架
創(chuàng)建電子郵件鏈接
創(chuàng)建電子郵件鏈接 2
實(shí)例解析
HTML 圖像
插入圖像
從不同的位置插入圖片
排列圖片
本例演示如何使圖片浮動(dòng)至段落的左邊或右邊。
制作圖像鏈接
創(chuàng)建圖像映射
實(shí)例解析
HTML 表格
簡(jiǎn)單的表格
沒(méi)有邊框的表格
表格中的表頭
帶有標(biāo)題的表格
跨行或跨列的表格單元格
表格內(nèi)的標(biāo)簽
單元格邊距(Cell padding)
單元格間距(Cell spacing)
實(shí)例解析
HTML 列表
無(wú)序列表
有序列表
不同類(lèi)型的有序列表
不同類(lèi)型的無(wú)序列表
嵌套列表
嵌套列表 2
定義列表
實(shí)例解析
HTML Forms 和 Input
創(chuàng)建文本域(Text fields)
創(chuàng)建密碼域
復(fù)選框
單選按鈕
簡(jiǎn)單的下拉列表
預(yù)選下拉列表
本例演示如何創(chuàng)建一個(gè)文本域（多行文本輸入控件）。
創(chuàng)建一個(gè)按鈕
本例演示如何在數(shù)據(jù)周?chē)L制一個(gè)帶標(biāo)題的框。
帶有文本域與輸入域的表單
帶有復(fù)選框與提交按鈕的form表單
帶有單選框與提交按鈕的表單
發(fā)送郵件表單
實(shí)例解析
HTML iframe
內(nèi)聯(lián)框架 (HTML頁(yè)面中插入框架)
實(shí)例解析
HTML 頭部元素
描述了文檔標(biāo)題
HTML頁(yè)面中默認(rèn)的URL鏈接
提供文檔元數(shù)據(jù)
實(shí)例解析
HTML 腳本
插入一個(gè)腳本
使用 <noscript> 標(biāo)簽
實(shí)例解析
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
多數(shù)PHP程序都使用HTML表單從用戶那里獲取數(shù)據(jù)并計(jì)算結(jié)果。
首先創(chuàng)造一個(gè)基本的HTML大綱，包含表單控件；然后將控件進(jìn)行合并（HTML表單必須包括一個(gè)提交按鈕，用戶單擊它可以將表單數(shù)據(jù)發(fā)送到服務(wù)器。）一個(gè)單獨(dú)的HTML頁(yè)面可以包含多個(gè)表單。
包含表單的HTML結(jié)構(gòu)和和普通的HTML結(jié)構(gòu)一樣。
<HTML>
<HEAD>
<TITLE>標(biāo)題放在這</TITLE>
</HEAD>
<BODY>
表單頁(yè)面放在這
</BODY>
</HTML>在包含表單的HTML頁(yè)面中可以使用任何HTML標(biāo)簽。基本的表單使用FROM標(biāo)簽來(lái)說(shuō)明。該標(biāo)簽中METHOD屬性接收GET或POST兩個(gè)值中的一個(gè)。ACTION屬性子明PHP腳本的url，該腳本可以收集通過(guò)表單收集的數(shù)據(jù)，可以是絕對(duì)路徑或者相對(duì)路徑。
<FORM METHOD="method" ACTION="url">
中間可以放置表單控件
</FORM>兩個(gè)常用的基本控件：文本框和提交按鈕。
文本框：允許用戶鍵入信息以發(fā)送給PHP腳本。NAME屬性為文本提供名稱(chēng)，PHP腳本可以通過(guò)名稱(chēng)準(zhǔn)確訪問(wèn)其內(nèi)容，因此它應(yīng)該是唯一的且符合PHP變量命名規(guī)則（但不需要$符號(hào)），單標(biāo)簽。VALUE屬性指明出現(xiàn)在提交按鈕上面的標(biāo)題。創(chuàng)建方式如下：
<INPUT TYPE = "TEXT" NAME="text">提交按鈕：允許用戶將一個(gè)表單的內(nèi)容發(fā)送到服務(wù)器，一個(gè)HTML表單對(duì)應(yīng)應(yīng)該有一個(gè)提交按鈕。
示例：一個(gè)完整的HTML表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
</BODY>
</HTML>可以在一個(gè)HTML頁(yè)面中包含多個(gè)表單，注意下一個(gè)表單的FORM開(kāi)始之前需要結(jié)束前一個(gè)FORM表單。
<HTML>
<HEAD>
<TITLE>標(biāo)題</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>
<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>
</BODY>
</HTML>文本框的屬性中，TYPE和NAME是必須的，其余是可選屬性。SIZE屬性用于設(shè)置文本框的可視大小；MAXLENGTH指明用戶鍵入字符的最大長(zhǎng)度；VALUE給出了一個(gè)最初顯示在文本框中的值。
<input type="text" name="" size="" maxlength="" value="">文本區(qū)域可以輸入多行文本。NAME和ROWS屬性是必須的。ROWS屬性表明了文本區(qū)域內(nèi)可以看到的文本行數(shù)，充滿時(shí)會(huì)滾動(dòng)。COLS屬性指明可見(jiàn)文本列數(shù)與行數(shù)類(lèi)似。WRAP屬性指明文本區(qū)域內(nèi)單詞換行的方式，可以指定如下值。該標(biāo)簽為雙標(biāo)簽。
值 | 說(shuō)明 |
off | 禁止單詞換行但用戶可以輸入換行符強(qiáng)制換行 |
virtual/soft | 各行顯示為換行，但是換行并沒(méi)有被發(fā)送到服務(wù)器 |
physica/hard | 啟用了單詞換行 |
<inputarea name="" rows="" cols="" wrap="">創(chuàng)建密碼框的語(yǔ)法與文本框相同，但要將TYPE屬性指定為PASSWORD而不是TYPE。
<input type="password" name="" size="" maxlength="" value="">取兩個(gè)值中的一個(gè)，即二選一。TYPE屬性是必須的，checked屬性出現(xiàn)，該復(fù)選框默認(rèn)情況會(huì)被選定。value屬性指定復(fù)選框被選定情況下被發(fā)送到服務(wù)器的值，默認(rèn)發(fā)送on值。法如下：
<input type="checkbox" name="" checked value="">語(yǔ)法與復(fù)選框?qū)傩院x相同，但是TYPE屬性的值必須是RADIO，NAME屬性是必須的。
<input type="radio" name="" checked value="">用戶可以選擇一個(gè)或者多個(gè)選項(xiàng)，它是一個(gè)滾動(dòng)菜單。
<select name="" multipile size="">options go here</select>name屬性是必須的，multipile屬性指明用戶可以通過(guò)按下crtl鍵并單擊多個(gè)選項(xiàng)來(lái)選擇它們
列表框的單選行為可作為單選按鈕。
<option selected value="text"></options><input type="hidden" name="text"value=""><input type="FILE" name="name" accept="time" value="text">其中type屬性是必須的。格式通過(guò)使用MIME碼指定。常用的格式如下：
超文本標(biāo)記語(yǔ)言文本 .html,.html text/html
普通文本 ：txt text/plain
word文檔：application/msword
RTF文本 ：rtf application/rtf
GIF圖形 ：gif image/gif
JPEG圖形 ：jpeg,
jpg： image/jpeg
au聲音文件：au audio/basic
MIDI音樂(lè)文件 ：mid,.midi audio/midi,audio/x-midi
RealAudio音樂(lè)文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
壓縮文件.rar application/octet-stream
壓縮文件.zip application/x-zip-compressed
TAR文件 .tar application/x-tar
<input type="image" src="url" name="text" align="align"><input type="reset" value="text">*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
