Web前端開發(fā)課件 項目五 網頁中的表單_第1頁
Web前端開發(fā)課件 項目五 網頁中的表單_第2頁
Web前端開發(fā)課件 項目五 網頁中的表單_第3頁
Web前端開發(fā)課件 項目五 網頁中的表單_第4頁
Web前端開發(fā)課件 項目五 網頁中的表單_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網頁中的表單項目五授課教師：姓名WEB前端開發(fā)Contents一項目描述本項目學習要點表單的高級應用；使用CSS樣式修飾表單。表單的作用和語法格式；表單中各元素的作用和語法格式；二知識準備表單概述；表單高級元素。表單基本元素；表單其他元素；表單概述在HTML文檔中，使用表單可以收集用戶的相關信息，提交后的數(shù)據可以交付后臺進行處理，比如登錄界面、調查問卷、個人信息填寫等。表單的標簽為<form></form>，其格式如下：<formname="表單名稱"action="url"method=”get/post”target=”目標顯示方式”enctype=”mime”></form>表單概述其中各屬性的含義如表所示。屬性含義說明name表單名稱為了區(qū)分多個表單，用該屬性給表單命名，以防止表單提交到后臺程序出現(xiàn)混亂。action表單提交地址用于指定表單數(shù)據提交到哪個地址進行處理或者以郵件形式發(fā)送到哪個郵箱。如：action=”form-action.asp”或者action=”mailto:415770947@”method傳送方法指明提交表單的HTTP方法，取值為get或post，由于get方法安全性較低，所以大部分采用post的方法。target目標顯示方式目標窗口的打開位置，與超鏈接<a>標簽一樣，有四個屬性值：_self：默認值，表示在當前的窗口打開頁面。_blank：表示在新的窗口打開頁面（常用）。_parent：表示在父級窗口中打開頁面。_top：頁面載入到包含該鏈接的窗口，取代當前在窗口中的所有頁面。enctype編碼方式用于設置表單信息提交的編碼方式，有兩個值：application/x-www-form-urlencoded：默認的編碼方式。multipart/form-data：MIME編碼，對于“上傳文件”這種表單必須選擇該值。表單概述結合以上表單屬性的介紹，可以創(chuàng)建如圖所示的表單。第8、9行代碼為：<formname="form1"action=”form-action.asp”method=”post”target=”_blank”enctype=”application/x-www-form-urlencoded”></form>這句代碼創(chuàng)建了一個表單，name=“form1”表示表單名稱為form1，action=”form-action.asp”表示提交表單后將數(shù)據交給form-action.asp文件來執(zhí)行，method=”post”表示傳送方法為post，target=”_blank”表示提交表單后在新的窗口打開頁面，enctype=”application/x-www-form-urlencoded”定義了表單信息提交時的編碼方式。表單概述也可以如圖所示創(chuàng)建表單。第8、9行代碼為：<formaction="mailto:someone@"method="post"enctype="text/plain"></form>這句代碼中action=mailto:someone@表示提交表單后將表單內容以郵件形式發(fā)送給someone@。表單基本元素按照上面的方法創(chuàng)建的表單，在網頁上并沒有內容顯示，因為表單是一個包含表單元素的容器，只有通過插入各種表單元素，才能顯示不同的交互界面。<input>標簽用于搜集用戶信息，通過設置不同的type屬性值，可以有很多類型，type屬性值如表所示。type值含義說明text單行文本框用戶可在其中輸入簡短文本，默認寬度為20個字符。password密碼為了保證文本的安全性，該字段中的字符被掩碼，以點的形式顯示。checkbox復選框用戶在一組選項中可以選擇一項或多項。radio單選按鈕用戶在一組選項中只能選擇一項。button普通按鈕可點擊的按鈕，一般用于通過JavaScript啟動腳本。submit提交按鈕作用是把表單數(shù)據發(fā)送到服務器。reset重置按鈕作用是清除表單中的所有數(shù)據。image圖像域圖像形式的提交按鈕。file上傳按鈕定義輸入字段和瀏覽按鈕，供文件上傳。hidden隱藏字段需要提交數(shù)據又不顯示在瀏覽器中的表單元素。表單基本元素【例5-1】制作一個登錄框實例，代碼如下所示（示例文件5-1.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>創(chuàng)建一個登錄框</title></head><body> <formmethod="post"action="">

姓名：<inputtype="text"value="請輸入姓名"size="20"maxlength="15"/><br/>

