HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加留言板表單_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加留言板表單_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加留言板表單_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加留言板表單_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：添加留言板表單_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計與制作添加留言板表單項目將通過“制作一個D清單網(wǎng)頁廣告單頁”項目，即通過制作一個HTML頁面來承載網(wǎng)頁制作知識，完成網(wǎng)頁開發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項目目標(biāo)D清單是某公司推出的一款跨平臺同步的待辦事項和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會議準(zhǔn)備等以便更好的進(jìn)行時間和事項管理。為了方便D清單應(yīng)用的推廣，其公司需要制作一個該應(yīng)用產(chǎn)品的介紹網(wǎng)頁。該頁面主要用于手機(jī)端進(jìn)行分享推廣，同時也要求能夠在電腦端進(jìn)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計稿，如圖1所示。主管希望他擔(dān)任本次項目的前端工作，開發(fā)完成后將成果交付給程序員完成邏輯制作、測試和發(fā)布。項目情境圖1-1-1項目移動端和電腦端頁面截圖網(wǎng)頁制作的一般流程如下：項目分析項目發(fā)布需求分析規(guī)劃設(shè)計實施測試交付根據(jù)“移動優(yōu)先”原則，我們需要制定項目完成的計劃：項目分析時間段1時間段2時間段3時間段4時間段5分析規(guī)劃實施階段1移動端內(nèi)容制作階段2移動端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時間進(jìn)度任務(wù)制作網(wǎng)頁內(nèi)容能夠敘述網(wǎng)頁表單的作用。能夠合理運(yùn)用表單屬性，準(zhǔn)確定義不同的表單控件。能夠應(yīng)用網(wǎng)頁表單完成D清單網(wǎng)頁的留言板內(nèi)容制作。任務(wù)目標(biāo)

添加留言板表單本次任務(wù)要求在基礎(chǔ)上添加訂單表單內(nèi)容以完成網(wǎng)頁留言板的內(nèi)容制作。完成后的效果圖如圖1-8所示。任務(wù)描述

添加D清單網(wǎng)頁留言板表單圖1-8添加表單后的網(wǎng)頁效果圖要添加留言板表單，需要：學(xué)習(xí)HTML5表單標(biāo)簽的使用；分析D清單頁面效果圖中的表單，正確使用語義化標(biāo)簽完成D清單網(wǎng)頁內(nèi)容制作。D清單表單分析如圖1-8-1所示。任務(wù)分析

