《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1

上傳人：1*** IP屬地：廣東上傳時(shí)間：2025-08-15 格式：PPTX 頁數(shù)：51 大?。?.22MB 積分：15 舉報(bào) 版權(quán)申訴

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1_第2頁

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1_第3頁

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1_第4頁

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1_第5頁

已閱讀5頁，還剩46頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程項(xiàng)目5布局交互功能——表單的應(yīng)用目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識(shí)鏈接02.學(xué)習(xí)目標(biāo)01.項(xiàng)目導(dǎo)入項(xiàng)目導(dǎo)入PART01項(xiàng)目導(dǎo)入使用表單制作“旅行家——登錄注冊(cè)”頁面在網(wǎng)頁中，我們經(jīng)?？吹礁鞣N注冊(cè)登錄頁面，其中用戶名、密碼等輸入內(nèi)容被稱為表單。HTML5中提供了表單標(biāo)簽，來完成頁面信息輸入的功能，實(shí)現(xiàn)網(wǎng)頁與用戶數(shù)據(jù)的交互。本章我們將使用這些元素制作“旅行家登錄”頁面學(xué)習(xí)目標(biāo)PART02知識(shí)目標(biāo)能力目標(biāo)1、掌握利用表單標(biāo)簽在頁面創(chuàng)建表單的方法2、掌握各種表單控件的定義與應(yīng)用3、掌握表單標(biāo)簽的屬性1、能夠根據(jù)需要?jiǎng)?chuàng)建表單控件2、能夠自由組合表單中的各個(gè)元素知識(shí)鏈接PART03一、表單標(biāo)簽<form>

表單是網(wǎng)頁上的特定區(qū)域，是表單控件的集合，主要負(fù)責(zé)從客戶端收集用戶的輸入信息，然后將信息發(fā)送給服務(wù)器，由處理程序?qū)?shù)據(jù)進(jìn)行分析，并給出反饋，完成服務(wù)器與用戶之間的互動(dòng)，其工作機(jī)制如圖一、表單標(biāo)簽<form>

表單所在的區(qū)域由文本框、單選框、多選框、下拉選擇框、提交按鈕、重置按鈕等表單元素構(gòu)成，需要用一對(duì)表單標(biāo)簽<form>定義。其基本語法格式為：<formname="表單名稱"method="提交方式"action="url地址">表單元素</form>一、表單標(biāo)簽<form>

1、表單屬性根據(jù)實(shí)際應(yīng)用不同，表單的組成元素多種多樣，其中action、method、name是<form>標(biāo)簽的常用屬性。（1）表單名稱屬性namename屬性給表單命名，來區(qū)分一個(gè)頁面中的多個(gè)表單，避免表單信息提交給后臺(tái)時(shí)出現(xiàn)混亂。其命名規(guī)則為：name的屬性值為表單名稱，不能包含特殊符號(hào)和空格。（2）傳送方法屬性methodmethod屬性用來定義表單數(shù)據(jù)的提交方式，可取值為get或post，決定了處理程序用什么方式從表單中獲取信息。一、表單標(biāo)簽<form>

（3）處理程序?qū)傩詀ctionaction屬性定義處理表單的腳本或程序，其屬性值可以是腳本或程序的完整url，即表單要提交的地址。這個(gè)地址可以是絕對(duì)地址，也可以是相對(duì)地址。一、表單標(biāo)簽<form>

2、表單元素表單中通常包含一個(gè)或多個(gè)表單元素，除input標(biāo)簽外，HTML還有其他常用表單標(biāo)簽，如textarea、lable等。常用的表單元素如表表單元素功能input該標(biāo)簽根據(jù)type屬性值的不同有多種形式，可定義文本框、密碼框、復(fù)選框、按鈕等textarea該標(biāo)簽定義一個(gè)多行文本輸入?yún)^(qū)域label該標(biāo)簽為其他表單元素定義說明文字select該標(biāo)簽用來定義下拉菜單datalist該標(biāo)簽用來定義下拉選項(xiàng)列表

