《Web前端開(kāi)發(fā)項(xiàng)目教程》網(wǎng)頁(yè)中表單的應(yīng)用

項(xiàng)目09網(wǎng)頁(yè)中表單元素的應(yīng)用任務(wù)9-1網(wǎng)頁(yè)中表單的應(yīng)用

知識(shí)點(diǎn)掌握表單的基本用法以及各種表單控件掌握html5自帶表單驗(yàn)證功能掌握表單樣式的應(yīng)用技能點(diǎn)能夠熟練制作表單能夠熟練使用各種表單控件能夠根據(jù)需要對(duì)表單進(jìn)行樣式設(shè)計(jì)能夠根據(jù)需要使用表格進(jìn)行頁(yè)面局部布局表單表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。例如，搜索引擎頁(yè)面、用戶登錄頁(yè)面、用戶注冊(cè)頁(yè)面等使用的就是表單。當(dāng)用戶填寫(xiě)了相應(yīng)信息后，這些信息就會(huì)經(jīng)過(guò)表單服務(wù)器被提交到網(wǎng)站的后臺(tái)，后臺(tái)管理人員可以經(jīng)過(guò)一系列操作拿到用戶輸入的信息來(lái)判斷是否允許用戶登錄或注冊(cè)。一、表單的組成一個(gè)完整的表單通常由表單域、表單控件（也稱為表單元素）、提示信息3個(gè)部分構(gòu)成，具體解釋如下：1.表單域：相當(dāng)于一個(gè)容器，用來(lái)容納所有的表單控件和提示信息。表單域可以定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。2.表單控件：包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、重置按鈕等。3.提示信息：一個(gè)表單中通常還需要包含一些說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作。表單域表單控件提示信息二、創(chuàng)建表單HTML中規(guī)定，使用<form>標(biāo)簽來(lái)表示表單，表單里的元素都需要放在<form></form>標(biāo)簽中。<form>具體語(yǔ)法如下：

<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件和提示信息 </form><form>與</form>之間的內(nèi)容是由用戶自定義的，action、method和name為表單標(biāo)記<form>的常用屬性，另外在html5中還新增了autocomplete等屬性二、創(chuàng)建表單——action屬性在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。例如： <formaction="login.php">

表示當(dāng)提交表單時(shí)，表單數(shù)據(jù)會(huì)傳送到當(dāng)前路徑下的

"login.php"的頁(yè)面去處理。action的屬性值可以是相對(duì)路徑或絕對(duì)路徑，還可以為接收數(shù)據(jù)的E-mail郵箱地址。例如： <formaction=mailto:xxx@163.com>