密碼：<inputtype="password"size="20"maxlength="15"/><br/> <inputtype="submit"value="登錄"/> <inputtype="reset"value="重置"/> </form></body></html>插入了一個單行文本框，其type屬性值為“text”，value屬性定義文本框的初始值為“請輸入姓名”；size屬性定義文本框的寬度為“20”個字符寬度；maxlength屬性文本框定義最多輸入的字符數(shù)為“15”。插入了一個密碼框，其type屬性值為“password”，其他的屬性及含義和文本框是一樣的，密碼文本框的中的文本以點的形式顯示，但它僅僅使周圍的人看不見輸入的文本，但并不能真正使得數(shù)據安全。為了數(shù)據安全，還需要后端技術解決。插入一個提交按鈕，其type屬性是“submit”，value的取值“登錄”就是顯示在按鈕上的文字。提交按鈕單擊后會將表單的信息提交給表單form的action屬性所指向的文件進行處理。插入一個重置按鈕，其type屬性為“reset”，value屬性的意義與提交按鈕相同，重置按鈕的作用是將表單中的內容清空。表單基本元素【例5-1】制作一個登錄框實例，代碼如下所示（示例文件5-1.html）。在chrome瀏覽器中預覽表單基本元素【例5-2】制作一個滿意度測評表單實例，代碼如下所示（示例文件5-2.html）。<body> <formmethod="post"action="">

網站滿意度打分：<br/> <inputtype="radio"name="Question1"value="best"checked="checked"/>非常滿意<br/> <inputtype="radio"name="Question1"value="better"/>比較滿意<br/> <inputtype="radio"name="Question1"value="good"/>一般<br/> <inputtype="radio"name="Question1"value="bad"/>不滿意<br/>

您希望我們增加些哪方面的知識：<br/> <labelfor="c1">網頁設計：</label> <inputtype="checkbox"id="c1"value="painting"checked="checked"><br/> <labelfor="c2">css3動畫：</label> <inputtype="checkbox"id="c2"value="writting"><br/> <labelfor="c3">后期運營維護：</label> <inputtype="checkbox"id="c3"value="travelling"><br/> <inputtype="submit"value="提交"/> </form></body>設置了一個單選按鈕組，共四個選項，單選按鈕的type屬性為radio，name屬性為單選項命名，value屬性為該選項的值，它是與服務器連接的重要參數(shù)。設置了一個復選按鈕組，共三個選項，復選按鈕的type值為checkBox，復選框checkbox不像單選按鈕radio，它不需要設置選項列表的name屬性，因為復選框可以多選，一個選項列表中可以有多個復選框被選中。表單基本元素【例5-2】制作一個滿意度測評表單實例，代碼如下所示（示例文件5-2.html）。在chrome瀏覽器中預覽表單基本元素【例5-3】制作上傳附件頁面實例，代碼如下所示（示例文件5-3.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>上傳附件</title></head><body> <formmethod="post"action="">

上傳圖片：<inputtype="file"/><br/> <inputtype="button"value="圖片要求"onclick="alert('文件不能大于10M；必須是JPG類型文件；')"><br/> <inputtype="image"src="images/upload.png"/><br/> </form></body></html>創(chuàng)建了一個文件域，用于上傳文件，其type屬性值是file。當使用文件域file時，必須在<form>標簽中說明編碼方式：enctype=“multipart/form-data，這樣服務器才能接收到正確的信息。創(chuàng)建了一個普通的表單按鈕，type屬性值為button，value屬性值是顯示在按鈕上的文字，onclick表示單擊該按鈕觸發(fā)的事件：alert('歡迎來到我們的網站！')，表示彈出窗口并顯示“歡迎來到我們的網站！”。創(chuàng)建了一個圖片域，type屬性值為“image”，src表示圖片路徑，其作用相當于提交按鈕。表單基本元素【例5-3】制作上傳附件頁面實例，代碼如下所示（示例文件5-3.html）。在chrome瀏覽器中預覽單擊“選擇文件”按鈕單擊“圖片要求”按鈕表單其他元素表單其他元素如表所示。標簽含義說明textarea多行文本輸入框主要用于輸入較長的文本信息。select下拉列表框下拉列表是一種簡單的帶有預選值的下拉列表，能夠在有限空間設置多個選項表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>入庫單</title> <styletype="text/css"> body{line-height:30px;} </style></head><body> <formmethod="post"action=""> <h1>入庫單</h1>

入庫產品編號：<br/> <inputtype="text"size="20"maxlength="15"/><br/>表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。

請選擇所入倉庫：<br/> <selectname="stock"> <optionvalue="stock1">倉庫一</option> <optionvalue="stock2">倉庫二</option> <optionvalue="stock3"selected="selected">倉庫三</option> </select><br/>