添加D清單網(wǎng)頁留言板表單圖1-8-1D清單表單分析圖知識與技能準(zhǔn)備在HTML5中，通常用<form></form>來定義表單，通過method屬性、action屬性和name屬性等內(nèi)容來對表單信息進(jìn)行收集和傳遞，最終將用戶提交的信息傳送給服務(wù)器。創(chuàng)建表單的基本語法格式如下：在上面的語法格式中，一般標(biāo)簽form后面需搭配action、name、method等常用屬性，分別用于定義URL地址、表單名稱、提交方式等。在提示信息及各種表單控件內(nèi)容中，由用戶根據(jù)實際需要進(jìn)行自定義。1、表單的組成<form常用屬性及值>提示信息及各種表單控件內(nèi)容</form>知識與技能準(zhǔn)備在HTML5中，表單需搭配常用的屬性來使用，通過設(shè)置表單屬性可以實現(xiàn)定義URL地址、提交方式、自動完成等不同的功能。2、表單屬性知識與技能準(zhǔn)備2、表單屬性（1）Action屬性action屬性定義在提交表單時執(zhí)行的動作，action屬性后面的值是提交的地址。其語法是：<formaction=”表單提交的地址”>注意：如果省略action屬性，則action會被設(shè)置為當(dāng)前頁面。（2）Method屬性method屬性規(guī)定在提交表單時所用的HTTP方法。它的取值有GET或POST。其語法是：<formmethod=”get/post”>（3）name屬性Name屬性用于表單的命名。有時候一個頁面可能存在多個表單，為表單進(jìn)行命名是為了進(jìn)行區(qū)分。其語法是：<formname=”用戶自定義表單命名”>（4）autocomplete屬性autocomplete屬性用來規(guī)定所設(shè)置的表單是否具有自動完成功能。autocomplete屬性有2個：on和off。其語法是：<formautocomplete=”on/off”>（5）target屬性target屬性規(guī)定action屬性中地址的目標(biāo)。其語法是：<formtarget=”目標(biāo)窗口的打開方式”>目標(biāo)窗口的打開方式有四種，分別是_selt、_blank、_parent、_top，默認(rèn)的值是_selt。（6）novalidate屬性在表單中，默認(rèn)狀態(tài)下是有驗證表單錄入內(nèi)容的有效性的，novalidate屬性規(guī)定表單提交時取消對表單進(jìn)行有效性的檢查。如果表單設(shè)置了該屬性，則關(guān)閉了表單的驗證，表單內(nèi)所有的控件都不被驗證。打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-1為表單的控件設(shè)置取消表單驗證1234<formnovalidate="true">請輸入您的EMAIL<inputtype="email"name="email"> <inputtype="submit"></form>通過瀏覽器進(jìn)行調(diào)試，效果如圖1-8-4所示：圖1-8-4取消了表單有效性驗證狀態(tài)創(chuàng)建一個名為：student的表單，要求：（1）表單需提交到地址：/book.php（2）表單數(shù)據(jù)和URL分開發(fā)送（3）目標(biāo)窗口打開方式為在新窗口打開（4）開啟自動完成功能打開VisualStudioCode軟件，打開index.html，在<body></body>中輸入以下代碼：課堂練習(xí)1-8-2創(chuàng)建表單123<formname="form_test"action="/book.php"method="post"target="_blank"autocomplete=”on”></form>知識與技能準(zhǔn)備<input>元素是表單中最常見的元素，常見的表單控件如文本框、密碼框、單選按鈕、復(fù)選框等都是通過<input>來進(jìn)行定義。<input>元素中最常見的屬性是type屬性，上面提到的文本框、密碼框、單選按鈕、復(fù)選框等就是通過搭配不同的值而實現(xiàn)的。除此之外，<input>元素還有其他常見的name屬性、value屬性、size屬性、checked屬性等。3、使用input元素創(chuàng)建表單控件知識與技能準(zhǔn)備3、使用input元素創(chuàng)建表單控件表1-8-1input元素常見的屬性知識與技能準(zhǔn)備3、使用input元素創(chuàng)建表單控件表1-8-2input元素新增的輸入類型知識與技能準(zhǔn)備3.1文本框（text）網(wǎng)頁中最常見的是文本框，文本框常用于輸入簡短的文字信息，如用戶名、賬號、身份證號碼、學(xué)號等，常見搭配的屬性有name、value、maxlength。其語法形式如下：<inputtype="text"name="控件名稱"size="控件長度"maxlength="允許最多的字符數(shù)"value="該文本的默認(rèn)值"autocomplete="on/off"placeholder="提示信息">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-3為表單添加文本框12345<formname="form-text"action="text.php"method="get"> <div>姓名<inputtype="text"name="name"size="20"maxlength="4"></div> <div>昵稱<inputtype="text"name="nickname"size="20"placeholder="請輸入您的昵稱"></div> <div>個人主頁<inputtype="text"name="index"value="http://"autocomplete="on"</div></form>顯示效果如下：圖1-8-5在表單中添加文本框知識與技能準(zhǔn)備3.2密碼域（password）在網(wǎng)頁表單信息錄入中，往往會錄入到一些私密的信息，如密碼等，這時候可以采用密碼域password創(chuàng)建一個密碼文本框。它在網(wǎng)頁中的效果和文本框（text）是一樣的，只不過在錄入時，錄入的信息由“*”代替。其語法格式如下：<inputtype="password"name="控件名稱"size="控件長度"maxlength="允許最多的字符數(shù)"value="該文本的默認(rèn)值"placeholder="提示信息">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-4為表單添加密碼域12345678<formname="form-password"action="password.php"method="get"> <div>原始密碼<inputtype="password"name="password1"size="20"maxlength="3"value="123"></div> <div>重設(shè)密碼<inputtype="password"name="password2"size="20"placeholder="請重新設(shè)置密碼"></div> <div>再次輸入密碼<inputtype="password"name="password3"size="20"placeholder="請再次輸入密碼"></div></form>顯示效果如下：1.8-6在表單中添加密碼域知識與技能準(zhǔn)備3.3單選按鈕（radio）表單中的單選按鈕一般用于內(nèi)容只選擇一個的情況。在頁面中，以圓圈表示每個選擇項。單選按鈕的屬性中，value屬性是必須設(shè)置的。特別注意的是每個單選按鈕項中的name屬性值必須一致。其語法格式如下：在該語法中，單選按鈕的每個項中name的取值必須一致；value的取值一般情況下不同；checked="checked"可以不設(shè)置或只在選項中出現(xiàn)一次，如果不設(shè)置，則沒有默認(rèn)選項；如果某個項設(shè)置了該屬性，則該項被作為默認(rèn)選擇項。<inputtype="radio"name="單選按鈕的名稱"value="單選按鈕的取值"checked="checked">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-5為表單添加單選按鈕123456<h3>你最喜歡的水果是？</h3><formname="form-radio"action="radio.php"method="get"> <div><inputtype="radio"name="r1"value="蘋果">蘋果</div> <div><inputtype="radio"name="r1"value="草莓">草莓</div> <div><inputtype="radio"name="r1"value="橙子">橙子</div></form>顯示效果如下：圖1-8-7為表單添加單選按鈕知識與技能準(zhǔn)備3.4復(fù)選框（checkbox）表單中的復(fù)選框一般用于內(nèi)容可多種選擇的情況。在頁面中，以方形表示每個選擇項。復(fù)選框的屬性中，value屬性是必須設(shè)置的。同樣需要注意的是每個復(fù)選框項中的name屬性值必須一致。其語法格式如下：在該語法中，復(fù)選框的每個項中name的取值必須一致；value的取值一般情況下不同；checked="checked"可以不設(shè)置或只在選項中出現(xiàn)多次，如果不設(shè)置，則沒有默認(rèn)選項；如果某個項設(shè)置了該屬性，則該項被作為默認(rèn)選擇項。<inputtype="checkbox"name="單選按鈕的名稱"value="單選按鈕的取值"checked="checked">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-6為表單添加復(fù)選框123456<h3>你經(jīng)常吃的水果是？</h3><formname="form-checkbox"action="checkbox.php"method="get"> <div><inputtype="checkbox"name="fruit"value="蘋果"checked="checked">蘋果</div> <div><inputtype="checkbox"name="fruit"value="草莓">草莓</div> <div><inputtype="checkbox"name="fruit"value="橙子"checked="checked">橙子</div></form>顯示效果如下：圖1-8-8為表單添加復(fù)選框知識與技能準(zhǔn)備3.5普通按鈕（button）在表單中，type屬性的值為button時，就創(chuàng)建了一個普通按鈕。普通按鈕經(jīng)常會搭配JavaScript來一次使用。其語法格式如下：在該語法中，不同按鈕的name一般要有所區(qū)分；value的值為按鈕上的文字內(nèi)容；onclick為鼠標(biāo)點擊按鈕時的處理程序，可搭配JavaScript腳本。<inputtype="button"name="普通按鈕的名稱"value="按鈕的取值"onclick="點擊按鈕時的處理程序">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-7為表單添加普通按鈕123456<h3>幾個不同效果的普通按鈕</h3><formname="form-button"action="button.php"method="get"> <div><inputtype="button"name="button"value="普通按鈕"></div> <div><inputtype="button"name="open"value="打開新窗口"onclick="window.open()"></div> <div><inputtype="button"name="close"value="關(guān)閉當(dāng)前窗口"onclick="window.close()"></div></form>顯示效果如下：圖1-8-9為表單添加普通按鈕知識與技能準(zhǔn)備3.6重置按鈕（reset）重置按鈕在表單中的作用是重置已經(jīng)錄入的表單內(nèi)容。當(dāng)我們錄入的表單信息有誤時，可點擊重置按鈕，重新錄入。其語法格式如下：<inputtype="reset"name="重置按鈕的名稱"value="重置按鈕的取值">3.7提交按鈕（submit）通過提交按鈕，可以將表單錄入的全部數(shù)據(jù)提交到服務(wù)器。服務(wù)器的地址為事先設(shè)置好的form屬性action值中的地址。其語法格式如下：說明：一般需要手動錄入信息的表單中都包含提交按鈕。<inputtype="submit"name="提交按鈕的名稱"value="提交按鈕的取值">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-8為表單添加重置按鈕和提交按鈕1234567<h3>重置按鈕和提交按鈕</h3><formname="form-reset"action="do.php"method="get"> <div>姓名：<inputtype="text"name="text"size="20"></div> <div>密碼：<inputtype="password"name="password"size="20"></div> <div><inputtype="reset"name="reset"value="重新錄入"></div> <div><inputtype="submit"name="submit"value="確認(rèn)提交"></div></form>顯示效果如下：圖1-8-10為表單添加重置按鈕和提交按鈕知識與技能準(zhǔn)備3.8圖像域（image）圖像域也叫插入圖像按鈕，用于將圖像文件作為按鈕來使用。其語法格式如下：<inputtype="image"src="圖像地址"name="圖像域名稱">3.9文件域(file)文件域也叫上傳文件，它可以將本地的某個文件作為表單數(shù)據(jù)進(jìn)行上傳。其語法格式如下：該語法中，multiple為非必要屬性，該屬性規(guī)定輸入字段可選擇多個值；如果使用該屬性，則字段可接受多個值。即multiple="multiple"相當(dāng)于可以同時上傳多個文件。<inputtype="file"name="文件域的名稱"multiple="multiple">打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-9表單控件的綜合應(yīng)用1234567891011121314<h3>注冊信息</h3><formname="form"action="book.php"method="get"> <div>姓名：<inputtype="text"name="text"size="20"></div> <div>密碼：<inputtype="password"name="password"size="20"></div> <div>性別：<inputtype="radio"name="radio"value="男">男

