網(wǎng)頁設(shè)計基礎(chǔ)與實戰(zhàn)課件

第5章表單與表單效果設(shè)計5.1添加表單5.2表單標(biāo)簽5.3美化表單了解表單各標(biāo)簽與屬性掌握<input>標(biāo)簽的type屬性值及含義掌握表單的基本使用引言進(jìn)入一個新的網(wǎng)站后，用戶通常需要進(jìn)行注冊或登錄驗證，這就需要使用到表單。網(wǎng)站中的用戶登錄、注冊頁面，以及一些收集用戶反饋信息的調(diào)查表，就是通過表單制作的。表單作為用戶與網(wǎng)頁之間重要的交互工具，了解和掌握表單的應(yīng)用是十分重要的。5.1添加表單表單概述案例—用戶登錄表單<input>標(biāo)簽<form>標(biāo)簽5.1添加表單5.1.1表單概述表單是網(wǎng)頁中常用的一種展示效果，如登錄頁面中的用戶名和密碼的輸入、登錄按鈕等都是用表單的相關(guān)標(biāo)簽定義的。表單是HTML中獲取用戶輸入的手段，它的主要功能是收集用戶的信息，并將這些信息傳遞給后臺服務(wù)器，實現(xiàn)用戶與Web服務(wù)器的交互。HTML中，一個完整的表單通常由表單元素、提示信息和表單域3個部分組成，下面將詳細(xì)介紹這3個部分。表單元素：包含表單的具體功能項，如文本輸入框、下拉列表框、復(fù)選框、密碼輸入框、登錄按鈕等。提示信息：表單中通常還需包含一些說明性的文字，提示用戶要進(jìn)行的操作。表單域：用來容納表單控件和提示信息，可以通過它定義處理表單數(shù)據(jù)所用程序的URL地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果未定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。5.1添加表單5.1.1表單概述表單元素是表單的核心，常用的表單元素如表所示。表單元素含義<input>表單輸入框,可定義多種控件類型,例如text（單行文本框）、password（密碼文本框）、radio（單選框）、checkbox（復(fù)選框）、button（按鈕）、submit（提交按鈕）、reset（重置按鈕）、hidden（隱藏域）、image（圖像域）、file（文件域）等<select>定義一個下拉列表（必須包含列表項）<textarea>定義多行文本框<label>定義表單輔助項5.1添加表單5.1.2<form>標(biāo)簽為了實現(xiàn)用戶與Web服務(wù)器的交互，需要讓表單中的數(shù)據(jù)傳送給服務(wù)器，這就必須定義表單域。定義表單域與<table>標(biāo)簽定義表格類似，HTML中<form>標(biāo)簽用于定義表單域，即創(chuàng)建一個表單，用來實現(xiàn)用戶信息的收集和傳遞，<form></form>標(biāo)簽中的所有內(nèi)容都會提交給服務(wù)器。<formaction="URL地址"method="數(shù)據(jù)提交方式">表單元素和提示信息</form>語法格式<form>標(biāo)簽的語法格式如下。5.1添加表單5.1.2<form>標(biāo)簽action屬性可定義表單數(shù)據(jù)的提交地址，即一個URL地址。HTML表單要想和服務(wù)器進(jìn)行連接，就需要在action屬性上設(shè)置一個URL。例如，兩個人要打電話就必須要知道對方的電話號碼，URL就相當(dāng)于電話號碼。action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器的URL地址。標(biāo)簽屬性1.action屬性5.1添加表單5.1.2<form>標(biāo)簽method屬性規(guī)定如何發(fā)送表單數(shù)據(jù)（表單數(shù)據(jù)發(fā)送到action屬性所規(guī)定的頁面）。表單數(shù)據(jù)有常用的get（默認(rèn)）和post兩種提交方式，表單數(shù)據(jù)可以作為URL變量（method="get"）或者HTTPpost（method="post"）的方式來發(fā)送。使用get提交方式傳輸數(shù)據(jù)的效果如圖所示。標(biāo)簽屬性2.method屬性5.1添加表單5.1.2<form>標(biāo)簽一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務(wù)器只接受其中一種方法提供的數(shù)據(jù)，可以在<form>標(biāo)簽的method屬性中指明表單處理服務(wù)器要使用get方式還是post方式來處理數(shù)據(jù)。get方式與post方式的區(qū)別如表所示。標(biāo)簽屬性2.method屬性get方式post方式傳輸方式通過地址欄傳輸通過報文傳輸傳送長度參數(shù)有長度限制（受限于URL長度）參數(shù)無長度限制數(shù)據(jù)包產(chǎn)生1個TCP數(shù)據(jù)包產(chǎn)生2個TCP數(shù)據(jù)包信息安全度參數(shù)會直接暴露在URL中，信息安全度不高，不能用來傳遞敏感信息信息安全度相對較好兩種方式都是向服務(wù)器提交數(shù)據(jù)，并從服務(wù)器獲取數(shù)據(jù)5.1添加表單5.1.2<form>標(biāo)簽enctype屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進(jìn)行編碼。enctype屬性可取值為application/x-www-form-urlencoded、multipart/form-data和text/plain，其屬性值的具體說明如表所示。標(biāo)簽屬性3.enctype屬性屬性值說明application/x-www-form-urlencoded在發(fā)送到服務(wù)器之前，所有字符都會進(jìn)行編碼（空格轉(zhuǎn)換為"+"加號，特殊符號轉(zhuǎn)換為ASCIIHEX值）multipart/form-data不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。text/plain空格轉(zhuǎn)換為"+"加號，但不對特殊字符編碼5.1添加表單5.1.2<form>標(biāo)簽target屬性定義提交地址的打開方式，常用的打開方式有_self（默認(rèn)）和_blank。_self可在當(dāng)前也打開，_blank可在新頁面打開，<form>標(biāo)簽中的target屬性與<a>標(biāo)簽中的target屬性樣，這里不再贅述。標(biāo)簽屬性4.target屬性5.1添加表單5.1.3

