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

第9章

表單設(shè)計單擊此處添加副標(biāo)題目錄表單概述01表單元素02HTML5新增表單類型03表單應(yīng)用049.1表單概述表單為訪問者提供了填寫信息的區(qū)域,從而可以收集客戶信息，使網(wǎng)頁具有交互功能。表單內(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>為表單框架，里面可包含多個表單元素，例如輸入域<input>，文本域<textarea></textarea>、下拉列表<select></select>等。9.1表單概述<form>主要有以下幾個參數(shù)：1.name和id:表單名稱,定義了name和id后，腳本語言（Javascript）可以通過name屬性獲得表單，并對表單進(jìn)行控制。2.methond：用于指定表單向服務(wù)器提交數(shù)據(jù)的方式，有兩個選項值，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頁面處理。9.2表單元素9.2.1輸入域<input><input>標(biāo)簽可以定義多種形式的輸入框，包括文本輸入框，密碼輸入框，隱藏輸入，文件上傳，單選按鈕和復(fù)選框。其格式為：

<form>

<inputname=""

type="

"maxlength=""value="">

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

type="text"

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

<datalist>標(biāo)簽的

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

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