本節(jié)案例
image.png
表單的作用
HTML 表單用于收集用戶輸入。
表單form
<form> 元素定義 HTML 表單免钻,里面需要有各種表單元素
實(shí)例:
<form action="login.php" method="post">
姓名: <input type="text" name="name" value="Mickey" placeholder="請(qǐng)輸入用戶名">
<br>
密碼: <input type="password" name="password" value="Mouse">
<br><br>
<input type="submit" value="登錄">
</form>
<p>如果您點(diǎn)擊提交莫秆,表單數(shù)據(jù)會(huì)被發(fā)送到名為login.php的頁(yè)面。</p>
image.png
代碼解析:
- form里面需要各種表單元素催什,如<input>涵亏、<textarea>等。form常見屬性與屬性值有:
- method:方法蛆楞,用于規(guī)定在提交表單時(shí)所用的 HTTP 方法溯乒。 method = get(默認(rèn)) | post |…… , 字面意思用于獲取和傳輸。當(dāng)然豹爹,他們還有很多其它的差別裆悄,當(dāng)您使用 get時(shí),表單數(shù)據(jù)在頁(yè)面地址欄中是可見的,如表單提交是被動(dòng)的(比如搜索引擎查詢),并且沒有敏感信息可以用get校仑。post的安全性更好程帕,因?yàn)樵陧?yè)面地址欄中被提交的數(shù)據(jù)是不可見的杨赤。如果表單正在更新數(shù)據(jù),或者包含敏感信息(例如密碼)可以用post。
- action:動(dòng)作,用于規(guī)定提交表單的目的地冰垄。如action="banzhang.php"則將表單提交給banzhang.php來處理,如果值為空权她,則默認(rèn)是本頁(yè)虹茶。
- 其它屬性:enctype(編碼方式)、target(目標(biāo)打開方式)等等隅要。
- input是最常見的表單元素蝴罪,可以提供用戶一個(gè)輸入界面。<input> 元素根據(jù)不同的 type 屬性步清,可以變化為多種形態(tài)要门。常見屬性與屬性值有:
- type = text (默認(rèn)) | password | radio | checkbox | file | image | hidden ,分別表示:文本框(默認(rèn))| 密碼 | 單選 | 復(fù)選 | 文件框 | 圖像域 | 隱藏域
- name 廓啊,表單元素的名字欢搜,通常是必備屬性。
- value 谴轮,表單元素的值狂巢,通常根據(jù)需求來決定表單元素內(nèi)是否有value屬性和對(duì)應(yīng)的值。
- placeholder 书聚,表單元素占位符唧领,當(dāng)表單元素value為空時(shí)顯示其值,不為空時(shí)隱藏其值雌续。是一個(gè)html5新增屬性斩个。
- tabindex ,設(shè)置訪問者在頁(yè)面中按tab鍵的順序驯杜。 在沒有定義屬性值的時(shí)候受啥,tabindex的默認(rèn)值是0。如果將tabindex設(shè)為負(fù)值(tabindex=”-1”)鸽心,這個(gè)元素會(huì)被排除在tab鍵切換的范圍之外滚局。tabindex不僅可以用于輸入框間的切換,也可以用于鏈接之間的切換顽频。
- 其它屬性:checked(單選復(fù)選框默認(rèn)是否選中)藤肢、disabled(不可用,常用于按鈕)糯景、maxlength(文本框最大字符數(shù))嘁圈、size(元素寬度或高度) 、readonly(內(nèi)容只讀) 蟀淮。
常見表單元素的示例圖:
image.png
注意:
1.html5新增input的form屬性最住,用于指向特定form表單的id,實(shí)現(xiàn)input無(wú)需放在form標(biāo)簽之中怠惶,即可通過表單進(jìn)行提交涨缚。同時(shí)還新增了按鈕的formaction屬性,動(dòng)態(tài)的讓表單提交到不同的URL策治。
<form id="foo" method="post"></form>
<input name="name" form="foo" >
<input type="password" name="password" form="foo" >
<input type="submit" value="注冊(cè)" form="foo" formaction="reg">
<input type="submit" value="登錄" form="foo" formaction="log">
2.html5中新增了type屬性值:email脓魏、URL、datetime览妖、datetime-local轧拄、date、month讽膏、week檩电、time、number府树、range俐末、color 、search奄侠、tel等
3.html5中新增屬性:
- Autocomplete:自動(dòng)完成功能.記錄用戶之前輸入的內(nèi)容卓箫,并在下次輸入時(shí)自動(dòng)提示完成輸入。屬性值: on | off垄潮,既可以在form表單上使用烹卒,對(duì)整張表單的所有控件進(jìn)行自動(dòng)完成的開關(guān)闷盔,也可以在input上使用,對(duì)特定輸入框進(jìn)行修改旅急。絕大部分瀏覽器逢勾,默認(rèn)值是on(開啟)。
- Autofocus:自動(dòng)獲得焦點(diǎn). autofocus="autofocus",只能設(shè)置input元素自動(dòng)獲得焦點(diǎn)藐吮。
- Form:所屬表單溺拱。通過form表單的id,確定此input對(duì)應(yīng)哪張表單谣辞。
- Required:意為必填迫摔。required="required" 設(shè)置input必填,否則阻止提交泥从。
- Pattern:使用正則表達(dá)式驗(yàn)證input的模式(須了解正則表達(dá)式)
<p>正則表單式用法示例:</p>
<form>
手機(jī)號(hào):<input type="text" name="tel" pattern="1[0-9]{10}">
<input type="submit">
</form>
需要注意的表單元素用法
單選按鈕 radio:
- 同組radio的name屬性的值必須相同句占,此時(shí)實(shí)現(xiàn)只能單選效果(“互斥”)。
- 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn)歉闰,實(shí)際中通常使用lable for id的用法辖众。
性別:
<input type="radio" id="sex_male" name="sex" value="male">
<label for="sex_male">男</label>
<input type="radio" id="sex_female" name="sex" value="female">
<label for="sex_female">女</label>
<!--name相同,只能選男或女和敬;有了label for id凹炸,文字和表單元素捆在一起,單擊文字可以等同于單擊表單元素昼弟,注所有表單元素都可以通過label綁定-->
復(fù)選按鈕 radio:
- 同組radio的name屬性的值必須相同啤它。
- 為更好的鼠標(biāo)體驗(yàn)及方便以后的CSS實(shí)現(xiàn),實(shí)際中也通常使用label for id的用法舱痘。
- 注: label也可顯式關(guān)聯(lián)文本变骡,即用label包括input和文本。
愛好:
<input type="checkbox" id="f_basketball" name="favorites" value="basketball">
<label for="f_basketball">籃球</label>
<input type="checkbox" id="f_football" name="favorites" value="football">
<label for="f_football">足球</label>
<label>
<input type="checkbox" name="favorites" value="volleyball">排球
</label>
其它表單元素
下拉列表select
select元素定義下拉列表芭逝,option元素定義待選擇的選項(xiàng)塌碌。
<select name="cars" size="4" multiple> <!-- size = 4 表示下拉列表尺寸為4,multiple 表示可多選 -->
<option value="volvo" selected>Volvo</option>
<option value="bmw">BMW</option>
<option value="benz">Benz</option>
<option value="audi">Audi</option>
</select>
<select name="cars" size="4" multiple>
<optgroup label="IE系列"> <!-- optgroup對(duì)下拉列表進(jìn)行分組 -->
<option value="Internet Explorer">IE6</option>
<option value="Internet Explorer">IE7</option>
<option value="Internet Explorer">IE8</option>
<option value="Internet Explorer">IE9.0及以上</option>
</optgroup>
<optgroup label="非IE系列"> <!-- optgroup對(duì)下拉列表進(jìn)行分組 -->
<option value="Firefox">BMW</option>
<option value="Chrome">BMW</option>
<option value="Opera">BMW</option>
<option value="Safari">BMW</option>
</optgroup>
</select>
image.png
文本域 textarea
textarea元素定義多行輸入字段(文本域):
<textarea name="message" rows="10" cols="30" placeholder="請(qǐng)輸入您的留言旬盯!">
您的留言很寶貴台妆!
</textarea>
按鈕button
button 元素定義可點(diǎn)擊的按鈕。
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
- 在 button 元素內(nèi)部胖翰,可以放置文本或圖像接剩。這是<button>與使用 input 元素創(chuàng)建的按鈕的不同之處。
- 二者相比較萨咳, <button> 控件提供了更為強(qiáng)大的功能和更豐富的內(nèi)容懊缺。<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容,其中包括任何可接受的正文內(nèi)容培他,比如文本或多媒體內(nèi)容鹃两。例如遗座,我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本,用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像俊扳。
- 唯一禁止使用的元素是圖像映射员萍,因?yàn)樗鼘?duì)鼠標(biāo)和鍵盤敏感的動(dòng)作會(huì)干擾表單按鈕的行為。
- 請(qǐng)始終為按鈕規(guī)定 type 屬性:Internet Explorer 的默認(rèn)類型是 "button"拣度,而其他瀏覽器中(包括 W3C 規(guī)范)的默認(rèn)值是 "submit"。
HTML5 表單元素
HTML5 增加了如下表單元素:
- <datalist>
- <keygen>
- <output>
<datalist> 元素為 <input> 元素規(guī)定預(yù)定義選項(xiàng)列表螃壤。用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表抗果。
<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。簡(jiǎn)單的記憶:[input] list for [datalist] id奸晴。
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
<p><b>注釋:</b>Safari 或 IE9(以及更早的版本)不支持 datalist 標(biāo)簽冤馏。</p>
當(dāng)輸入內(nèi)容或點(diǎn)擊三角形按鈕時(shí)會(huì)出現(xiàn)提示
image.png
作業(yè):
1.利用表格本節(jié)所學(xué)的表單知識(shí)完成本節(jié)開頭的表單項(xiàng)目(*必填用required屬性)
2.完成如下練習(xí):
image.png
練習(xí)2參考代碼:
<form action="Test.html" method="get">
<fieldset>
<legend>HTML5新增表單元素</legend>
<table>
<tr>
<td>郵箱</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>地址</td>
<td><input type="url" name="url"></td>
</tr>
<tr>
<td>日期</td>
<td><input type="date" name="data"></td>
</tr>
<tr>
<td>時(shí)間</td>
<td><input type="time" name="time"></td>
</tr>
<tr>
<td>月份</td>
<td><input type="month" name="month"></td>
</tr>
<tr>
<td>星期</td>
<td><input type="week" name="week"></td>
</tr>
<tr>
<td>滑動(dòng)條</td>
<td><input type="range" name="range"></td>
</tr>
<tr>
<td>顏色</td>
<td><input type="color" name="color"></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</fieldset>
</form>