<input>標(biāo)簽<input>標(biāo)簽用于搜集用戶信息，是一個單標(biāo)簽。網(wǎng)頁中經(jīng)常會包含有單行文本框、密碼文本框、單選框、提交按鈕等，要想定義這些表單元素就需要使用<input>標(biāo)簽。<inputtype="控件類型">語法格式<input>標(biāo)簽的語法格式如下。5.1添加表單5.1.3

<input>標(biāo)簽<input>標(biāo)簽通過type屬性的取值不同，可以展現(xiàn)出不同的表單控件類型，如text單行文本框、password密碼文本框、submit重置按鈕等。在網(wǎng)頁中收集用戶信息時，部分信息通常會有嚴(yán)格地限制，不能由用戶自行輸入而只能進(jìn)行選擇，這就需要使用到radio單選框或checkbox復(fù)選框。<input>表單控件說明如表所示。type屬性屬性值說明text單行文本框?？梢暂斎肴魏晤愋偷奈谋?，如文字、數(shù)字等，輸入的內(nèi)容以單行顯示。例<inputtype="text"name=""value="">password密碼文本框。定義密碼字段，該字段中的字符被掩碼。例<inputtype="password"name=""value="">button普通按鈕。定義可點擊的按鈕。例<inputtype="button"name=""value="">submit提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。例<inputtype="submit"name=""value="">5.1添加表單5.1.3

<input>標(biāo)簽續(xù)表。type屬性屬性值說明reset重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。例<inputtype="reset"name=""value="">radio單選框。多個name屬性值相同的單選框控件可組合在一起，讓用戶進(jìn)行選擇，單選框只能選擇1個選項，不能多選。例<inputtype="radio"name=""value="">checkbox復(fù)選框。多個name屬性值相同的復(fù)選框控件可組合在一起，讓用戶進(jìn)行選擇，復(fù)選框允許選擇多個選項。值得注意的是，一組單選框或復(fù)選框中，name屬性值必須相同。例<inputtype="checkbox"name=""value="">hidden隱藏域。可用于隱藏往后臺服務(wù)器發(fā)送的一些數(shù)據(jù)，如正在被請求或編輯的內(nèi)容的ID名。隱藏域是一種不影響頁面布局的表單控件。值得注意的是，盡量不要將重要信息上傳至隱藏域，避免信息泄露。例<inputtype="hidden"name="">file文本域?？捎糜谏蟼魑募?，用戶可以選擇1個或多個元素以提交表單的方式上傳到服務(wù)器上，如文檔文件上傳和圖片文件上傳。例<inputtype="file"name="">值得注意的是，使用文件域時，<form>標(biāo)簽的method屬性值必須設(shè)置成post，enctype屬性值必須設(shè)置成multipart/form-data。5.1添加表單5.1.3

<input>標(biāo)簽文件域不僅支持<input>元素共享的公共屬性，還支持自身的一些特定屬性，如accept、capture、multiple和files。文件域的特定屬性具體說明如表所示。type屬性屬性說明accept文件域允許接受的文件類型，多種文件類型以逗號（,）為分隔capture捕獲圖像或視頻數(shù)據(jù)的源multiple允許用戶選擇多個文件filesFileList列出已選擇的文件5.1添加表單5.1.3

<input>標(biāo)簽<input>標(biāo)簽除了type屬性之外，還有一些常用屬性，如name屬性、placeholder屬性、disabled屬性、readonly屬性、checked屬性等。<input>標(biāo)簽其他常用屬性的說明如表所示。其他常用屬性屬性說明name規(guī)定<input>元素的名稱，提交給服務(wù)器端。name屬性值通常與value屬性值配合成一對使用，后臺服務(wù)器可通過name值找到對應(yīng)的value值value規(guī)定<input>元素的值，提交給服務(wù)器端placeholder輸入框提示文本readonly定義元素內(nèi)容為只讀（不能修改編輯）disabled禁用。定義該元素不可用（顯示為灰色），提交表單時不會被提交給服務(wù)器5.1添加表單5.1.3

<input>標(biāo)簽續(xù)表。其他常用屬性屬性說明checked默認(rèn)選擇項。定義選擇元素被默認(rèn)選中的項，適用于單選框和多選框required必填項。提交時寫有該屬性的<input>標(biāo)簽沒有填寫內(nèi)容，則會提示此為必填項size寬度。設(shè)置輸入框的寬度maxlength最大長度。設(shè)置輸入框的最大長度5.1添加表單5.1.3