表單中最為核心的是<input>標(biāo)簽，使用<input>標(biāo)簽可以定義用戶的輸入項(xiàng)，如文本輸入框、單選按鈕、復(fù)選框、提交按鈕等，用于文本、數(shù)字、密碼等數(shù)據(jù)信息的輸入。<input>標(biāo)簽是一個(gè)單標(biāo)簽，必須嵌套在表單標(biāo)簽中使用，其基本語法格式為：

<inputtype="控件類型"/>二、輸入標(biāo)簽<input>

1、type屬性在input標(biāo)簽的基本語法中，type屬性是其最基本的屬性，根據(jù)其不同的取值，指定不同的控件類型。（1）單行文本框text與密碼框password單行文本框可以用來輸入字符串；密碼框可以用來輸入密碼，為了保護(hù)密碼安全，密碼框中輸入字符會(huì)顯示為“*”。語法格式如下：<inputtype="text/number/password"name="名稱"size="文本框長(zhǎng)度"maxlength="最長(zhǎng)字符數(shù)"value="默認(rèn)取值"placeholder=”提示語句”/>常用的屬性如下：name屬性：定義文本框的名稱。size屬性：定義文本框的長(zhǎng)度，以字符為單位。maxlength屬性：定義文本框中最多可以輸入的字符數(shù)。value屬性：定義文本框顯示的默認(rèn)值。placeholder屬性：定義文本框提示語句二、輸入標(biāo)簽<input>【例5-1】創(chuàng)建文本密碼輸入框。<!DOCTYPE

html><html><head>

<title>輸入文本及密碼</title></head><body>

<form>

用戶名：

<input

type="text"

name="userID"

size="20"

placeholder="請(qǐng)輸入用戶名或手機(jī)號(hào)"

<br>

密碼：

<input

type="password"

name="userPW"

size="20"

placeholder="請(qǐng)輸入8-20位密碼"

</form></body></html>二、輸入標(biāo)簽<input>【例5-1】創(chuàng)建文本密碼輸入框。案例效果如圖二、輸入標(biāo)簽<input>（2）數(shù)字number、電話tel及郵箱email控件除了文本和密碼控件，我們還可以使用數(shù)字number、電話tel及郵箱等類型的控件，在使用這些控件時(shí)，可以自動(dòng)驗(yàn)證輸入的文本類型，如果輸入數(shù)據(jù)不符合控件類型，將無法提交數(shù)據(jù)，并顯示錯(cuò)誤提示語句，如圖5.5所示。其語法格式與常用屬性和文本控件相似。二、輸入標(biāo)簽<input>（3）單選按鈕radio與復(fù)選框checkbox在網(wǎng)頁表單中，經(jīng)常會(huì)出現(xiàn)單選或復(fù)選，這些可由input控件中單選按鈕radio或復(fù)選框checkbox類型實(shí)現(xiàn)。單選按鈕（radio）：允許用戶在多個(gè)選項(xiàng)中選擇其中一個(gè)。例如性別。復(fù)選框（checkbox）：允許用戶在多個(gè)選項(xiàng)中選擇多個(gè)。例如興趣愛好。使用單選按鈕及復(fù)選框的語法格式如下：<inputtype="radio/checkbox"name="單選按鈕名稱"value="選項(xiàng)值"checked="checked"/>name屬性：定義名稱，一組單選按鈕或復(fù)選框的名稱應(yīng)當(dāng)相同。value屬性：定義選項(xiàng)的值，用戶選中后該值將傳送到處理程序中。checked屬性：表示該選項(xiàng)為默認(rèn)選項(xiàng)。二、輸入標(biāo)簽<input>【例5-2】單選按鈕與復(fù)選框的使用<!DOCTYPE

html><html><head>

<title>單選按鈕與復(fù)選框</title></head><body>

<form>

性

別：

<input

type="radio"

name="gender"

value="male"

checked="checked"

/>男

<input

type="radio"

name="gender"

value="female"

/>女<br

二、輸入標(biāo)簽<input>【例5-2】單選按鈕與復(fù)選框的使用

