任務(wù)8 制作學(xué)生問卷調(diào)查表單

任

務(wù)

描

述任務(wù)8制作學(xué)生問卷調(diào)查表單HTML表單是HTML的一個(gè)重要部分，主要用于采集和提交用戶輸入的信息，它是Web前端實(shí)現(xiàn)人機(jī)交互必不可少的元素。本任務(wù)制作一個(gè)學(xué)生問卷調(diào)查表單，在表單中輸入學(xué)生相關(guān)的一系列信息，并使用CSS設(shè)置表單樣式。通過本任務(wù)的實(shí)現(xiàn)，掌握表單的創(chuàng)建和樣式設(shè)置方法，能輕松制作網(wǎng)頁中類似的表單。任務(wù)效果制作學(xué)生問卷調(diào)查表單，瀏覽效果如圖8-1所示圖8-1學(xué)生問卷調(diào)查表單（1）定義表單域。（2）使用表單控件定義各輸入控件。（3）使用<input>標(biāo)記的按鈕屬性定義提交和重置按鈕。（4）通過CSS整體設(shè)置表單樣式。任務(wù)效果要求如下。知識點(diǎn)

認(rèn)識表單01

表單標(biāo)記02

表單控件03

使用CSS設(shè)置表單樣式04知

識

準(zhǔn)

備任務(wù)8制作學(xué)生問卷調(diào)查表單8.2.1認(rèn)識表單內(nèi)容引入表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對象。8.2.1認(rèn)識表單表單是允許瀏覽者進(jìn)行輸入的區(qū)域，可以使用表單從客戶端收集信息。瀏覽者在表單中輸入信息，然后將這些信息提交給網(wǎng)站服務(wù)器，服務(wù)器中的應(yīng)用程序會(huì)對這些信息進(jìn)行處理并響應(yīng)，這樣就完成了瀏覽者和網(wǎng)站服務(wù)器之間的交互。HTML5新增了很多表單控件，完善了表單的功能，新特性提供了更好的用戶體驗(yàn)和輸入控制。8.2.1認(rèn)識表單表單域（<form>標(biāo)記）：<form>標(biāo)記是一個(gè)包含框，是包含表單控件的容器。表單控件（<input>標(biāo)記等）：用于輸入用戶信息的控件，如文本框、密碼框、單選按鈕、復(fù)選框和按鈕等。表單的構(gòu)成提示信息：表單控件周圍用于提示輸入內(nèi)容的文字。8.2.1認(rèn)識表單8.2.2表單標(biāo)記表單是一個(gè)包含表單控件的容器，表單控件允許用戶在表單中使用表單域輸入信息。表單使用的<form>標(biāo)記是成對出現(xiàn)的，在開始標(biāo)記<form>和結(jié)束標(biāo)記</form>之間的部分就是一個(gè)表單?？梢允褂?lt;form>標(biāo)記在網(wǎng)頁中創(chuàng)建表單。8.2.2表單標(biāo)記表單的基本語法<form>標(biāo)記主要用于處理和傳送表單結(jié)果，其常用屬性的含義如下。給定表單名稱，以區(qū)分同一個(gè)頁面中的多個(gè)表單。8.2.2表單標(biāo)記1.name屬性指定處理表單信息的服務(wù)器端URL地址。8.2.2表單標(biāo)記2.action屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。其中，get為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差，且有數(shù)據(jù)量的限制。而post方式的保密性好，并且無數(shù)據(jù)量的限制，使用method="post"可以大量提交數(shù)據(jù)。8.2.2表單標(biāo)記3.method屬性用于指定表單是否有自動(dòng)完成功能。所謂“自動(dòng)完成”，是指將表單控件輸入的內(nèi)容記錄下來，當(dāng)再次輸入時(shí)，會(huì)將輸入的歷史記錄顯示在一個(gè)下拉列表中，以實(shí)現(xiàn)自動(dòng)完成輸入。該屬性的取值有on和off，當(dāng)為on時(shí)，表示有自動(dòng)完成功能，否則沒有。該屬性是HTML5的新增屬性。8.2.2表單標(biāo)記4.autocomplete屬性指定在提交表單時(shí)，取消對表單進(jìn)行有效性檢查。為表單設(shè)置該屬性時(shí)，可以關(guān)閉整個(gè)表單的驗(yàn)證。該屬性的取值有true和false，當(dāng)為true時(shí)，表示取消表單驗(yàn)證。該屬性是HTML5新增屬性。8.2.2表單標(biāo)記5.novalidate屬性<form>標(biāo)記的屬性并不會(huì)直接影響表單的顯示效果。要想讓一個(gè)表單有意義，就必須在<form>與</form>之間添加相應(yīng)的表單控件。8.2.3表單控件表單中通常包含一個(gè)或多個(gè)表單控件。在用戶登錄表單中包括兩個(gè)文本框和兩個(gè)命令按鈕控件。表單中最為核心的是<input>標(biāo)記，使用<input>標(biāo)記可以定義很多控件，譬如，文本框、單選按鈕、復(fù)選框、提交按鈕、重置按鈕等等。8.2.3表單控件格式：<inputtype="控件類型"/><input>控件8.2.3表單控件<input/>標(biāo)記為單標(biāo)記，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。<input>控件8.2.3表單控件需要注意的是，在HTML5提供了不同輸入類型的輸入框，比如email、url等在提交時(shí)，自動(dòng)驗(yàn)證輸入的內(nèi)容是否符合要求，不符合要求時(shí)會(huì)有錯(cuò)誤提示。<input>控件8.2.3表單控件除了type屬性之外，<input>標(biāo)記還可以定義很多其他的屬性。<input>控件8.2.3表單控件內(nèi)容引入當(dāng)需要輸入大量信息時(shí)，就需要使用textarea文本域控件。當(dāng)定義input控件的type屬性值為text時(shí)，可以創(chuàng)建一個(gè)單行文本輸入框。如果需要輸入大量信息，且字?jǐn)?shù)沒有限制，就需要使用<textarea>和</textarea>標(biāo)記。例如，輸入個(gè)人簡歷時(shí)的控件就是textarea控件。8.2.3表單控件格式：<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容