<input>標(biāo)簽<label>標(biāo)簽是定義<input>元素的標(biāo)記，可用來輔助表單元素，更好地提高用戶體驗感。當(dāng)用戶選擇<label>標(biāo)簽內(nèi)的文本進(jìn)行單擊時，會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。<label>標(biāo)簽中的for屬性指出當(dāng)前文本標(biāo)簽與哪個元素關(guān)聯(lián)，其屬性值一定要與<input>標(biāo)簽中的id屬性值相同才能找到相應(yīng)控件。<label>標(biāo)簽5.1添加表單5.1.3

<input>標(biāo)簽創(chuàng)建一個基本的表單，在表單域中添加一個單行文本框、密碼框、單選框和提交按鈕控件。演示說明<body><!--添加表單域，并在<form>標(biāo)簽中添加相關(guān)屬性--><formaction=""method="get"target="_self"><!--為表單添加標(biāo)記，for屬性關(guān)聯(lián)單行文本框--><labelfor="use">姓名：</label>

<!--添加單行文本框控件，設(shè)置相關(guān)屬性，如輸入框提示文本、必選項等--><inputtype="text"name="user"value=""id="use"placeholder="輸入用戶名"required><br><labelfor="word">密碼：</label>

<!--添加密碼框控件，設(shè)置相關(guān)屬性，如輸入框提示文本、必選項、輸入框長度等--><inputtype="password"name="pass"value=""id="word"placeholder="輸入密碼"size="15"required><br>

<!--添加單選框控件，name屬性值必須一致。為了避免發(fā)生漏選問題，可添加checked屬性，即此值為默認(rèn)選中-->性別：<inputtype="radio"name="gender"value=""id="man"checked><labelfor="man">男</label><inputtype="radio"name="gender"value=""id="woman"><labelfor="woman">女</label><br>

<!--添加提交按鈕控件，將數(shù)據(jù)提交給服務(wù)器--><inputtype="submit"name="but"value="提交"></form></body>主體代碼

例5.15.1添加表單5.1.3

<input>標(biāo)簽創(chuàng)建一個基本的表單，在表單域中添加一個單行文本框、密碼框、單選框和提交按鈕控件。表單的運行效果如圖。演示說明由于單行文本框和密碼框設(shè)置required屬性，為必填項，當(dāng)密碼框未填寫內(nèi)容時，單擊提交按鈕控件，會出現(xiàn)提示文字要求必須填寫內(nèi)容，此時數(shù)據(jù)不會傳輸至服務(wù)器。5.1添加表單5.1.4案例-用戶登錄表單本實例是一個用戶登錄表單頁面。該頁面由<input>標(biāo)簽中的文本框、密碼框和提交按鈕控件，以及<div>塊元素、<ul>無序列表、<a>超鏈接、<img>圖像標(biāo)簽、<p>段落標(biāo)簽和<span>內(nèi)聯(lián)元素構(gòu)成，登錄頁面結(jié)構(gòu)簡圖如圖所示。<body><!--制作一個登錄頁面--><divid="login">

<!--頁面頭部--><divclass="header"><ulclass="pass">

<li><ahref="#">密碼登錄</a><spanclass="line">|</span></li><li><ahref="#">驗證碼登錄</a></li></ul></div>

<!--頁面主體--><divclass="main"><!--表單部分--><divclass="form">

<!--添加一個單行文本框和密碼框--><inputtype="text"name="user"placeholder="手機(jī)號/昵稱/郵箱"><inputtype="password"name="pass"placeholder="密碼"></div>代碼實現(xiàn)5.1添加表單5.1.4案例-用戶登錄表單主體代碼

例5.2

<!--登錄協(xié)議--><pclass="agree">登錄即同意<ahref="#">用戶協(xié)議、隱私政策</a></p>

<!--添加一個登錄按鈕--><divclass="but"><inputtype="submit"value="登錄"></div>

<!--注冊和忘記密碼選項--><ulclass="register">

<li><ahref="#">立即注冊</a></li><li><ahref="#">忘記密碼</a></li></ul></div>

<!--頁面底部--><divclass="footer"><!--其他方式登錄--><ul>

<li><imgsrc="../image/wechat.png"alt></li><!--此處省略雷同代碼--></ul></div></div></body>5.1添加表單5.1.4案例-用戶登錄表單代碼實現(xiàn)在上述主體代碼中，為頁面的3個部分分別添加內(nèi)容。頁面頭部為登錄方式提示，在塊元素中嵌套無序列表，2個列表項目中各有1個超鏈接。頁面主體部分分為4個子模塊，表單部分有1個單行文本框和密碼框，登錄協(xié)議部分的<p>段落標(biāo)簽中嵌入<a>超鏈接，登錄按鈕部分是1個提交按鈕控件，注冊和忘記密碼部分是1個無序列表中嵌入<a>超鏈接。頁面底部是其他登錄方式，無序列表中有5個項目列表，每個項目列表中嵌入1張圖片。/*為整個頁面中的<li>項目列表、<a>超鏈接和<input>控件設(shè)置統(tǒng)一樣式*/li{list-style:none;/*取消項目列表樣式*/}a{text-decoration:none;/*取消超鏈接的文本修飾*/}input{border:none;/*去除控件邊框*/margin-top:20px;outline:none;/*當(dāng)獲取文本框焦點時，去掉邊框效果*/}/*設(shè)置登錄頁面*/#login{border:1pxsolid#aaa;/*設(shè)置邊框*/margin:30pxauto;/*上、下外邊距設(shè)置30px，左右處于居中位置*/}/*設(shè)置2個登錄標(biāo)題的父元素列表塊*/.pass{width:255px;margin:0auto;