表示當(dāng)提交表單時(shí)，表單數(shù)據(jù)會(huì)以電子郵件的形式傳遞出去。當(dāng)不設(shè)置action屬性，或者設(shè)置等于空字符串（即action=""）時(shí)，表單數(shù)據(jù)提交給當(dāng)前頁(yè)面。二、創(chuàng)建表單——method屬性method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中g(shù)et為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，通過(guò)get提交數(shù)據(jù)，用戶名和密碼將明文出現(xiàn)在url上，且get方式提交的數(shù)據(jù)最多只能是1024字節(jié)。而post方式的保密性好，并且無(wú)數(shù)據(jù)量的限制，使用method="post"可以大量的提交數(shù)據(jù)。例如：<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按鈕--> <buttontype="submit"name="submit">提交</button></form>運(yùn)行后在輸入框中輸入“張三”，提交表單后結(jié)果如下：二、創(chuàng)建表單——method屬性get方式提交的表單數(shù)據(jù)顯示在瀏覽器的地址欄中，表單數(shù)據(jù)添加到action所指向的URL后面，并且兩者使用“?”連接，而各個(gè)變量之間使用“&”連接。get保密性較差，因?yàn)樵趥鬏斶^(guò)程，數(shù)據(jù)被放在請(qǐng)求的URL中，而如今現(xiàn)有的很多服務(wù)器、代理服務(wù)器或者用戶代理都會(huì)將請(qǐng)求URL記錄到日志文件中，然后放在某個(gè)地方，這樣就可能會(huì)有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數(shù)據(jù)，一些系統(tǒng)內(nèi)部消息將會(huì)一同顯示在用戶面前，所以是不安全的。get主要用于從服務(wù)器上獲得數(shù)據(jù)，例如查詢，一般是用get方法遞交查詢條件，查詢結(jié)果在頁(yè)面上體現(xiàn)。二、創(chuàng)建表單——method屬性如果我們將method屬性的值換成“post”，提交表單后瀏覽器上出現(xiàn)如圖所示的錯(cuò)誤信息。因?yàn)閜ost是向服務(wù)器傳送數(shù)據(jù)的，我們?cè)谏厦娴拇a中沒(méi)有明確指出服務(wù)器處理該表單的文件，所以提示“無(wú)法傳送表單數(shù)據(jù)”，從這一點(diǎn)上看post和get是不同的，post將表單內(nèi)各字段名稱與其內(nèi)容放置在HTML表頭(header)內(nèi)一起傳送給服務(wù)器端交由action屬性所指的程序處理，所有操作對(duì)用戶來(lái)說(shuō)都是不可見(jiàn)的，保密性較好。出于安全性考慮，提交數(shù)據(jù)的時(shí)候最好使用post。二、創(chuàng)建表單——name屬性name屬性用于指定表單的名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單，為在腳本中引用表單提供方便。<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按鈕--> <buttontype="submit"name="submit">提交</button></form>二、創(chuàng)建表單——autocomplete屬性autocomplete屬性是HTML5中的新屬性，用于指定表單是否有自動(dòng)完成功能。所謂“自動(dòng)完成”是指將表單控件輸入的內(nèi)容記錄下來(lái)，當(dāng)再次輸入時(shí)，輸入的歷史記錄會(huì)顯示在一個(gè)下拉列表里，以實(shí)現(xiàn)自動(dòng)完成輸入。autocomplete屬性有2個(gè)值，可以控制表單的自動(dòng)完成功能是否開(kāi)啟，具體如下：on：表單開(kāi)啟自動(dòng)完成功能；off：表單關(guān)閉自動(dòng)完成功能。autocomplete=on三、表單控件表單控件用于定義不同的表單功能，如密碼輸入框、文本域、下拉列表、復(fù)選框等，最常見(jiàn)的表單控件是input控件。input控件的語(yǔ)法格式如下： <inputtype="控件類型"/><input/>標(biāo)記為單標(biāo)記，行內(nèi)元素，但又與一般的行內(nèi)元素不同，它不形成新的行塊，左右可以有其他元素，但是可以設(shè)定width和height，有內(nèi)在尺寸。type屬性是<input>標(biāo)記最基本的屬性，其取值有多種，用于指定不同的控件類型。3.1input控件及其屬性——type屬性常用的type屬性值如下text：默認(rèn)值，單行文本輸入框password：密碼輸入框hidden：隱藏域，在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，為處理表單的程序服務(wù)radio：?jiǎn)芜x按鈕checkbox：復(fù)選框file：文件域button：普通按鈕submit：提交按鈕reset：重置按鈕image：圖像形式的提交按鈕文本框密碼框提交按鈕復(fù)選框文本框密碼框密碼框郵箱復(fù)選框提交和重置按鈕3.1input控件及其屬性——html5新增的type類型email：郵箱<inputtype="email">提供了默認(rèn)的電子郵箱的完整驗(yàn)證：要求必須包含@符號(hào)，同時(shí)必須包含服務(wù)器名稱，如果不能滿足驗(yàn)證，則會(huì)阻止當(dāng)前的數(shù)據(jù)提交。url：網(wǎng)址<inputtype="url">驗(yàn)證只能輸入合法的網(wǎng)址：必須包含http://number：數(shù)字只能輸入數(shù)字（包含小數(shù)點(diǎn)），不能輸入其它的字符。可以有屬性max:最大值、min:最小值、value:默認(rèn)值。