請選擇經手庫管員：<br/> <selectname="stockman"size="3"> <optionvalue="stockman1">張金紅</option> <optionvalue="stockman2">李穎</option> <optionvalue="stockman3">王占坤</option> </select><br/>

入庫原因：<br/> <textarearows="5"cols="30">填寫貨物來源</textarea><br/> <inputtype="submit"value="入庫"/> </form></body></html>創(chuàng)建了一個下拉列表，下拉列表是一種簡單的帶有預選值的下拉列表，能夠在有限空間設置多個選項，由<select>和<option>這兩個標簽配合使用，<select>表示整個列表，<option>表示一個列表項，Value屬性表示選項值，Selected表示是否被選中。創(chuàng)建了一個可以同時顯示三條記錄的列表，它的寫法與倉庫列表類似，不同之處是在select標簽后面加上size屬性：<selectname="stockman"size="3">，表示下拉列表展開，可見列表項數(shù)目為3。創(chuàng)建了一個文本區(qū)域，標簽是<textarea></teaxtarea>，rows屬性定義文本框的高度，cols屬性定義文本框的寬度，單位是單個字符數(shù)。表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。在chrome瀏覽器中預覽表單高級元素input標簽還有一些高級應用，如表所示。type值含義說明urlURL地址輸入框要求輸入網站網址，在提交表單時，會自動驗證是否是URL地址。emailemail地址輸入框要求輸入email地址，在提交表單時，會自動驗證是否是email地址。date日期選擇框選擇一個日期。time時間選擇框選擇一個時間。number數(shù)字輸入框用戶可以直接輸入數(shù)字，也可以通過上下箭頭選擇數(shù)字。range滑條控件可以通過滑塊選擇合適的數(shù)值。表單高級元素【例5-5】將上例的入庫單繼續(xù)完善一下，修改成如圖所示效果，增加了入庫日期、入庫時間、入庫數(shù)量、入庫產品合格率等內容（示例文件5-5.html）。表單高級元素【例5-5】將上例的入庫單繼續(xù)完善一下，修改成如圖所示效果，增加了入庫日期、入庫時間、入庫數(shù)量、入庫產品合格率等內容（示例文件5-5.html）。在【例5-4】的26行之后插入如下代碼：入庫日期：<br/><inputtype="date"name="indate"/><br/>入庫時間：<br/><inputtype="time"name="intime"/><br/>入庫數(shù)量：<br/><inputtype="number"name="num"/><br/>入庫產品合格率：<br/><inputtype="range"min="1"max="100"step="2"name="qualified"/><br/>創(chuàng)建了日期選擇框，type屬性值為date，用戶單擊輸入框中的向下按鈕，即可在彈出的窗口中選擇需要的日期，也可以通過微調按鈕選擇日期。創(chuàng)建了時間選擇框，type屬性值為time，用戶可以直接輸入時間，也可以點擊右側的微調按鈕，選擇時間。創(chuàng)建了數(shù)字選擇框，type屬性值為number，用戶可以直接輸入數(shù)字，也可以單擊微調按鈕上下選擇合適的數(shù)值。創(chuàng)建了一個滑塊控件，type屬性值為range，min屬性表示滑塊的最小數(shù)值，max屬性值表示滑塊的最大數(shù)值，step屬性表示滑塊梯度的大小。表單高級元素【例5-6】驗證URL地址和email地址的功能實例，代碼如下所示（示例文件5-6.html）。<head> <metacharset="UTF-8"> <title>驗證地址</title> <styletype="text/css"> body{line-height:30px;} </style></head><body> <formmethod="post"action="">

驗證一個網址：<br/> <inputtype="url"name="user_date"required="required"/><br/>

驗證郵箱地址：<br/> <inputtype="email"name="user_email"required="required"/><br/> <inputtype="submit"value="提交"/> </form></body>創(chuàng)建了URL地址輸入框，type屬性值為url，如果在此輸入的不是網站地址，當單擊提交按鈕時，會彈出錯誤提示。required屬性值為“required”，表示該項不能為空，用戶如果沒填寫這一項，就單擊“提交”按鈕，將彈出提示信息。創(chuàng)建了email地址輸入框，type屬性值為email，如果在此輸入的不是郵箱地址，在提交表單時，會彈出錯誤提示。表單高級元素【例5-6】驗證URL地址和email地址的功能實例，代碼如下所示（示例文件5-6.html）。在chrome瀏覽器中預覽三項目實施利用所學的表單知識制作網上銀行注冊頁面，如圖所示。<styletype="text/css"> caption{ font-size:24px; line-height:50px; } td{height:30px;}</style>三項目實施啟動Sublime程序，新建并保存文件名稱為5-7.html。第一步第二步Head標簽內的CSS代碼輸入如下：設置了表格標題的樣式：文字大小為24像素；標題文字行高為50像素。設置了單元格的樣式，高為30像素。三項目實施第三步在body標簽中，先插入form表單，再在form表單中插入10行2列的表格，在表格中填寫內容。<formmethod="post"action=""> <tablewidth="600"border="0"cellspacing="0"cellpadding="0"> <caption>