overflow:hidden;/*清除浮動影響*/}.pass>li{

line-height:50px;/*設(shè)置行高，行高與高的值相等，可使里面的內(nèi)容居中*/float:left;/*設(shè)置左浮動*/}代碼實現(xiàn)5.1添加表單5.1.4案例-用戶登錄表單CSS部分代碼

例5.2/*選取第一個項目列表中的超鏈接*/.pass>li:first-childa{

font-weight:700;/*字體加粗*/}/*設(shè)置輸入框提示文本的樣式*/.forminput::placeholder{color:#666;font-size:15px;}/*設(shè)置立即注冊和忘記密碼部分*/.register{width:250px;margin:20pxauto0;

overflow:hidden;/*清除浮動影響*/}.registerli{

float:left;/*設(shè)置左浮動*/padding:5px30px;/*設(shè)置內(nèi)邊距*/}/*設(shè)置頁腳部分中的無序列表塊*/.footerul{

overflow:hidden;/*清除浮動*/}/*設(shè)置無序列表中的項目列表*/.footerli{float:left;margin:15px15px;}5.1添加表單5.1.4案例-用戶登錄表單代碼實現(xiàn)在上述CSS代碼中，主要設(shè)計登錄頁面的整體的樣式，以及對表單控件進(jìn)行美化。首先，為整個頁面中的<li>項目列表、<a>超鏈接和<input>控件設(shè)置統(tǒng)一樣式，取消<input>控件的邊框和邊框效果。然后利用:first-child結(jié)構(gòu)偽類選擇器選取標(biāo)題里的第1個項目列表中的超鏈接，使用font-weight屬性加粗標(biāo)題，再利用input::placeholder選取輸入框提示文本，改變提示文本樣式。本節(jié)小結(jié)本節(jié)內(nèi)容講解了表單的構(gòu)成和<form>標(biāo)簽各個屬性，以及<input>表單控件說明，還有<input>標(biāo)簽的相關(guān)屬性。通過本節(jié)的學(xué)習(xí)，希望讀者可以了解表單的特性，以及掌握單行文本框、密碼框和提交按鈕控件的使用。5.2表單標(biāo)簽<select>標(biāo)簽案例—登錄頁滿意度調(diào)查表<fieldset>標(biāo)簽<textarea>標(biāo)簽5.2表單標(biāo)簽5.2.1<select>標(biāo)簽<select>標(biāo)簽可定義表單中的下拉列表。網(wǎng)頁中經(jīng)常會看到多個選項的下拉菜單，如選擇城市、日期、科目等。在<select>標(biāo)簽中包含一個或多個<option>標(biāo)簽，<option>標(biāo)簽可創(chuàng)建選擇項。<select>標(biāo)簽需要與<option>標(biāo)簽配合使用，這個特點與列表一樣，如無序列表是由<ul>標(biāo)簽和<li>標(biāo)簽配合使用，為了更好地理解，可將下拉列表看作一個特殊的無序列表。5.2表單標(biāo)簽5.2.1<select>標(biāo)簽<select>標(biāo)簽的基本語法格式如下所示。語法格式<selectname="下拉列表的名稱"><optionvalue="選擇項1">選擇項1</option>......<optionvalue="選擇項n">選擇項n</option></select>值得注意的是，<select>標(biāo)簽中設(shè)置name屬性，每個<option>標(biāo)簽中設(shè)置value屬性，這樣是可方便服務(wù)器獲取選擇框，以及用戶獲取選擇項的值。如果在<option>標(biāo)簽里省略value值，則包含的文本就是選擇項的值。5.2表單標(biāo)簽5.2.1<select>標(biāo)簽<select>標(biāo)簽可通過定義屬性，改變下拉列表的外觀顯示效果。<select>標(biāo)簽的常用屬性有multiple屬性和size屬性，這2種屬性的具體說明如表所示。<select>標(biāo)簽屬性屬性說明multiple設(shè)置多選下拉列表。默認(rèn)下拉列表只能選擇一項，而設(shè)置multiple屬性后下拉列表可選擇多項（按住Ctrl鍵即可選擇多項）。多項下拉列表在選擇項的數(shù)目超過列表框的高度時，會顯示滾動條，通過拖動滾動條可查看并選擇多個選項size設(shè)置下拉列表可見選項的數(shù)目，取值為正整數(shù)5.2表單標(biāo)簽5.2.1<select>標(biāo)簽<option>標(biāo)簽的常用屬性有value、selected和disabled，可用于設(shè)置下拉列表中的各個選擇項。<option>標(biāo)簽的常用屬性具體說明如表所示。<option>標(biāo)簽屬性屬性說明value定義送往服務(wù)器的選項值selected默認(rèn)此選項（首次顯示在列表中時）表現(xiàn)為選中狀態(tài)disabled規(guī)定此選項應(yīng)在首次加載時被禁用在<select>標(biāo)簽和<option>標(biāo)簽之間，可以使用<optgroup>標(biāo)簽對選擇項進(jìn)行分組操作，即把相關(guān)選擇項組合在一起。<optgroup>標(biāo)簽的label屬性可以用來設(shè)置分組項的標(biāo)題。5.2表單標(biāo)簽5.2.1<select>標(biāo)簽制作一個下拉列表，在表單中定義單選下拉列表和多選下拉列表，在單選下拉列表中使用selected屬性設(shè)置默認(rèn)選中值，在多選下拉列表中使用<optgroup>標(biāo)簽對選擇項進(jìn)行分組操作。演示說明<body><form><p>您目前所在的年級是<labelfor="clas">

