網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第9章 表單設(shè)計(jì)

第9章

表單設(shè)計(jì)單擊此處添加副標(biāo)題目錄表單概述01表單元素02HTML5新增表單類型03表單應(yīng)用049.1表單概述表單為訪問者提供了填寫信息的區(qū)域,從而可以收集客戶信息，使網(wǎng)頁(yè)具有交互功能。表單內(nèi)的信息被提交到服務(wù)器后，服務(wù)器的腳本或應(yīng)用程序（CGI腳本、ASP.NET,JSP,PHP等）能處理這些數(shù)據(jù)。表單的基本格式如下：<formid="form1"name="form1"method="post"action="a.php"><input>...<textarea></textarea>...<selcet></select></form>其中<form></form>為表單框架，里面可包含多個(gè)表單元素，例如輸入域<input>，文本域<textarea></textarea>、下拉列表<select></select>等。9.1表單概述<form>主要有以下幾個(gè)參數(shù)：1.name和id:表單名稱,定義了name和id后，腳本語(yǔ)言（Javascript）可以通過name屬性獲得表單，并對(duì)表單進(jìn)行控制。2.methond：用于指定表單向服務(wù)器提交數(shù)據(jù)的方式，有兩個(gè)選項(xiàng)值，get和post。由于get方式安全性較低，傳送的數(shù)據(jù)量較少，因此一般使用post的方式，在dreamweaver中，默認(rèn)的提交方式為post。3.action：用于指定處理表單數(shù)據(jù)的服務(wù)器端應(yīng)用程序，該程序可以是CGI腳本、ASP.NET,JSP,PHP等腳本。例如本例中，該表單數(shù)據(jù)提交給a.php頁(yè)面處理。9.2表單元素9.2.1輸入域<input><input>標(biāo)簽可以定義多種形式的輸入框，包括文本輸入框，密碼輸入框，隱藏輸入，文件上傳，單選按鈕和復(fù)選框。其格式為：

<form>

<inputname=""

type="

"maxlength=""value="">