例如，數(shù)量：<inputtype="number"value="60"max="100"min="0">range：滑塊，可以通過(guò)刻度滑動(dòng)來(lái)賦值例如<inputtype="range"max="100"min="0"value="50">其中max屬性設(shè)置滑塊控件的最大值，min屬性設(shè)置滑塊控件的最小值，value指定默認(rèn)值。color：顏色<inputtype="color">生成一個(gè)顏色選擇器，用戶可以選擇顏色，可通過(guò)獲取此標(biāo)簽的value值，獲取顏色信息。time/date/month/week：日期時(shí)間相關(guān)值3.1input控件及其屬性——html5新增的type類型對(duì)<input>標(biāo)記定義type屬性就可以在前端頁(yè)面中按默認(rèn)外觀顯示表單控件了，但是為了與服務(wù)器進(jìn)行數(shù)據(jù)傳遞，除了type屬性之外，<input/>控件需要定義一些其他屬性，如name、value等。3.1input控件及其屬性——name屬性name屬性由用戶自定義，表示控件的名稱，每個(gè)表單控件都要用一個(gè)name屬性表示，這是因?yàn)閣eb服務(wù)器根據(jù)表單控件的name屬性來(lái)判斷傳遞給服務(wù)器的值來(lái)自哪個(gè)控件。為了保證數(shù)據(jù)的準(zhǔn)確采集，需要為每個(gè)表單控件定義一個(gè)獨(dú)一無(wú)二的名稱，但是同為一個(gè)組的單選框可以共用一個(gè)name。 <formaction=""name="loginform">

姓名：<inputname="username"> <inputtype="submit"name="sbtn"> </form>3.1input控件及其屬性——value屬性value屬性表示表單提交后該input控件上傳給服務(wù)器的數(shù)據(jù)。文本框的value屬性值表現(xiàn)為文本框中顯示的默認(rèn)值；button普通按鈕、submit提交按鈕、reset重置按鈕的value屬性值則表現(xiàn)為按鈕上顯示的文本；而對(duì)于radio單選框、checkbox復(fù)選框來(lái)說(shuō)，value屬性只是表單提交后上傳給服務(wù)器的數(shù)據(jù)。 <formaction=""name="loginform">

姓名：<inputname="username"value="張三"><br>

性別：<inputtype="radio"value="male"name="sex">男 <inputtype="radio"value="famale"name="sex">女 <br> <inputtype="submit"name="sbtn"value="登錄"> </form>注意在以上代碼中，單選按鈕的兩個(gè)選項(xiàng)使用了相同的name，表示它們屬于同一組數(shù)據(jù)，每一個(gè)選項(xiàng)選中后傳遞不同的值給服務(wù)器。3.1input控件及其屬性——其它重要屬性checked：設(shè)置單選框、復(fù)選框初始狀態(tài)首次加載時(shí)處于選中狀態(tài)。

例如：<inputtype="radio"value="famale"name="sex"checked="checked">女

或者直接寫(xiě)成<inputtype="radio"value="famale"name="sex"checked>女

默認(rèn)該選項(xiàng)被選中。disabled：設(shè)置首次加載使禁用此元素。當(dāng)type為hidden時(shí)不能指定該屬性。

禁用時(shí)該控件顯示為灰色。readonly：指定該文本框內(nèi)的值不允許用戶修改（可以使用Javascript腳本修改）。3.1input控件及其屬性——其它重要屬性placeholder：提供用戶填寫(xiě)輸入字段的提示信息。該值僅用于提示，當(dāng)該控件獲取焦點(diǎn)時(shí)提示信息自動(dòng)消失，與value屬性值不同，value值是用戶實(shí)現(xiàn)定義好的該控件上傳給服務(wù)器的數(shù)據(jù)。如圖，兩個(gè)文本控件分別使用了placeholder和value屬性，二者在顯示上也是完全不同的。3.1input控件及其屬性——案例<formaction=""method="post">