<!--定義單選下拉列表-->

<selectname="grade"id="clas"><optionvalue="one">大一</option><optionvalue="two">大二</option>

<!--selected屬性將“大三”設(shè)置為默認(rèn)選中值--><optionvalue="third"selected>大三</option><optionvalue="four">大四</option></select></label></p>

主體代碼

例5.3<p>您目前所學(xué)科目有<labelfor="subject">

<!--定義多選下拉列表--><selectname="course"id="subject"

multiple>

<!--利用<optgroup>標(biāo)簽對選擇項進(jìn)行分組操作-->

<optgrouplabel="前端"><optionvalue="html">HTML</option><optionvalue="css">CSS</option>

</optgroup>

<optgrouplabel="后端"><optionvalue="java">JAVA</option><optionvalue="php">PHP</option>

</optgroup></select></label></p></form></body>5.2表單標(biāo)簽5.2.1<select>標(biāo)簽制作一個下拉列表，在表單中定義單選下拉列表和多選下拉列表，在單選下拉列表中使用selected屬性設(shè)置默認(rèn)選中值，在多選下拉列表中使用<optgroup>標(biāo)簽對選擇項進(jìn)行分組操作。運行效果如圖。演示說明5.2表單標(biāo)簽5.2.2

<textarea>標(biāo)簽<textarea>標(biāo)簽定義多行文本框（文本域），用戶可在多行文本框內(nèi)輸入多行文本。文本區(qū)域內(nèi)可容納無限數(shù)量的文本，文本的默認(rèn)字體是等寬字體（通常是Courier）?？梢酝ㄟ^cols和rows屬性來規(guī)定多行文本框的尺寸，不過更好的辦法是使用CSS的height和width屬性。多行文本框的語法格式如下。語法格式<textareaname="文本框名稱"rows="文本框行數(shù)"cols="文本框列數(shù)"></textarea>5.2表單標(biāo)簽5.2.2

<textarea>標(biāo)簽<textarea>標(biāo)簽的常用屬性有name、rows和cols，這些屬性的具體說明如表所示。標(biāo)簽屬性屬性說明name定義多行文本框的名稱，這項必不可省，因為存儲文本的時候必須用到rows定義多行文本框的水平列，表示可顯示的行數(shù)cols定義多行文本框的垂直列，表示可顯示的列數(shù)，即一行中可容納下的字節(jié)數(shù)autofocus規(guī)定在頁面加載后文本區(qū)域自動獲得焦點5.2表單標(biāo)簽5.2.3

<fieldest>標(biāo)簽<fieldset>標(biāo)簽可將表單內(nèi)的相關(guān)元素進(jìn)行分組，并繪制邊框。<legend>標(biāo)簽包含于<fieldset>標(biāo)簽內(nèi)，用于定義分組表單的標(biāo)題。<fieldset>標(biāo)簽可以使表單域變得層次清晰，更易于用戶理解。5.2表單標(biāo)簽5.2.3

<fieldest>標(biāo)簽通過一個表單分組對<fieldset>標(biāo)簽進(jìn)行演示說明，制作一個賬號注冊和郵箱注冊分組。演示說明<body><formaction="#"method="post">

<fieldset>

<legend>賬號注冊</legend><labelfor="ming">賬戶名</label><inputtype="text"name="ming"id="ming"><br><labelfor="word">密碼</label><inputtype="password"name="pass"id="word">

</fieldset>

<fieldset>

<legend>郵箱注冊</legend><labelfor="mail">郵箱賬號</label><inputtype="email"name="mail"id="mail"><br><labelfor="tell">電話</label><inputtype="tel"name="tell"id="tell">

</fieldset></form></body>主體代碼

例5.45.2表單標(biāo)簽5.2.3