</form>其中，name和type是必選的兩個(gè)屬性，name屬性的值是相應(yīng)程序中的變量名，type是輸入框的類型。9.2.1輸入域inputInput的type包括以下幾種：（1）type=”text”:文本框，表示該輸入項(xiàng)的輸入信息是字符串。此時(shí)，瀏覽器會(huì)在相應(yīng)的位置顯示一個(gè)文本框供用戶輸入信息。（2）type=”password”:密碼域，當(dāng)用戶在輸入內(nèi)容時(shí)，是用“*”來代替顯示每個(gè)輸入的字符，以保證密碼的安全性。（3）type="radio"：?jiǎn)芜x按鈕，使用單選按鈕時(shí)，一般有多個(gè)選項(xiàng)，這些選項(xiàng)應(yīng)該設(shè)置成同一個(gè)名字，即采用單選按鈕組的形式。（4）type=”checkbox”：復(fù)選框，可以同時(shí)選中多個(gè)。每個(gè)復(fù)選框都是獨(dú)立的元素，且必須有不同的name屬性值。和單選按鈕radio一樣，使用checked屬性表示選中狀態(tài)。（5）type="hidden"：隱藏域，指的是在網(wǎng)頁(yè)中不可見的一些信息，可以放到隱藏域里面。隱藏域只包含一個(gè)value屬性值，使用該屬性可以傳遞各種參數(shù)到服務(wù)器。9.2.1輸入域input（6）type="file":文件上傳?？梢詫⒈镜氐哪硞€(gè)文件以二進(jìn)制數(shù)據(jù)流的形式上傳至服務(wù)器。（7）type=“button”:表示按鈕，有三種類型：type=”button”:普通按鈕，可用于響應(yīng)js事件type=”submit”:提交按鈕，用于提交表單type=”reset”:重置按鈕，用于重置表單數(shù)據(jù)9.2.2文本區(qū)域<textarea>文本區(qū)域<textarea>是多行文本框，它允許用戶輸入多行內(nèi)容，主要應(yīng)用在留言板或者是聊天窗口中。其使用方法為單擊插入-表單-文本區(qū)域，即可得插入一個(gè)文本區(qū)域。文本區(qū)域的具體屬性包括以下幾個(gè)：rows：設(shè)置文本區(qū)域可見的行數(shù)，如果實(shí)際輸入超出了設(shè)置的值，將會(huì)以滾動(dòng)條顯示cols：設(shè)置文本區(qū)域可見的字符寬度。readonly：只讀屬性，用戶不能修改文本域的內(nèi)容，提交內(nèi)容時(shí)會(huì)將此項(xiàng)內(nèi)容提交到服務(wù)器。disable:設(shè)置該文本區(qū)域不可用，提交內(nèi)容時(shí)不會(huì)將此項(xiàng)提交到服務(wù)器。9.2.2文本區(qū)域<textarea>文本區(qū)域?qū)傩詗rap：wrap：定義輸入內(nèi)容大于文本設(shè)定寬度時(shí)的顯示方式，有三個(gè)值：默認(rèn)值：文本自動(dòng)換行，當(dāng)輸入值超過限定的寬度時(shí)，自動(dòng)跳轉(zhuǎn)到下一行；off:關(guān)閉自動(dòng)換行，當(dāng)輸入值到達(dá)最右邊界時(shí)，文本將向左滾動(dòng)，必須使用return，才能讓文本到下一行；virtule:允許自動(dòng)換行，當(dāng)輸入到達(dá)最右邊界時(shí)，會(huì)自動(dòng)換行；使用<select>和<option>組合，可以實(shí)現(xiàn)下拉列表框。具體方法為：?jiǎn)螕舨迦?表單-選擇，插入一個(gè)下拉列表，在屬性窗口中，單擊“列表值”，在彈出的“列表值”窗口中，輸入項(xiàng)目標(biāo)簽和值，例如“浙江”，單擊“+”，繼續(xù)添加其他省份，單擊確定。9.2.3下拉列表框<select>和<option>域集fieldset元素可將表單內(nèi)的相關(guān)元素分組，標(biāo)簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。當(dāng)一組表單元素放到<fieldset>標(biāo)簽內(nèi)時(shí)，可以通過設(shè)置fieldset的樣式，讓瀏覽器瀏覽器以特定的樣式顯示，例如設(shè)置邊界，3D邊框效果等。9.2.4域集（fieldset）下面的例子，實(shí)現(xiàn)了一個(gè)留言板的設(shè)計(jì)，如圖所示：9.2.5留言板設(shè)計(jì)9.2.5留言板設(shè)計(jì)操作步驟為：1.新建頁(yè)面liuyan.html,在頁(yè)面中插入一個(gè)div，設(shè)置div的寬度為500px,距離左邊為400px,上邊為100px，背景顏色為白色。同時(shí)設(shè)置頁(yè)面的背景圖片；2.在div內(nèi)，插入一個(gè)表單框架，里面使用表格布局，插入6行2列的表格，表格寬度為500px，依次合并單元格，并在表格內(nèi)插入文字內(nèi)容。3.在姓名右邊的單元格里面，插入文本框，在性別右邊的單元格里面，插入單選按鈕組，并設(shè)置保密選項(xiàng)為默認(rèn)選項(xiàng)。4.在e-mail右邊的單元格里面，插入文本框。5.在留言內(nèi)容右邊的單元格內(nèi)，插入文本域<textarea>，并設(shè)置文本域cols="40"，rows="8"。6.最后再插入一個(gè)提交按鈕，就完成了所有的表單元素插入。9.3HTML5新增表單對(duì)象9.3.1input新類型HTML5中新增了8種類型，它們是：1.電子郵件email類型用于輸入電子郵箱地址，該類型只允許輸入包含“@”字樣的標(biāo)準(zhǔn)電子郵箱格式的文本內(nèi)容。該輸入類型在表單元素form內(nèi)使用可用于驗(yàn)證用戶填寫的是否為正確的電子郵件地址，當(dāng)用戶提交表單時(shí)瀏覽器會(huì)自動(dòng)驗(yàn)證輸入域的值是否有效。2.URLURL類型用于顯示包含URL地址的輸入框。當(dāng)用戶提交表單時(shí)瀏覽器會(huì)自動(dòng)驗(yàn)證輸入框內(nèi)值是否有效。3.TelTel類型用于輸入電話號(hào)碼。該類型在PC端與普通單行文本輸入框text類型沒有任何區(qū)別，但是在手機(jī)移動(dòng)端使用該類型時(shí)會(huì)顯示數(shù)字鍵盤，提高了用戶的體驗(yàn)。4.搜索搜索類型用于顯示搜索域，它是專門為輸入搜索引擎關(guān)鍵詞定義的文本框，例如百度搜索、站內(nèi)搜索等。5.數(shù)字numbernumber類型用于顯示只能包含數(shù)值內(nèi)容的文本輸入框。9.3HTML5新增表單對(duì)象9.3.1input新類型6.范圍rangerange類型用于顯示包含數(shù)值范圍的滑動(dòng)條，用戶直接拖動(dòng)滑動(dòng)條上的點(diǎn)進(jìn)行數(shù)據(jù)值的選擇。一般使用max和min屬性限定數(shù)值的最大值和最小值范圍，用step屬性設(shè)置間隔步長(zhǎng)。窗體底端7.顏色colorcolor類型用于顯示顏色選擇器。打開的“顏色”對(duì)話框中，要先選一次左邊的基本顏色，“確定”看到有變化后，以后就可以選右邊的自定義顏色。Datepickers8.Datepickers為日期選擇器，具體包括：月，周，日期，時(shí)間，日期時(shí)間和日期時(shí)間（當(dāng)?shù)兀?.3.2HTML5新增表單屬性HTML5新增的表單屬性主要有以下幾種：autocompleteautocomplete屬性規(guī)定form或input域具有自動(dòng)完成功能。其屬性值可取“on”、“off"和““(不指定)這三種值。把該屬性值設(shè)為on時(shí)，可以顯示指定候補(bǔ)輸入的數(shù)據(jù)列表；設(shè)置為off時(shí)，表示不保存輸入值；設(shè)置為空“”時(shí)，使用瀏覽器的默認(rèn)值。placeholderplaceholder主要在輸入型控件中使用，可以設(shè)置當(dāng)用戶還沒有輸入值的時(shí)候，顯示描性說明或者提示信息。例如：<input