愛

好：

<input

type="checkbox"

name="hobits"

value="music"

/>音樂

<input

type="checkbox"

name="hobits"

value="movie"

/>電影

<input

type="checkbox"

name="hobits"

value="travel"

/>旅行

<input

type="checkbox"

name="hobits"

value="photo"

/>攝影

<input

type="checkbox"

name="hobits"

value="sport"

/>運(yùn)動(dòng)

</form></body></html>二、輸入標(biāo)簽<input>（4）日期與時(shí)間相關(guān)控件在表單中，我們還經(jīng)常需要提交日期與實(shí)踐相關(guān)數(shù)據(jù)，在input控件中，可以使用datetime類型控件，輸入日期時(shí)間；可以使用date、datetime-local、month、time、week等類型的控件，實(shí)現(xiàn)日期或時(shí)間的選擇。二、輸入標(biāo)簽<input>【例5-3】日期和時(shí)間相關(guān)控件<!DOCTYPE

html><html><head>

<form>

datetime控件

<input

type="datetime">

date控件

<input

type="date">

二、輸入標(biāo)簽<input>

datetime-local控件

<input

type="datetime-local">

month控件

<input

type="month">

time控件

<input

type="time">

week控件

<input

type="week">

</form></body></html>二、輸入標(biāo)簽<input>（5）file控件與image控件在網(wǎng)頁表單中，當(dāng)需要上傳文件或圖片文件，可以使用file和image類型的input控件。

二、輸入標(biāo)簽<input>【例5-4】使用file控件上傳文件<!DOCTYPE

html><html><head>

<form>

上傳文件：

<input

type="file"

name="uploadfile">

</form></body></html>

二、輸入標(biāo)簽<input>（6）按鈕控件網(wǎng)頁中需要使用按鈕對(duì)已經(jīng)填寫的數(shù)據(jù)進(jìn)行處理，執(zhí)行提交、取消、重置、退出等操作。在HTML5中表單按鈕控件主要有：button：普通按鈕。普通按鈕使用時(shí)，需要設(shè)置觸發(fā)事件完成相關(guān)操作。submit：提交按鈕，點(diǎn)擊執(zhí)行提交操作reset：重置按鈕，點(diǎn)擊執(zhí)行重置操作，清除表單中輸入的內(nèi)容。按鈕類型控件的主要參數(shù)如下：name：設(shè)置按鈕名稱value：設(shè)置按鈕上的顯示文字。二、輸入標(biāo)簽<input>【例5-5】使用按鈕控件<!DOCTYPE

html><html><head>

<title>使用按鈕控件</title>

<style>

</style></head><body>

<form>

手機(jī)號(hào)：<input

type="tel"

name="tel"

<br>

二、輸入標(biāo)簽<input>

驗(yàn)證碼：<input

type="number"

name="vcode"

<input

type="button"

value="點(diǎn)擊獲取驗(yàn)證碼"

<br>

密碼：<input

type="password"

name="password"

<br>

<input

type="submit"

name="login"

value="登錄">

</form></body>案例完成效果如圖。二、輸入標(biāo)簽<input>

<textarea>標(biāo)簽用于定義多行文本輸入框，其基本語法格式如下：

<textarearows=””cols=””>文本</textarea>textarea標(biāo)簽通過rows、cols屬性規(guī)定文本輸入框內(nèi)可見的行數(shù)及列數(shù)，輸入框的具體尺寸可以通過width和height屬性設(shè)置，標(biāo)簽之間的文字代表文本域內(nèi)顯示的默認(rèn)文字。三、文本域標(biāo)簽<textarea>