用戶名：<inputtype="text"name="username"value="張三"readonly/><br/><br/>

密碼：

<inputtype="password"name="pw"placeholder="請(qǐng)輸入六位密碼"/>

<br/><br/>

性別：

<inputtype="radio"name="sex"value="boy"checked="checked"/>男 <inputtype="radio"name="sex"value="girl"/>女<br/><br/> 興趣：

<inputtype="checkbox"name="fv"value="sing"/>唱歌 <inputtype="checkbox"name="fv"value="dance"/>跳舞 <inputtype="checkbox"name="fv"value="swim"/>游泳<br/><br/>

上傳頭像： <inputtype="file"disabled/><br/><br/> <inputtype="submit"name="bt1"/> <inputtype="reset"name="bt2"/> <inputtype="button"name="bt3"value="普通按鈕"/> <inputtype="image"name="bt4"src="img/shopcar2.png"width="20"/> <inputtype="hidden"/></form>3.1input控件及其屬性——焦點(diǎn)轉(zhuǎn)移對(duì)于以上各種input控件，鼠標(biāo)點(diǎn)擊控件會(huì)獲得焦點(diǎn)。為提供更好的用戶體驗(yàn)，常常需要將<input/>控件聯(lián)合<label>標(biāo)記使用，以擴(kuò)大控件的選擇范圍。例如，在選擇性別時(shí)，我們希望單擊提示文字“男”或者“女”也可以選中相應(yīng)的單選按鈕，在單擊提示文字“用戶名：”時(shí)，希望光標(biāo)會(huì)自動(dòng)移動(dòng)到用戶名輸入框中。這時(shí)我們就需要使用<label>標(biāo)記。<label>標(biāo)簽為input元素定義標(biāo)注（標(biāo)記）。如果點(diǎn)擊label元素內(nèi)內(nèi)容，就會(huì)觸發(fā)相應(yīng)控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<label>標(biāo)簽使用for屬性將<label>的標(biāo)注內(nèi)容綁定到指定id的表單控件上，for屬性要與相關(guān)元素的id屬性相同。3.1input控件及其屬性——焦點(diǎn)轉(zhuǎn)移<formaction=""method="post">

用戶名：

<labelfor="username">

<inputtype="text"name="uname"id="uname"/>

</label>

<br>

性別：

<labelfor="boy">

<inputtype="radio"name="sex"id="boy"value="boy"/>男

</label>

<labelfor="girl">

<inputtype="radio"name="sex"id="girl"value="girl"/>女

</label>

<br>

<labelfor="uname">

切換用戶

</label></form>三、表單控件——其他表單控件input元素是一個(gè)龐大和復(fù)雜的元素，但它并不是唯一的表單控件。除此之外，還有button、select、option、optgroup、textarea、fieldset、legend等傳統(tǒng)表單控件和datalist、progress、meter、output、keygen等新增表單控件。3.2其他表單控件——button控件<button>標(biāo)簽也可以定義一個(gè)按鈕，雙標(biāo)記，在button元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。這是該元素與使用input元素創(chuàng)建的按鈕之間的不同之處。<button></button>控件與<inputtype="button">相比，功能更為強(qiáng)大，內(nèi)容更為豐富。具體用法如下：<buttonname="名稱"type="按鈕類型"value="初始值">