type="text"

placeholder="在此輸入">表示文本框還未有輸入時(shí)，顯示“在此輸入”字樣。autofocusautofocus屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)獲得焦點(diǎn)，autofocus屬性適用于所有input元素的類型。listlist屬性主要為單行文本框新增的屬性，該屬性的值為某個(gè)

<datalist>標(biāo)簽的

id，需要與數(shù)據(jù)列表datalist元素配合使用。9.3.2HTML5新增表單屬性min、maxmax、min屬性用于數(shù)字或日期類型的input元素，規(guī)定所允許的數(shù)值范圍。step對(duì)于輸入型控件，設(shè)置其

step屬性規(guī)定輸入值遞增或遞減的數(shù)字間隔。required必填項(xiàng)屬性，如果為某輸入型控件設(shè)置了required屬性，表示此項(xiàng)必鎮(zhèn)，否則無法提交表單。multiple該屬性可以允許input元素同時(shí)輸入多個(gè)值。用戶注冊(cè)使用表單來實(shí)現(xiàn)，一般需要用戶提供注冊(cè)名、密碼以及用戶的基本信息。下面的例子實(shí)現(xiàn)了一個(gè)用戶注冊(cè)的頁(yè)面，如圖所示：9.4表單應(yīng)用例子9.4表單應(yīng)用例子表單建立的操作步驟為：新建頁(yè)面，并保存為regist.html。在設(shè)計(jì)視圖中，單擊、“插入”--“表單”，插入一個(gè)表單框架。單擊“插入”--“表單”--“域集”，插入一個(gè)域集（fieldset），并設(shè)置域集的標(biāo)簽（legend）為用戶注冊(cè)。在新的一行里，單擊“插入”--“表單”--“文本”，并將標(biāo)簽改為“用戶名”，在屬性窗口中，將文本框的name設(shè)置為“username”。在文本框后面，輸入提示信息：“（*不超過30個(gè)字符）”9.4表單應(yīng)用例子在新的一行里，單擊“插入”--“表單”--“密碼”，并將標(biāo)簽改為“密碼”，同時(shí)在屬性窗口，將密碼框的name設(shè)置為“pwd1”,并在密碼文本框后面，輸入提示信息“（*不超過30個(gè)字符）”。在新的一行里，單擊“插入”--“表單”--“密碼”，并將標(biāo)簽改為“重復(fù)密碼”，同時(shí)在屬性窗口，將密碼框的name設(shè)置為“pwd2”,并在重復(fù)密碼文本框后面，輸入提示信息“（*密碼需要一致）”。在新的一行里，單擊“插入”--“表單”--“郵箱”，并修改標(biāo)簽名為“郵箱”。在新的一行里，單擊“插入”--“表單”--“單選按鈕組”,在彈出的對(duì)話框中，輸入“男”，“女”，兩個(gè)選項(xiàng)。9.4表單應(yīng)用例子在新的一行里，單擊“插入”--“表單”--“選擇”,在屬性窗口中，更改name值為“edu”，單擊“列表值”按鈕，在列表值窗口中，通過“+”添加各個(gè)選項(xiàng)，分別為“高中及以下（0）”、“大專（1）”、“本科（2）”、“碩士（3）”、“博士（4）”，如圖9-27所示。同時(shí)在代碼中，設(shè)置“本科”為默認(rèn)選項(xiàng)：<optionvalue="2"selected="selected">本科</option>在新的一行里，單擊“插入”--“表單”--“標(biāo)簽”，名稱為“同意服務(wù)條款”，同時(shí)“插入”--“表單”--“復(fù)選框”，命名為“agree”。在復(fù)習(xí)框后