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

下載本文檔

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

文檔簡介

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

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

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

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

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

<inputtype="checkbox"name="checkbox"value="藝術">藝術

</div> <div>請上傳你的照片<inputtype="file"name="file"></div> <div><inputtype="reset"name="reset"value="重新錄入"> <inputtype="submit"name="submit"value="確認提交"></div></form>效果圖如下：課堂練習1-8-9表單控件的綜合應用圖1-8-12表單控件的綜合應用知識與技能準備一般來說，<input>標簽用于需要用戶輸入的控件，而<select>標簽用于需要用戶選擇的控件。（1）下拉菜單下拉菜單是表單中一種由用戶進行選擇的錄入方式，在正常狀態(tài)下只看到一個選項，點擊旁邊的三角形箭頭時，會展開全部的選項。需搭配<option>標簽來使用。其語法格式如下：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>標簽中輸入如下代碼：課堂練習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為表單添加下拉菜單知識與技能準備（2）列表項列表項的設置和下拉列表類似，區(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>標簽中輸入如下代碼：課堂練習1-8-11為表單添加列表項12345678910<h3>列表項</h3><formname="form-select"action="select.php"method="get">

關注的新聞分類：<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)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論