按鈕文本、圖像或多媒體</button>type屬性用來(lái)指定按鈕類型，仍然分為以下三種：button普通按鈕submit提交按鈕reset復(fù)位重置按鈕value屬性用來(lái)設(shè)置按鈕的初始值，此值可被JavaScript腳本使用或修改。如果在HTML表單中使用button元素，不同的瀏覽器會(huì)提交不同的值。InternetExplorer將提交<button>與</button>之間的文本，而其他瀏覽器將提交value屬性的內(nèi)容。3.2其他表單控件——textarea多行文本如果在表單頁(yè)面中需要用戶輸入大量文本，單行文本框就滿足不了需求了，通過(guò)textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語(yǔ)法格式如下：<textarea>文本內(nèi)容</textarea>文本區(qū)域中可容納無(wú)限數(shù)量的文本，超過(guò)文本顯示區(qū)域會(huì)自動(dòng)添加滾動(dòng)條。可以通過(guò)cols和rows屬性來(lái)規(guī)定textarea的尺寸大小，例如：<textareacols="60"rows="8"></textarea>，但是更好的辦法是使用CSS的height和width樣式屬性。3.2其他表單控件——select下拉列表及分組使用select控件定義下拉菜單的基本語(yǔ)法格式如下：<select>

<option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select><formaction=""method="post">

<p>請(qǐng)選擇所在城市：</p>

<select>

<optionvalue="bj">北京</option>

<optionvalue="sh">上海</option>

<optionvalue="tj">天津</option>

<optionvalue="wh">武漢</option>

<optionvalue="jn">濟(jì)南</option>

</select>

<br>

<inputtype="submit"value="提交"/></form>3.2其他表單控件——select下拉列表及分組<select>和<option>標(biāo)記也可以通過(guò)屬性設(shè)置來(lái)改變下拉菜單的外觀顯示效果。<select>的屬性size：指定下拉菜單的可見(jiàn)選項(xiàng)數(shù)（取值為正整數(shù)）。multiple：定義multiple="multiple"時(shí)，下拉菜單將具有多項(xiàng)選擇的功能，方法為按住Ctrl鍵的同時(shí)選擇多項(xiàng)。<option>的屬性selected：定義selected="selected"時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。<formaction=""method="post">

<p>請(qǐng)選擇所在城市：</p>

<selectname="city"size="5"multiple>

<optionvalue="bj">北京</option>

<optionvalue="sh"selected>上海</option>

。。。

</select>

<br>

<inputtype="submit"value="提交"/></form>滾動(dòng)菜單效果3.2其他表單控件——select下拉列表及分組在實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中，有時(shí)候由于選項(xiàng)過(guò)多，還需要對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。方法是：在下拉菜單中使用<optgroup></optgroup>標(biāo)記進(jìn)行分組，并且使用label屬性規(guī)定每一組的名稱。<formaction=""method="post">

<p>請(qǐng)選擇所在區(qū)域：</p>

<select>

<option>--請(qǐng)選擇--</option>

<optgrouplabel="北京">

<option>東城區(qū)</option>

<option>西城區(qū)</option>

<option>朝陽(yáng)區(qū)</option>

<option>海淀區(qū)</option>

</optgroup>

<optgrouplabel="天津">

<option>和平區(qū)</option>

<option>河?xùn)|區(qū)</option>

<option>河西區(qū)</option>

</optgroup>

</select></form>3.2其他表單控件——fieldset表單分組當(dāng)一個(gè)表單需要的字段內(nèi)容較多時(shí)，需要合理的對(duì)內(nèi)容進(jìn)行分組，這樣整體看起來(lái)更加有組織性。表單分組可以使用<fieldset>和<legend>元素，二者都是雙標(biāo)記，通過(guò)<fieldset>標(biāo)記可將表單中一部分相關(guān)元素打包分組，重新設(shè)置CSS樣式使瀏覽器以特殊方式顯示這組表單字段。<legend>則是用來(lái)設(shè)置分組標(biāo)題，它們本身不參與數(shù)據(jù)的交互操作。<formaction=""method="post">

<fieldsetid="st">

<legend>學(xué)生信息</legend>

<p>姓名：<inputtype="text"name="stuName"/></p>

<p>性別：<inputtype="radio"name="sex"value="male"/>男

<inputtype="radio"name="sex"value="female"/>女</p>

<p>年齡：<inputtype="number"name="stuAge"max="25"/></p>

</fieldset> <fieldsetid=“father">

