整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：
此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：
type 值 | 含義 |
text | 文字字段 |
password | 密碼域，用戶看不到明文，以*代替 |
radio | 單選按鈕 |
checkbox | 多選按鈕 |
button | 普通按鈕 |
submit | 提交按鈕 |
reset | 重置按鈕 |
image | 圖像域，用圖像作為背景的提交按鈕 |
hidden | 隱藏域，不可見的輸入框 |
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 輸入類型
除了以上幾種類型，HTML5 還增加了多個(gè)新的輸入類型：
如下代碼：
<!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”，一般配合腳本使用，語法如下：
<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按鈕">
<input type="button" value="打開窗口" 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 使用語法如下：
<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> 顯示效果
可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來實(shí)現(xiàn)文件上傳功能。
除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。
如下示例：
<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列的文本域。
下拉菜單作用和單選按鈕類似，只不過它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語法如下：
<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í)，使用多選列表，語法如下：
<select name="名稱" size="可看見的列表項(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ǔ)。
還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！
上篇 ： 前端入門——html 表單
下篇： 前端入門 —— 網(wǎng)頁中使用窗口框架
單屬性匯總：
1 name屬性
服務(wù)器會(huì)識(shí)別不同的name屬性，并根據(jù)name屬性來捕獲不同元素內(nèi)的數(shù)據(jù)。
2 value屬性
value 屬性為 input 元素設(shè)定值。
對(duì)于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。
注釋：value 屬性無法與 <input type="file"> 一同使用。
注意：單選框和復(fù)選框傳遞數(shù)據(jù)到數(shù)據(jù)庫時(shí)一定要設(shè)置value, 否則插入數(shù)據(jù)失敗;
3 type屬性
它決定了<input>標(biāo)簽在頁面中的表現(xiàn)樣式和功能
text 文本框
password 密碼框
radio 單選框
checkbox 復(fù)選框
file 文件域
hidden 隱藏域
image 圖像域
submit 提交按鈕
reset 重置按鈕
button 普通按鈕
4 size屬性
列表框中size屬性用來設(shè)置列表框顯示的行數(shù)；
文本框和密碼框會(huì)使用size屬性設(shè)置域的顯示寬度；
5 disabled屬性
定義disabled屬性可以禁止使用該元素；
無法將數(shù)據(jù)提交到服務(wù)器處理;
6 readonly屬性
常用在輸入性表單對(duì)象中(如文本框、密碼框、文本區(qū)域)，用來禁止輸入任何信息；
可以將數(shù)據(jù)提交到服務(wù)器處理;
7 checked屬性
它與disabled屬性一樣沒有屬性值，常用在選擇性表單對(duì)象中，定義對(duì)象處于被選中狀態(tài)(如單選按鈕和復(fù)選框)
但在列表框或者下拉式菜單中，為了表示被選中的項(xiàng)目，可使用selected屬性；
7 placeholder屬性
規(guī)定幫助用戶填寫輸入字段的提示。
表單對(duì)象：
1 文本框
<input type="text" name="textfield" id="textfield" value="單行文本框" size="20" maxlength="20">必需的屬性:name type
2 密碼域
<input type="password" name="passwordfield" id="passwordfield">必需的屬性:name type
3 文本域
<textarea name="textarea" cols="20" rows="5" wrap="physical"></textarea>必需的屬性:name cols rows
wrap屬性 默認(rèn)值：輸入的文本會(huì)自動(dòng)換行。當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入的文本一同被提交到服務(wù)器；
off(也可寫成wrap)：不自動(dòng)換行, 當(dāng)輸入的內(nèi)容超出文本區(qū)域右邊界時(shí), 文本將向左滾動(dòng), 并顯示滾動(dòng)條。
如果希望換行，必須手動(dòng)輸入回車鍵才能將插入點(diǎn)移到下一行；
virtual：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符不會(huì)隨輸入文本一同提交到服務(wù)器；(默認(rèn)值)
physical：文本能夠自動(dòng)換行, 當(dāng)數(shù)據(jù)提交到服務(wù)器被處理時(shí), 換行符將會(huì)隨輸入的文本一同被提交到服務(wù)器進(jìn)行處理；
關(guān)于如何限制文本域輸入字符串的長度 見javascript|語法|設(shè)置文本框
HTML5中wrap中屬性值修改為hard|soft
soft 當(dāng)在表單中提交時(shí), textarea 中的文本不換行, 默認(rèn)值。
hard 當(dāng)在表單中提交時(shí), textarea 中的文本換行(包含換行符)。
當(dāng)使用 "hard" 時(shí), 必須規(guī)定 cols 屬性
4 單選按鈕
單選按鈕傳遞的信息簡單，如1或0、True或False。
<input type="radio" name="radio" value="1"/>選項(xiàng)1
<input type="radio" name="radio" value="2"/>選項(xiàng)2
<input type="radio" name="radio" value="3"/>選項(xiàng)3多個(gè)單選按鈕通過定義相同的name屬性, 以實(shí)現(xiàn)捆綁在一起；
必需的屬性:type name value
5 復(fù)選框
<input type="checkbox" name="checkbox[]" value="1"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="2"/>選項(xiàng)2
<input type="checkbox" name="checkbox[]" value="3"/>選項(xiàng)2通過設(shè)置相同的name屬性可以把多個(gè)復(fù)選框捆綁在一起；
必需的屬性:type name value
6 列表框/下拉菜單
<select name="select" size=1>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果select元素中不設(shè)置size屬性,則該元素會(huì)顯示為下拉菜單樣式
<select name="select" size="1" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>如果希望以列表框形式顯示,則可以使用size屬性指定列表框的高度(顯示幾個(gè)選項(xiàng));
還可以通過mutiple屬性定義列表框是否為多選(默認(rèn)是單選)；
通過<optgroup>標(biāo)簽把相關(guān)的選項(xiàng)組合在一起：
<select>
<optgroup label="PHP版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
<optgroup label="IOS版塊">
<option value ="resource">資源共享</option>
<option value ="study">學(xué)習(xí)交流</option>
<option value ="salary">薪酬待遇</option>
</optgroup>
</select>注意：其中PHP版塊和IOS版塊不能被選中
所有主流瀏覽器都支持 <optgroup> 標(biāo)簽。
7 文件域
<input type="file" name="file"/>
<input type="file" name="file" multiple/>8 按鈕
提交按鈕
<input type="submit" name="" value="提交"/>name值必須給出
重置按鈕
<input type="reset" name="" value="重置"/>普通按鈕
<input type="button" name="" value="普通按鈕"/>它一般是配合javascript來使用;
關(guān)于控制表單提交按鈕見: javascript|語法|控制表單提交
9 圖像域
<input type="image" name="image" value="提交" src="images/vote_d.gif" alt="提交" align="middle"/>10 隱藏域
限制上傳文件大小
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />傳遞ID值
<input type="hidden" name="id" value="<?php echo $result['id'];?>" />11 button標(biāo)簽
在 button 元素內(nèi)部，您可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 input 元素創(chuàng)建的按鈕之間的不同之處。
<button type="button" name="button" value="按鈕"><img src="hw001.jpeg"/></button>普通按鈕<button type="button">普通按鈕</button> 它一般是配合javascript來使用, 默認(rèn)值
提交按鈕<button type="submit">提交按鈕</button>
重置按鈕<button type="reset">重置按鈕</button>
提交表單
enctype屬性
該屬性包含兩種方式:
application/x-www-form-urlencoded 是默認(rèn)編碼類型
multipart/form-data
multipart/form-data編碼方式可以用來傳輸二進(jìn)制數(shù)據(jù)或者非ASCII字符的文本(如圖片、不同格式的文件等),上傳文件必須使用此屬性
multipart: 多部件的
multiple: 多重的
text/plain
text/plain將表單屬性發(fā)送到電子郵箱時(shí)，enctype的值必須設(shè)為"text/plain",否則將會(huì)出現(xiàn)亂碼。
發(fā)送電子郵件的表單程序
<form name="form1" method="post" action="mailto:marker@broadview.com.cn" enctype="text/plain">
</form>action 表單提交的腳本
如果傳遞到本頁面，則直接輸入控制 action=""
表單提交方式method:post/get
<form action="test.php?id=5" method="post" >
name: <input type="text" name="name" value="100">
</form>id=5是get傳， name="100" 是post傳！ //高洛峰解釋
action="" 表示傳遞到當(dāng)前腳本文件
target 指定提交到哪一個(gè)窗口
_blank 打開新窗口
_self 當(dāng)前的窗口,默認(rèn)值
_parent 上一層窗口
_top 最上層窗口
框架名稱 指定指定窗口或框架名稱
label標(biāo)簽
作用: 擴(kuò)大觸控區(qū)域, 為了提升用戶體驗(yàn), 點(diǎn)擊文字也能選中表單
<form action=" method="get" accept-charset="utf-8">
<label>電子郵箱: <input type="text" name="email" value="" placeholder="請(qǐng)輸入電子郵箱"/></label><br/>
<label>密碼: <input type="password" name="password"/></label><br/>
<label for="address">地址</label>
<input type="text" name="address" id="address" placeholder="請(qǐng)輸入地址" />
</form>for與id一致
<input type="radio" id="sec" name="sex"> <label for="sex">男</label>簡化寫法:
<label><input type="checkbox"/>周杰倫-晴天</label>注意: "for" 屬性可把 label 綁定到另外一個(gè)元素。請(qǐng)把"for"屬性的值設(shè)置為相關(guān)元素的 id 屬性的值。
PHP實(shí)例：創(chuàng)建發(fā)送郵件信息的html表單
代碼：
<html>
<head>
<title>簡單郵件發(fā)送表單</title>
</head>
<body>
<h1>Mail Form</h1>
<form name="form1" method="post" action="simpleEmail.php">
<table>
<tr><td><b>To</b></td><td><input type="text" name="mailto" size="35"></td></tr>
<tr><td><b>郵件主題：</b></td>
<td><input type="text" name="mailsubject" size="35"></td></tr>
<tr><td><b>郵件內(nèi)容</b></td>
<td><textarea name="mailbody" cols="50" rows="7"></textarea></td>
</tr>
<tr><td colspan="2">
<input type="submit" name="Submit" value="發(fā)送">
</td>
</tr>
</table>
</form>
</body>
</html>simpleEmail.php
頁編程之表單詳解。
同學(xué)們好，今天我要跟大家分享的是html中前后臺(tái)數(shù)據(jù)交互的重要內(nèi)容——form標(biāo)簽。通過form標(biāo)簽，用戶可以在前臺(tái)填寫資料，然后通過form的method屬性中設(shè)置的提交方式，提交至action屬性規(guī)定的后端處理程序中進(jìn)行處理。
我們經(jīng)常在網(wǎng)頁上看到的填寫、注冊(cè)、登錄、修改資料等操作都需要使用form標(biāo)簽。讓我們來看看今天的實(shí)例效果吧。
form標(biāo)簽對(duì)于用戶來說是不可見的，如果沒有這一句話，你們只能看到一個(gè)完全空白的網(wǎng)頁。
可以將form標(biāo)簽想象成一個(gè)盒子，其中放置了輸入框、單選框、復(fù)選框等控件。當(dāng)用戶填寫完所有控件的內(nèi)容并點(diǎn)擊提交按鈕時(shí)，這個(gè)盒子就會(huì)被蓋上，并被直接發(fā)送到服務(wù)器進(jìn)行處理。
接下來，我們來看看實(shí)現(xiàn)代碼。form標(biāo)簽是一個(gè)圍堵標(biāo)簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據(jù)需要設(shè)置相應(yīng)的屬性即可。
首先，我要重點(diǎn)介紹幾個(gè)常用的屬性：action、name、method。
action屬性設(shè)置了服務(wù)端處理程序的URL地址。以郵寄盒子的理解來說，action就是收件人地址。
name屬性設(shè)置了表單的名稱，這個(gè)名稱可以被前臺(tái)的JS調(diào)用。同時(shí)，在一個(gè)網(wǎng)頁中存在多個(gè)表單標(biāo)簽時(shí)，它也可以用來給服務(wù)器進(jìn)行區(qū)分。
method屬性設(shè)置了表單的提交方式，它有兩個(gè)值post和get。post是密文，而get是明文，post沒有數(shù)據(jù)長度限制，而get只能傳遞大約3000個(gè)字符。
以郵寄舉例，get是直接將寫著內(nèi)容的信紙寄出，而post則是將信紙裝進(jìn)信封里寄出。enctype不是常用屬性，但在使用時(shí)非常重要。它規(guī)定了從表單數(shù)據(jù)發(fā)送到服務(wù)器之前如何對(duì)其進(jìn)行編碼，共有三個(gè)值，分別對(duì)應(yīng)文字?jǐn)?shù)據(jù)、多媒體數(shù)據(jù)和文件數(shù)據(jù)。詳情請(qǐng)參考匯總文檔。值得一提的是，只有在method等于post時(shí)，enctype的值才會(huì)生效。
除了這三個(gè)屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務(wù)端可以處理的字符集，autocomplete是否開啟前臺(tái)自動(dòng)填充歷史數(shù)據(jù)及用戶填寫一次之后，再填寫會(huì)在瀏覽器中詢問是否根據(jù)過往填寫的內(nèi)容進(jìn)行自動(dòng)填充。
·將logo的"novalidate"設(shè)置為"true"，可以直接提交未經(jīng)驗(yàn)證的表單數(shù)據(jù)。通常，我們需要在前臺(tái)使用JS或控件驗(yàn)證用戶填寫的數(shù)據(jù)是否符合格式要求。然而，這個(gè)屬性可以直接繞過驗(yàn)證。
·將"target"設(shè)置為"_blank"，可以打開新的窗口進(jìn)行提交。這與a標(biāo)簽的"target"屬性相同。現(xiàn)在，我的理解是這樣的。在后面的C#章節(jié)中，我們將結(jié)合具體的使用場景進(jìn)行詳細(xì)的講解。
今天的分享就到這里。希望各位同學(xué)能按照我的要求，認(rèn)真練習(xí)寫三次。這樣，即使不看視頻，你們也能寫出正確的代碼。所有的案例和相關(guān)文檔都可以向我索取。我們下期再見。網(wǎng)頁編程、服務(wù)端編程、數(shù)據(jù)庫和算法。如果你想學(xué)習(xí)編程，記得關(guān)注我哦！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