<textarea>標(biāo)簽的常用屬性：三、文本域標(biāo)簽<textarea>屬性名屬性說明屬性值name文本域名稱用戶自定義readonly文本域內(nèi)容為只讀類型readonlydisabled第一次加載頁面時(shí)禁用該控件（顯示為灰色）disabledmaxlength文本域允許輸入的最多字符數(shù)正整數(shù)autofocus定義頁面加載后控件是否自動(dòng)獲取焦點(diǎn)autofocusplaceholder在輸入框內(nèi)顯示提示信息字符串required設(shè)定輸入框內(nèi)容不能為空requiredcols定義文本域內(nèi)可見列數(shù)numberrows定義文本域內(nèi)可見行數(shù)numberheight定義文本域的高度numberwidth定義文本域的寬度number屬性名屬性說明屬性值name文本域名稱用戶自定義【例5-6】創(chuàng)建讀者留言板塊。<!DOCTYPEhtml><html><head><title>文本域</title></head><body><form><h2>讀者留言：</h2><textareaname="userMessage"cols="40"rows="10">請(qǐng)?jiān)诖颂幜粞浴?lt;/textarea></form></body></html>三、文本域標(biāo)簽<textarea>【例5-6】創(chuàng)建讀者留言板塊。案例完成效果如圖：三、文本域標(biāo)簽<textarea>

<label>標(biāo)簽用于定義標(biāo)注文字，當(dāng)用戶選擇該標(biāo)簽文字時(shí)，瀏覽器會(huì)自動(dòng)將頁面焦點(diǎn)轉(zhuǎn)到與標(biāo)簽相關(guān)的表單控件上。<label>標(biāo)簽的基本語法格式如下：

<labelfor=””>文本</label>標(biāo)簽屬性for的屬性值與相關(guān)控件的id屬性值相同，相同的屬性值將label標(biāo)簽與其他控件“綁定”在一起。四、標(biāo)注（標(biāo)記）標(biāo)簽<label>

【例5-11】為性別單選按鈕添加標(biāo)簽。<!DOCTYPE

html><html><head>

<form>

性

別：

<input

type="radio"

name="gender"

id="male"

value="male"

checked="checked"

<label

for="male">男</label>

<input

type="radio"

name="gender"

id="female"

value="female"

<label

for="female">女</label>

</form></body></html>四、標(biāo)注（標(biāo)記）標(biāo)簽<label>

在表單的應(yīng)用中經(jīng)常遇到利用下拉菜單提供多個(gè)選項(xiàng)供用戶選擇的情況，此時(shí)可以用<select>標(biāo)簽創(chuàng)建單選或多選的下拉菜單，其語法格式具體如下：<select><optionvalue=“”>選項(xiàng)1</option><optionvalue=“”>選項(xiàng)2</option><optionvalue=“”>選項(xiàng)3</option></select>五、下拉菜單標(biāo)簽<select>

<select>標(biāo)簽的常用屬性：五、下拉菜單標(biāo)簽<select>屬性名屬性說明屬性值size定義下拉菜單的可見選項(xiàng)數(shù)正整數(shù)multiple定義下拉菜單是否有多選功能multipleselected定義選項(xiàng)是否為默認(rèn)選中狀態(tài)selected

【例5-8】創(chuàng)建“職業(yè)”單選下拉菜單及“特長(zhǎng)”多選下拉菜單。<!DOCTYPE

html><html><head>

職業(yè)（單選）：<br

<option

selected="selected">學(xué)生</option>

<option>自由工作者</option>

五、下拉菜單標(biāo)簽<select>

</select>

<br

特長(zhǎng)（多選）:<br

<select

multiple="multiple"

size="3">

<option

selected="selected">請(qǐng)選擇</option>

</select></body></html>

【例5-8】創(chuàng)建“職業(yè)”單選下拉菜單及“特長(zhǎng)”多選下拉菜單。案例完成效果如圖

五、下拉菜單標(biāo)簽<select>

輸入域的選項(xiàng)列表是由<datalist>標(biāo)簽定義的，通過<datalist>標(biāo)簽的id屬性和<input>標(biāo)簽中l(wèi)ist屬性的統(tǒng)一，將選項(xiàng)列表和<input>標(biāo)簽綁定，提供輸入域的可能值。選項(xiàng)列表通過<datalist>標(biāo)簽嵌套<option>標(biāo)簽實(shí)現(xiàn)，其基本語法格式如下：<datalist><optionvalue=“1”>選項(xiàng)1</option><optionvalue=“2”>選項(xiàng)2</option><optionvalue=“3”>選項(xiàng)3</option></datalist>六、選項(xiàng)列表標(biāo)簽<datalist>

【例5-9】創(chuàng)建“課程”選項(xiàng)列表。<!DOCTYPE

html><html><head>

<title>選項(xiàng)列表</title></head><body>

請(qǐng)選擇課程：

<input

id="course"

list="coulList">

<datalist

id="coulList">

<option

value="大學(xué)英語">必修</option>

<option

value="C語言程序設(shè)計(jì)">選修</option>

<option

value="網(wǎng)頁設(shè)計(jì)">必修</option>

</datalist></body></html>六、選項(xiàng)列表標(biāo)簽<datalist>總結(jié)提升PART041、表格結(jié)構(gòu)及基本語法在網(wǎng)頁中，我們可以插入表格，在HTML中使用table標(biāo)簽即可在頁面中插入表格。HTML5表格table標(biāo)簽下有四個(gè)子標(biāo)簽：caption、thead、tbody、tfoot。表格由一行一行元素組成的，表格行tr有子元素th和td，表格被行、列劃分為多個(gè)單元單元格。其中th表示表頭單元格，td表示一般單元格。HTML5表格基本樣式結(jié)構(gòu)如圖。一、表格及其基本語法HTML5表格的基本語法格式：一、表格及其基本語法<tableborder="1/0"><caption>表格標(biāo)題</caption><thead><tr><th>列名</th>……</tr></thead>

<tbody><tr><td>單元格</td>……</tr>……</tbody><tfoot><tr><td>表尾</td></tr></tfoot></table>1、表格CSS屬性在HTML5中，表格的樣式可以通過CSS樣式來設(shè)置，常用的表格CSS屬性如表一、表格及其基本語法屬性描述border-collapse設(shè)置是否把表格邊框合并為單一的邊框。border-spacing設(shè)置分隔單元格邊框的距離。caption-side設(shè)置表格標(biāo)題的位置。empty-cells設(shè)置是否顯示表格中的空單元格。table-layout設(shè)置顯示單元、行和列的算法。一、表格及其基本語法（1）折疊表格邊框：border-collapse屬性border-collapse屬性主要用于折疊表格邊框，其屬性值如下：lseparate：默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略border-spacing和empty-cells屬性。lcollapse：邊框合并為一個(gè)單一的邊框。會(huì)忽略border-spacing和empty-cells屬性。linherit：規(guī)定應(yīng)該從父元素繼承border-collapse屬性的值。（2）表格內(nèi)邊距：padding屬性表格內(nèi)邊距屬性padding用來控制表格中內(nèi)容與邊框的距離。一、表格及其基本語法（3）邊框分離：border-spacing屬性border-spacing屬性可以設(shè)置分隔邊框模型中單元格邊界之間的距離。其屬性值如下：length：規(guī)定相鄰單元的邊框之間的距離。使用px、cm等單位。不允許使用負(fù)值。如果定義一個(gè)length參數(shù)，那么定義的是水平和垂直間距。如果定義兩個(gè)length參數(shù)，那么第一個(gè)設(shè)置水平間距，而第二個(gè)設(shè)置垂直間距。inherit：繼承父元素border-spacing屬性的值。一、表格及其基本語法（4）表格標(biāo)題：caption-side屬性caption-side屬性用來設(shè)置表格標(biāo)題的位置。其屬性值如下：top：將標(biāo)題放在表格主體上方。bottom：將標(biāo)題放在表格主體下方。inherit：繼承父對(duì)象的屬性值。一、表格及其基本語法5）空單元格的處理：empty-cells屬性empty-cells屬性定義了不包含任何內(nèi)容的表單元格如何表示。其屬性值如下：show：顯示空單元格。hide：隱藏空單元格

（6）表格布局算法：table-layout屬性table-layout屬性用來指定表布局算法。表布局

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

《HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目教程》課件-項(xiàng)目5布局交互功能-表單的應(yīng)用1

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