。。。 </fieldset> <inputtype="submit"value="提交"/>

<inputtype="reset"value="重置"/></form>四、HTML5自帶表單驗(yàn)證我們?cè)谑褂帽韱螘r(shí)為了減輕后臺(tái)數(shù)據(jù)傳送壓力，提高數(shù)據(jù)傳送的質(zhì)量和效率，往往需要在表單中的這些輸入數(shù)據(jù)被送往服務(wù)器前對(duì)其進(jìn)行驗(yàn)證。除了復(fù)雜的驗(yàn)證需要使用js腳本完成，html5還新增了一些自帶的表單驗(yàn)證功能，例如驗(yàn)證輸入數(shù)據(jù)是否為空，輸入郵箱格式是否正確等。四、HTML5自帶表單驗(yàn)證——input驗(yàn)證在input標(biāo)簽中可通過(guò)type屬性指定控件類型：email，指定輸入內(nèi)容為電子郵件地址。url，指定輸入內(nèi)容為URL。number，指定輸入內(nèi)容為數(shù)字，并可通過(guò)min、max、step屬性指定最大最小及間隔。date、month、week、time、datetime、datetime-local指定輸入內(nèi)容為相應(yīng)日期相關(guān)類型。color，指定控件為顏色選擇器。如果沒(méi)有按照預(yù)訂格式進(jìn)行輸入，在點(diǎn)擊提交按鈕的時(shí)候就會(huì)觸發(fā)錯(cuò)誤的驗(yàn)證信息。例：<inputid="u_email"name="u_email"type="email"/>四、HTML5自帶表單驗(yàn)證——其它驗(yàn)證非空驗(yàn)證：在需要添加非空驗(yàn)證的元素上添加required屬性可以進(jìn)行非空驗(yàn)證。例如：用戶名<inputtype="text"required>在點(diǎn)擊提交按鈕時(shí)，如果文本框中未能輸入數(shù)據(jù)，則觸發(fā)非空的提示信息。四、HTML5自帶表單驗(yàn)證——其它驗(yàn)證pattern正則驗(yàn)證：規(guī)定pattern屬性指定輸入內(nèi)容必須符合指定模式（正則表達(dá)式）。例：<inputid="phone_num"name="phone_num"type="text"pattern="\d{3}-\d{4}-\d{4}"placeholder="xxx-xxxx-xxxx"/>若輸入格式不符合正則表達(dá)式規(guī)定的格式，則給出相應(yīng)錯(cuò)誤提示。如果需要添加自定義提示，只需要添加title屬性即可。四、HTML5自帶表單驗(yàn)證——novalidate屬性HTML5加強(qiáng)了表單驗(yàn)證功能，可驗(yàn)證表單控件是否可空及輸入內(nèi)容的類型及格式是否合乎規(guī)定，還可通過(guò)為表單或控件設(shè)置novalidate屬性指定在提交表單時(shí)是否取消對(duì)表單或者某個(gè)控件進(jìn)行有效的檢查。為表單設(shè)置該屬性時(shí)，可以關(guān)閉整個(gè)表單的驗(yàn)證，這樣可以使form內(nèi)的所有表單控件不被驗(yàn)證。同樣，為指定的某個(gè)input控件設(shè)置該屬性時(shí)，則關(guān)閉該input控件的驗(yàn)證。<formaction=""method="get"novalidate><inputtype="text"name="user_name"required/><inputtype="number"name="user_age"/><inputtype="submit"/></form>以上表單內(nèi)的所有表單控件將不被驗(yàn)證。五、表單樣式的應(yīng)用——屬性選擇器的應(yīng)用表單中需要大量地使用<input>標(biāo)記，而且不同類型的input控件往往有不同的樣式，所以我們?cè)诙xCSS樣式表時(shí)經(jīng)常要定位到具體的某個(gè)或者某幾個(gè)input元素，這種情況下使用以前學(xué)過(guò)的選擇器效率不高。屬性選擇器是根據(jù)元素的屬性和屬性值來(lái)匹配元素，在為不帶有class或id的表單設(shè)置樣式時(shí)特別有用。input[type="text"]{width:150px;display:block;}input[type="button"]{width:120px;margin-left:35px;display:block;}5.1屬性選擇器的應(yīng)用——簡(jiǎn)單屬性選擇器如果希望選擇有某個(gè)屬性的元素，而不論屬性值是什么，可以使用簡(jiǎn)單屬性選擇器。例如把包含value屬性的所有元素變?yōu)榧t色，可以寫(xiě)作：*[value]{color:red;}把包含type屬性的input元素寬度都設(shè)成100px，可以寫(xiě)作：input[type]{width:100px;}還可以根據(jù)多個(gè)屬性進(jìn)行選擇。例如，要將同時(shí)有href和title屬性的HTML超鏈接的文本設(shè)置為紅色，可以這樣寫(xiě)：a[href][title]{color:red;}5.1屬性選擇器的應(yīng)用——根據(jù)具體屬性值選擇為了進(jìn)一步縮小選擇范圍，可以只選擇有特定屬性值的元素。例如，input[type=text]{color:red;}這種方法要求屬性與屬性值必須完全匹配。5.1屬性選擇器的應(yīng)用——根據(jù)部分屬性值選擇（了解）如果需要根據(jù)屬性值中的某個(gè)詞進(jìn)行選擇，可以使用波浪號(hào)（~）。例如，input[name="~stu"]，可以選取name屬性值包含stu的input元素。除此之外，還有更多的子串匹配屬性選擇器，常用的見(jiàn)下表。類型描述[abc^="def"]選擇abc屬性值以"def"開(kāi)頭的所有元素[abc$="def"]選擇abc屬性值以"def"結(jié)尾的所有元素[abc*="def"]選擇abc屬性值中包含子串"def"的所有元素5.2注冊(cè)登錄表單的設(shè)計(jì)一個(gè)好的web表單設(shè)計(jì)需要合理有層次的組織信息，設(shè)計(jì)清晰的瀏覽線，合理的標(biāo)簽、提示文字及按鈕的排布，避免不必要的信息重復(fù)出現(xiàn)，降低用戶的視覺(jué)負(fù)擔(dān)。一般來(lái)說(shuō)，要包括以下幾個(gè)部分：標(biāo)簽：告訴用戶這里應(yīng)該輸入的元素是什么，如：姓名、電話、地址；輸入域：可交互的輸入?yún)^(qū)域，如：文本框、選項(xiàng)框、下拉選擇、文件上傳；提示信息：提示信息是對(duì)標(biāo)簽進(jìn)行額外的信息描述，如：輸入信息的范例、填寫(xiě)幫助；反饋：告知用戶當(dāng)前操作可能或已出現(xiàn)的問(wèn)題，如：錯(cuò)誤提示、必填項(xiàng)提示等；動(dòng)作按鈕：動(dòng)作按鈕是在表單的結(jié)尾，如：提交、下一步、重置。標(biāo)簽輸入域提示信息驗(yàn)證反饋按鈕5.2注冊(cè)登錄表單的設(shè)計(jì)<body><divclass="container"><formaction="#">

<h3>用戶注冊(cè)</h3><span>用戶名</span><inputtype="text"name="username"required/><span>郵箱</span><inputtype="email"name="email"requiredplaceholder="xxx@"/><span>手機(jī)號(hào)</span><inputtype="tel"name="tel"><span>網(wǎng)址</span><inputtype="url"name="url"><span>所在城市</span><selectname="city"><optionvalue="0">北京</option><optionvalue="1">上海</option><optionvalue="2">杭州</option><optionvalue="3">濟(jì)南</option><optionvalue="4">深圳</option></select><inputtype="submit"/></form></div></body>5.2注冊(cè)登錄表單的設(shè)計(jì)<style>*{margin:0;padding:0;}.container{wi