</textarea><textarea>控件8.2.3表單控件在<textarea>的語法格式中，cols和rows為<textarea>標(biāo)記的必需屬性，其中cols用來定義多行文本輸入框每行中的字符數(shù)，rows用來定義多行文本輸入框顯示的行數(shù)，它們的取值均為正整數(shù)。<textarea>控件8.2.3表單控件各瀏覽器對cols和rows屬性的理解不同，當(dāng)對textarea控件應(yīng)用cols和rows屬性時(shí)，多行文本輸入框在各瀏覽器中的顯示效果可能會(huì)有差異。所以在實(shí)際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬、高。<textarea>控件<textarea>控件常用屬性。8.2.3表單控件<textarea>控件8.2.3表單控件例8-2使用<textarea>控件在前面調(diào)查問卷的后面添加多行文本框。<textarea>控件使用<textarea>控件在前面調(diào)查問卷的后面添加多行文本框，并設(shè)置了“autofocus”屬性，表示會(huì)自動(dòng)獲取焦點(diǎn)，設(shè)置了“required”屬性，表示該項(xiàng)不能為空。內(nèi)容引入select控件提供下拉列表選項(xiàng)，供用戶選擇。8.2.3表單控件下拉列表通過select標(biāo)記和option標(biāo)記來定義。格式：<select> <optionvalue="1">第一個(gè)選項(xiàng)</option> <optionvalue="2">第二個(gè)選項(xiàng)</option>

<optionvalue="3">第三個(gè)選項(xiàng)</option>

</select>8.2.3表單控件<select>控件

<select>和</select>標(biāo)記用于在表單中添加一個(gè)下拉菜單。<option>和</option>用于定義下拉菜單中的具體選項(xiàng)。每對<select>和</select>中至少應(yīng)包含一對<option>和</option>。8.2.3表單控件<select>控件

可以為<select>和<option>標(biāo)記定義屬性，以改變下拉菜單的外觀顯示效果，常用屬性如表所示。8.2.3表單控件<select>控件

8.2.3表單控件<select>控件

例8-3介紹<select>控件的使用。在項(xiàng)目chapter08中新建網(wǎng)頁文件example03.html8.2.3表單控件<select>控件

瀏覽網(wǎng)頁，效果如圖所示。創(chuàng)建用戶登錄表單，使用CSS設(shè)置表單樣式8.2.4使用CSS設(shè)置表單樣式內(nèi)容引入8.2.4使用CSS設(shè)置表單樣式表單的構(gòu)成輸入用戶名和密碼的文本框中使用了屬性pattern，設(shè)置正則表達(dá)式，驗(yàn)證輸入的規(guī)則。在每對<p>標(biāo)記中添加相應(yīng)的表單控件，分別用于定義單行文本框、密碼輸入框和普通按鈕。左邊的提示信息放入<span>標(biāo)記中，以便于設(shè)置文字的右對齊。8.2.4使用CSS設(shè)置表單樣式例8-4創(chuàng)建用戶登錄表單，使用CSS設(shè)置表單樣式。login.html。8.2.4使用CSS設(shè)置表單樣式此時(shí)瀏覽網(wǎng)頁，效果如圖所示。8.2.4使用CSS設(shè)置表單樣式添加表單樣式關(guān)鍵代碼8.2.4使用CSS設(shè)置表單樣式8.2.4使用CSS設(shè)置表單樣式在使用CSS控制表單樣式時(shí)，需要注意以下幾個(gè)問題：（1）由于form是塊元素，所以重置瀏覽器的默認(rèn)樣式時(shí)，需要清除其內(nèi)邊距padding和外邊距margin。（2）input控件默認(rèn)有邊框效果，當(dāng)使用<input>標(biāo)記定義各種按鈕時(shí)，通常需要清除其邊框。（3）通常情況下，需要對文本框和密碼框設(shè)置2～3px的內(nèi)邊距，以使用戶輸入的內(nèi)容不會(huì)緊貼輸入框。任

務(wù)

實(shí)

現(xiàn)任務(wù)8制作學(xué)生問卷調(diào)查表單本節(jié)使用前面所學(xué)的表單知識構(gòu)建學(xué)生問卷調(diào)查表單，并使用CSS設(shè)置表單樣式。任務(wù)實(shí)現(xiàn)內(nèi)容引入任務(wù)實(shí)現(xiàn)分析頁面結(jié)構(gòu)該頁面的所有內(nèi)容包含在最外層的大盒子中，大盒子添加了背景圖像，表單每行左邊的提示信息和右邊的表單控件及提示信息放入<