中國XXX銀行注冊頁面

</caption> <tr> <tdwidth="255px">注冊卡/賬戶類型</td> <tdwidth="345px"> <inputtype="radio"name="type"value="standard"checked="checked"id="type_0"> <labelfor="type_0">標準卡/賬戶</label> <inputtype="radio"name="type"value="fast"id="type_1"> <labelfor="type_1">閃酷卡</label> </td> </tr> 創(chuàng)建了一個表單，將所有的表格以及表單元素都放在表單標簽<form>中。創(chuàng)建表格標題。表格第一行，第二個單元格中是一個單選按鈕組，包含兩個單選項。三項目實施第三步 <tr> <td>請輸入注冊卡（賬）號</td> <td><inputtype="text"name="account"required="required"></td> </tr> <tr> <td>注冊卡（帳）戶密碼</td> <td><inputtype="password"name="password"size="10"required="required"></td> </tr> <tr> <td>手機號碼</td> <td><inputtype="text"name="telephone"></td> </tr> <tr> <td>證件類型</td> <td> <selectname="card"> <optionvalue="idcard"selected="selected">身份證</option> <optionvalue="certificate">軍官證</option> </select> </td> </tr>表格第二行，第二個單元格中是一個文本框。表格第三行，第二個單元格中是一個密碼框。表格第四行，第二個單元格中是一個文本框。表格第五行，第二個單元格中是一個列表框，包含兩個列表項。三項目實施第三步 <tr> <td>請輸入證件號碼</td> <td><inputtype="text"name="card_number"required="required"></td> </tr> <tr> <td>請留下你的聯(lián)系郵箱</td> <td><inputtype="email"></td> </tr> <tr> <td>選擇您要開通的業(yè)務</td> <td> <inputtype="checkbox"name="business"value="business_0"id="business_0"> <labelfor="business_0">短信提醒</label> <inputtype="checkbox"name="business"value="business_1"id="business_1"> <labelfor="business_1">信用卡自動還款</label> <inputtype="checkbox"name="business"value="business_2"id="business_2"> <labelfor="business_2">支付寶</label> </td> </tr>表格第六行，第二個單元格中是一個文本框。表格第七行，第二個單元格中是一個email地址輸入框。表格第八行，第二個單元格中是一個復選框組，包含三個復選項。三項目實施第三步 <tr> <td>個人備注信息</td> <td> <textareaname="textarea"cols="40"rows="5"></textarea> </td> </tr> <tr> <tdcolspan="2">

您確定注冊并開通以上業(yè)務嗎？