<fieldest>標(biāo)簽通過一個表單分組對<fieldset>標(biāo)簽進(jìn)行演示說明，制作一個賬號注冊和郵箱注冊分組。運行效果如圖。演示說明5.2表單標(biāo)簽5.2.4案例-登錄頁滿意度調(diào)查表本實例是一個登錄頁滿意度調(diào)查表的頁面。該頁面主要由表單中的<select>下拉列表和<textarea>多行文本框，<input>標(biāo)簽中的單選框和復(fù)選框，以及<div>塊元素、<img>圖像標(biāo)簽、<hr>水平線標(biāo)簽、<p>段落標(biāo)簽、<span>內(nèi)聯(lián)元素、<label>標(biāo)簽和<h2>標(biāo)題標(biāo)簽構(gòu)成。登錄頁面結(jié)構(gòu)簡圖如圖所示。<body><divid="question"><!--定義頁面標(biāo)題--><h2><imgsrc="../image/xing.jpg"alt>登錄頁滿意度調(diào)查</h2><!--添加水平線--><hrcolor="#f07801"size="4"><!--頁面的說明文字--><divclass="question_foreword"><p>尊敬的用戶，您好：<br><!--此處省略雷同代碼--></p></div>

<!--頁面問題信息--><divclass="question_info">

<divid="contain-1"><h4>1、到目前為止，您的使用年限是

<!--定義下拉列表--><selectname="time"><!--此處省略雷同代碼-->

<optionvalue="second"selected>1-2年</option>

</select>

</h4></div><divid="contain-2"><h4>2、您對登錄頁面的滿意度如何？</h4><divclass="question_text-2">

<!--定義單選框--><p><inputtype="radio"name="degree">非常滿意</p>

<!--此處省略雷同代碼--></div></div>代碼實現(xiàn)5.2表單標(biāo)簽5.2.4案例-登錄頁滿意度調(diào)查表主體代碼

例5.5

<divid="contain-3"><h4>3、您對登錄頁面的感覺如何？</h4><divclass="question_text-3">

<!--定義復(fù)選框--><p><inputtype="checkbox"name="feel">方便</p><!--此處省略雷同代碼--></div></div><divid="contain-4"><h4>4、請大聲說出您對登錄頁的想法（例如：哪里有問題，哪些功能做得不夠好等）</h4><divclass="question_text-4"><!--定義多行文本框--><textareaname="idea"placeholder="請說出您的想法"></textarea><spanclass="tips">(200字以內(nèi),還可以輸入200個字)</span></div></div></div><divclass="btn"><!--定義提交按鈕--><label><inputtype="submit"value="提交問卷"></label></div></div></body>5.2表單標(biāo)簽5.2.4案例-登錄頁滿意度調(diào)查表代碼實現(xiàn)在上述主體代碼中，頭部部分定義頁面標(biāo)題，以及附上頁面說明文字，標(biāo)題包括圖標(biāo)和文本。接下來是頁面的主體部分——頁面問題信息，有4個模塊，分別是下拉列表、單選框、復(fù)選框和多行文本框，為這4個問題模塊分別定義標(biāo)題和問題內(nèi)容。最后為底部部分添加頁面的提交按鈕。/*設(shè)置頁面標(biāo)題前的圖標(biāo)*/#questionh2img{

vertical-align:middle;/*圖文混排時，文字與圖片中間對齊*/}/*設(shè)置下拉列表*/#contain-1h4select{

border-width:2px;/*設(shè)置邊框?qū)挾?/font-weight:700;/*設(shè)置文字加粗*/}/*設(shè)置單選框和復(fù)選框的樣式*/.question_text-2p,.question_text-3p{margin:7pxauto;/*設(shè)置上下外邊距為7px，左右自適應(yīng)，處于居中位置*/font-size:15px;/*設(shè)置文字大小*/}/*設(shè)置多行文本框*/.question_text-4textarea{

width:500px;/*利用width和height屬性，設(shè)置多行文本框的尺寸*/height:100px;color:#404040;/*設(shè)置文字顏色*/

border:1pxsolid#ccc;/*設(shè)置邊框樣式*/

margin:8px0020px;/*設(shè)置上、右、下、左外邊距*/}/*設(shè)置多行文本框外部提示文字*/.tips{

display:block;/*將span內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素*/padding-left:20px;/*設(shè)置左內(nèi)邊距*/}代碼實現(xiàn)5.2表單標(biāo)簽5.2.4案例-登錄頁滿意度調(diào)查表CSS部分代碼