<inputtype="radio"name="radio"value="女">女</div> <div>興趣愛好：<inputtype="checkbox"name="checkbox"value="運(yùn)動">運(yùn)動

<inputtype="checkbox"name="checkbox"value="閱讀">閱讀

<inputtype="checkbox"name="checkbox"value="藝術(shù)">藝術(shù)

</div> <div>請上傳你的照片<inputtype="file"name="file"></div> <div><inputtype="reset"name="reset"value="重新錄入"> <inputtype="submit"name="submit"value="確認(rèn)提交"></div></form>效果圖如下：課堂練習(xí)1-8-9表單控件的綜合應(yīng)用圖1-8-12表單控件的綜合應(yīng)用知識與技能準(zhǔn)備一般來說，<input>標(biāo)簽用于需要用戶輸入的控件，而<select>標(biāo)簽用于需要用戶選擇的控件。（1）下拉菜單下拉菜單是表單中一種由用戶進(jìn)行選擇的錄入方式，在正常狀態(tài)下只看到一個選項，點擊旁邊的三角形箭頭時，會展開全部的選項。需搭配<option>標(biāo)簽來使用。其語法格式如下：4、使用select元素創(chuàng)建表單控件<selectname="下拉菜單名稱"> <optionvalue="選項1"selected="selected">選項顯示內(nèi)容</option> <optionvalue="選項2">選項顯示內(nèi)容</option> <optionvalue="選項3">選項顯示內(nèi)容</option></select>打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-10為表單添加下拉菜單12345678910<h3>下拉菜單</h3><formname="form-select"action="select.php"method="get">

籍貫：<selectname="select"> <optionvalue="廣州"selected="selected">廣州</option> <optionvalue="深圳">深圳</option> <optionvalue="珠海">珠海</option> <optionvalue="中山">中山</option> </select></form>效果圖如下：圖1-8-13為表單添加下拉菜單知識與技能準(zhǔn)備（2）列表項列表項的設(shè)置和下拉列表類似，區(qū)別是列表項沒有下拉列表的三角形箭頭，它可以同時顯示多個選項。一旦選項數(shù)量超出信息量長度，在列表的右方就會出現(xiàn)滾動條。其語法格式如下：4、使用select元素創(chuàng)建表單控件<selectname="select"size="顯示的選項列數(shù)"multiple="multiple"> <optionvalue="選項1"selected="selected">選項顯示內(nèi)容</option> <optionvalue="選項2">選項顯示內(nèi)容</option> <optionvalue="選項3">選項顯示內(nèi)容</option></select>打開VisualStudioCode軟件，打開index.html，在<body>標(biāo)簽中輸入如下代碼：課堂練習(xí)1-8-11為表單添加列表項12345678910<h3>列表項</h3><formname="form-select"action="select.php"method="get">

關(guān)注的新聞分類：<selectname="select"size="3"multiple="multiple"> <optionvalue="政治"selected="selected">政治</option> <optionvalue="軍事"selected="selected">軍事</option> <optionvalue="體育">體育</opti

溫馨提示

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

評論

0/150

提交評論