<inputtype="submit"name="button_0"value="提交"> <inputtype="reset"name="button_1"value="重置"> </td> </tr> </table></form>表格第九行，第二個單元格中是一個文本框。表格第八行，第二個單元格中是是兩個按鈕，一個提交按鈕，另一個是重置按鈕。三項目實施再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四項目拓展通過項目實施，表單以及表單元素的標簽、屬性已經基本掌握，如何能讓表單在內容完整的同時又能美化一點呢？這就要結合css進行樣式設置，此項目拓展制作如圖所示的調查問卷。四項目拓展首先要創(chuàng)建一個大的div塊，需要給塊設置背景和邊框，然后創(chuàng)建標題、表單以及具有布局作用的表格。第一步分析需求第二步Head標簽內的CSS代碼輸入如下：<style> #layout{ width:700px; margin:0auto; background-color:#F6F6F6; border:2pxsolid#8FC629; } h1{ border-bottom:2pxsolid#8FC629; text-align:center; }設置了ID名為“l(fā)ayout”的div塊樣式，寬為700像素；居中顯示；背景顏色灰色；邊框為2像素的黃綠色實線邊框。設置了標題h1的樣式，下邊框為2像素的黃綠色實線邊框；文本對齊方式為居中對齊。四項目拓展第二步 h3{padding:10px;} table{width:500px;font-size:12px;} th,td{padding:3px;} th{text-align:right;} .textInput{ width:150px; height:20px; border:1pxsolid#58805f; } .textStyle{border:1pxsolid#58805f;} .submitBut{ width:100px; height:25px; margin:10px; font-weight:bold; border:2pxsolid#abd8b3; }</style>設置了標題h3的樣式，內邊距為10像素。設置了標題行單元格th，普通單元格的樣式td內邊距為3像素。設置了標題行單元格th的樣式，文本右對齊。設置了表格table的樣式，寬為500像素，字號為12像素。設置了類名為.textInput的姓名輸入框和email地址框的樣式，寬為150像素，高為20像素，邊框為1像素的青色實線邊框。設置類名為.textStyle的文本框邊框為1像素的青色實線邊框。設置了類名為.submitBut的按鈕的樣式寬為100像素；高為25像素；外邊距為10像素；文字加粗；邊框為2像素的青色實線邊框。四項目拓展第三步<divid="layout"> <h1>幾個有關Web標準的問題</h1> <h3>幫助我們更好的了解您對Web標準網頁設計的想法與看法</h3> <formmethod="post"action=""> <tablecellspacing="0"cellpadding="0"> <tr> <th>您是否曾使用表格式布局？</th> <td> <labelfor="c1_0">是</label> <inputname="c1"type="radio"value="yes"id="c1_0"/> <labelfor="c1_1">否</label> <inputname="c1"type="radio"value="no"id="c1_1"/> </td> </tr> <tr> <th>您是否開始使用CSS布局？</th> <td> <labelfor="c2_0">是</label> <inputname="c2"type="radio"value="yes"id="c2_0"/> <labelfor="c2_1">否</label> <inputname="c2"type="radio"value="no"id="c2_1"/> </td> </tr>body標簽內的HTML代碼輸入如下：表格的第一行，第二個單元格中是一個單選按鈕組，name值為“c1”。表格的第二行，第二個單元格中是一個單選按鈕組，name值為“c2”，包含兩個單選項。四項目拓展第三步 <tr> <th>是否訂閱CSS郵件？</th> <td> <inputname="submail"type="checkbox"value="sub"id="sub"/> <labelfor="sub">是的</label> </td> </tr> <tr> <th>您所從事的行業(yè)：</th> <td> <selectname="job"> <optionselected="selected"value="job_0">設計師</option> <optionvalue="job_1">程序員</option> <optionvalue="job_2">總監(jiān)</option> <optionvalue="job_3">美術編輯</option> <optionvalue="job_4">項目經理</option> </select> </td> </tr>表格的第三行，第二個單元格中是一個復選框。表格的第四行，第二個單元格中是一個下拉列表框。四項目拓展第三步 <tr> <th>請留下您的姓名：</th> <td><inputtype="text"name="name"class="textInput"/></td> </tr> <tr> <th>請留下您的Email地址：</th> <td><inputname="email"type="text"class="textInput"/></td> </tr> <tr> <th>請留下您的建議：</th> <td><textareacols="40"rows="5"name="comment"class="textStyle"></textarea></td> </tr> </table> <inputtype="submit"value="提交"class="submitBut"/> </form></div>表格的第五行，第二個單元格中是一個文本框，用于輸入姓名。表格的第七行，第二個單元格中是一個多行文本輸入框，用于輸入建議。表格的第六行，第二個單元格中是一個email地址輸入框。定義了提交按鈕。四項目拓展再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步五項目小結本項目通過項目實施和項目拓展制作了銀行注冊頁面和用css樣式修飾過的調查問卷頁面，學習了HTML中表單、各種表單元素以及一些高級屬性的應用，也學習了一些CSS樣式的新用法。五項目小結本項目知識點總結如表所示。標簽屬性說明formname表單名稱action表單提交地址method提交表單的HTTP方法，取值為get或posttarget目標顯示方式：_self、_blank、_parent、_topenctype編碼方式inputtypetext單行文本框password密碼checkbox復選框radio單選按鈕button普通按鈕submit提交按鈕reset重置按鈕image圖像域file上傳按鈕hidden隱藏字段URLURL地址輸入框emailemail地址輸入框date日期選擇框time時間選擇框number數(shù)字輸入框range滑條控件required必填項textarearows文本框的高度cols文本框的寬度selectselected下拉列表選中項value值六知識鞏固一、單選題1.下列選項關于標簽默認樣式說法正確的是（）A.標題標簽只是默認加粗B.段落標簽默認帶有外邊距和內邊距C.無序列表默認帶有外邊距和內邊距D.input無默認樣式2.input標簽的值是用哪個屬性來描述的？（）A.typeB.disabledC.idD.value3.在表單中，實現(xiàn)輸入的數(shù)字只顯示小圓點的type類型是（）A.te

溫馨提示

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

評論

0/150

提交評論