例5.5/*設(shè)置提交按鈕的父級元素塊*/.btn{width:100%;height:50px;

position:relative;/*設(shè)置相對定位*/}/*統(tǒng)一設(shè)置<label>標(biāo)簽和<input>標(biāo)簽*/.btnlabel,.btninput{display:block;/*轉(zhuǎn)化為塊元素*/line-height:38px;/*行高與高相等，文本居中*/

position:absolute;/*設(shè)置絕對定位，將元素定位點正中心*/left:0;right:0;top:0;bottom:0;margin:auto;}/*設(shè)置提交按鈕*/.btninput{background-color:#f89815;

border:none;/*取消邊框*/font-size:16px;color:#303040;}5.2表單標(biāo)簽5.2.4

案例-登錄頁滿意度調(diào)查表代碼實現(xiàn)在上述CSS代碼中，首先設(shè)置整個調(diào)查表頁面，規(guī)定寬度、高度和外邊距，再設(shè)置標(biāo)題位于居中位置，利用vertical-align屬性使文字與圖片中間對齊，然后為頁面說明文字設(shè)置外邊距、字號和行高。接下來是4個問題信息模塊的樣式設(shè)置，首先為4個問題信息的父元素塊設(shè)置寬度、高度、背景顏色和邊框效果，再統(tǒng)一設(shè)置4個問題信息模塊的寬度和外邊距，這樣是為了統(tǒng)一它們之間的距離，讓頁面更規(guī)整與美觀。然后分別設(shè)置下拉列表、單選框、復(fù)選框和多行文本框的樣式，以及多行文本框外部提示文字的樣式。最后一步是設(shè)置底部的提交按鈕，首先為提交按鈕的父級元素添加相對定位，然后為<label>標(biāo)簽與<input>的提交按鈕控件添加絕對定位，并將它們定位到父級元素的正中心，取消按鈕的邊框，再使用CSS屬性設(shè)置其他樣式，完成整個頁面的樣式設(shè)置。本節(jié)小結(jié)本節(jié)內(nèi)容主要講解了<select>下拉列表和<textarea>多行文本框以及它們的屬性。通過本節(jié)的學(xué)習(xí)，希望讀者可以了解表單的應(yīng)用場合，掌握下拉列表和多行文本框的使用。5.3美化表單新增表單控件案例—退款申請表單box-shadow屬性border-radius屬性background-size屬性5.3

美化表單5.3.1新增表單控件在HTML5中，表單新增了多個input輸入類型，例如，圖像、郵箱、電話、日期等，這些新增的表單控件，可以更好地實現(xiàn)輸入控制以及驗證。<input>標(biāo)簽新增的type屬性值，即新增的部分表單控件具體說明如表所示。屬性值說明image可定義圖像形式的提交按鈕。需要結(jié)合src屬性和alt屬性使用，src屬性定義圖片的來源，alt屬性定義當(dāng)圖片無法顯示時的提示文字。例<inputtype="image"src="圖片地址"alt="提示文字">email限制用戶輸入必須為郵箱類型。例<inputtype="email"name=""value="">number限制用戶輸入必須為數(shù)字類型。例<inputtype="number"name=""value="">url限制用戶輸入必須為url地址。例<inputtype="url"name=""value="">tel限制用戶輸入必須為電話號碼類型。例<inputtype="tel"name=""value="">search限制用戶輸入必須為搜索框關(guān)鍵詞。例<inputtype="search"name=""value="">5.3

美化表單5.3.1新增表單控件續(xù)表。屬性值說明color定義拾色器，規(guī)定顏色。例<inputtype="color"name=""value="顏色值（初始值）">date限制用戶輸入必須為日期類型，選取日、月、年。例<inputtype="date"name=""value="">month限制用戶輸入必須為月類型，選取月、年例<inputtype="month"name=""value="">week限制用戶輸入必須為周類型，選取周、年。例<inputtype="week"name=""value="">time限制用戶輸入必須為時間類型，選取小時、分鐘。例<inputtype="time"name=""value="">5.3美化表單5.3.2

border-radius屬性border-radius屬性是CSS3的一個新屬性，可為元素添加圓角效果，長度值可以是px、%、em等。border-radius屬性中的數(shù)值代表一個圓形的半徑，這個圓形與元素相切就形成了圓角的大小，屬性值越大，圓角越明顯。例如一個寬100px、高100px的正方形塊元素，將border-radius屬性值設(shè)為50px（border-radius:50px），可轉(zhuǎn)變成一個圓形。5.3美化表單5.3.2border-radius屬性border-radius屬性與margin、padding屬性相似，border-radius屬性是其相關(guān)屬性border--top-left-radius左上角、border--top-right-radius右上角、border--bottom-right-radius右下角和border--bottom-left-radius左下角的簡寫。border-radius屬性的值可以通過復(fù)合寫法有多種設(shè)置方式。border-radius屬性的語法格式如下。語法格式border-radius:左上角右上角右下角左下角border-radius:左上角右上角和左下角右下角border-radius:左上角和右下角右上角和左下角border-radius:四個角5.3美化表單5.3.3

box-shadow屬性box-shadow屬性是CSS3的一個新特性，可為元素添加一個或多個陰影效果。box-shadow屬性的語法格式如下。語法格式box-shadow:h-shadowv-shadowblurspreadcolorinset;5.3

美化表單5.3.3box-shadow屬性box-shadow屬性的屬性值說明如表所示。屬性值說明h-shadow必需。設(shè)置水平陰影的位置，允許負(fù)值v-shadow必需。設(shè)置垂直陰影的位置，允許負(fù)值blur可選。設(shè)置陰影模糊距離。在原有的陰影長度上增加模糊度，數(shù)值越大越模糊，模糊范圍也越大，如同吹氣球的效果spread可選。設(shè)置陰影的尺寸?？蓪υO(shè)置好的陰影進(jìn)行局部放大color可選。設(shè)置陰影的顏色inset可選。將外部陰影(outset)改為內(nèi)部陰影5.3

美化表單5.3.4

background-size屬性background-size屬性是CSS3的一個新特性，用于設(shè)置背景圖像的尺寸。在CSS3中可以使用background-size屬性來設(shè)置背景圖像尺寸，這使得在不同環(huán)境中重復(fù)使用背景圖片成為可能。background-size屬性值可設(shè)置為長度值、百分比值、cover、contain等，其屬性值的具體說明如表所示。屬性值說明長度值可設(shè)置圖像的寬度和高度，常用單位為px百分比值以父元素的百分比來設(shè)置背景圖像的寬度和高度，單位為%cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域，背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域5.3

美化表單5.3.5

案例-退款申請表單本實例是一個退款申請表單的頁面。該頁面主要由表單中的<select>下拉列表和<textarea>多行文本框，<input>標(biāo)簽中的單選框、數(shù)字輸入框、隱藏域、單行文本框、文件域、日期輸入框和圖像按鈕，以及<div>塊元素、<ul>無序列表、<img>圖像標(biāo)簽、<p>段落標(biāo)簽、<span>內(nèi)聯(lián)元素、<label>標(biāo)簽和<a>超鏈接構(gòu)成，退款申請表單頁面結(jié)構(gòu)簡圖如圖所示。<body><!--整個退款申請表單--><divid="apply">

<!--退款進(jìn)度列--><ulclass="bar"><li><ahref="#"><spanclass="order">1</span>買家申請退款</a></li><!--此處省略雷同代碼--></ul><!--退款詳情主體部分--><divclass="details">

<!--表單域-->

<formaction="#"method="post"enctype="multipart/form-data"><!--退款商品--><divclass="contain"><pclass="goods">退貨商品：<imgsrc="../image/goods.png"alt></p></div>

代碼實現(xiàn)5.3美化表單5.3.5

案例-退款申請表單主體代碼

例5.6

<!--單選框，選擇退款服務(wù)類型--><divclass="contain"><pclass="serve">服務(wù)類型：

<label><inputtype="radio"name="refund"id="allow">僅退款</label><label><inputtype="radio"name="refund"id="full">退貨退款</label></p></div>

<!--單選下拉列表，選擇退款原因--><divclass="contain"><pclass="reason">退款原因：

<selectname="item"required><option>多拍、錯拍、不想要</option><!--此處省略雷同代碼--></select></p></div>

<!--數(shù)字輸入框，輸入退款商品件數(shù)，初始值為1--><divclass="contain"><pclass="count">商品件數(shù)：

<inputtype="number"name="nub"value="1"></p></div>

<!--隱藏域，文本框，隱藏域向服務(wù)器發(fā)送金額數(shù)據(jù)，文本域輸入退款金額--><divclass="contain"><pclass="money">退款金額：

<inputtype="hidden"name="cash"value="317.00"><inputtype="text"name="num"required><spanclass="pay">（*填寫實際支付金額）</span></p></div>

<!--多行文本框，輸入退款說明--><divclass="contain"><pclass="explain">退款說明：

<textareaname="content"placeholder="退款說明"></textarea></p></div>

代碼實現(xiàn)5.3美化表單5.3.5

案例-退款申請表單主體代碼

例5.6

<!--文件域，上傳退款商品圖片--><divclass="contain"><pclass="file">上傳圖片：<aclass="upload">

<inputtype="file"name="up"accept="image/*"multiple></a></p></div>

<!--日期輸入框，選擇時間，年/月/日--><divclass="contain"><pclass="data">更新時間：

<inputtype="date"name="time"></p></div>

<!--圖像按鈕，定義圖像形式的提交按鈕--><divclass="photo">

<inputtype="image"src="../image/btn.png"alt="submit"></div></form></div></div></body>5.3美化表單5.3.5

案例-退款申請表單代碼實現(xiàn)在上述主體代碼中，頁面主要分為2個部分，頂部是退款進(jìn)度列，無序列表中有4個列表項目，每個列表項目中分別是超鏈接中嵌套1個<span>元素。主體部分是退款詳情表單域，主要分為9個模塊，分別是退款商品圖片、服務(wù)類型單選框、退款原因下拉列表、商品件數(shù)數(shù)字輸入框、退款金額單行文本框與隱藏域、退款說明多行文本框、上傳圖片文件域和更新時間日期輸入框，以及圖像提交按鈕。/*設(shè)置退款進(jìn)度條*/.bar{background-color:#bbb;

overflow:hidden;/*為父元素添加overflow屬性，清除浮動*/border-radius:10px;/*CSS3新特性，設(shè)置邊框圓角*/}/*設(shè)置退款進(jìn)度條中的項目列表*/.barli{width:175px;

list-style:none;/*取消項目列表標(biāo)記*/float:left;/*為項目列表添加左浮動*/border-radius:10px;/*CSS3新特性，設(shè)置邊框圓角*/}/*選取第一個項目列表*/.barli:first-child{background-color:#dd2727;/*設(shè)置背景顏色*/}/*設(shè)置項目列表中的序號*/.order{display:inline-block;height:22px;line-height:22px;/*設(shè)置行高，使其垂直居中*/color:#aaa;background-color:#fff;

border-radius:50%;/*CSS3新特性，設(shè)置邊框圓角*/margin-right:4px;/*設(shè)置右外邊距*/}代碼實現(xiàn)5.3美化表單5.3.5

案例-退款申請表單CSS部分代碼

例5.6/*設(shè)置退款詳情主體部分*/.details{

background-image:url("../image/1.jpg");background-size:cover;/*設(shè)置背景圖像尺寸，把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域*/border:1pxsolid#eee;/*添加邊框*/border-radius: