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

下載本文檔

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

文檔簡(jiǎn)介

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

姓名：<inputtype="text"value="請(qǐng)輸入姓名"size="20"maxlength="15"/><br/>

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

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

您希望我們?cè)黾有┠姆矫娴闹R(shí)：<br/> <labelfor="c1">網(wǎng)頁(yè)設(shè)計(jì)：</label> <inputtype="checkbox"id="c1"value="painting"checked="checked"><br/> <labelfor="c2">css3動(dòng)畫(huà)：</label> <inputtype="checkbox"id="c2"value="writting"><br/> <labelfor="c3">后期運(yùn)營(yíng)維護(hù)：</label> <inputtype="checkbox"id="c3"value="travelling"><br/> <inputtype="submit"value="提交"/> </form></body>設(shè)置了一個(gè)單選按鈕組，共四個(gè)選項(xiàng)，單選按鈕的type屬性為radio，name屬性為單選項(xiàng)命名，value屬性為該選項(xiàng)的值，它是與服務(wù)器連接的重要參數(shù)。設(shè)置了一個(gè)復(fù)選按鈕組，共三個(gè)選項(xiàng)，復(fù)選按鈕的type值為checkBox，復(fù)選框checkbox不像單選按鈕radio，它不需要設(shè)置選項(xiàng)列表的name屬性，因?yàn)閺?fù)選框可以多選，一個(gè)選項(xiàng)列表中可以有多個(gè)復(fù)選框被選中。表單基本元素【例5-2】制作一個(gè)滿(mǎn)意度測(cè)評(píng)表單實(shí)例，代碼如下所示（示例文件5-2.html）。在chrome瀏覽器中預(yù)覽表單基本元素【例5-3】制作上傳附件頁(yè)面實(shí)例，代碼如下所示（示例文件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類(lèi)型文件；')"><br/> <inputtype="image"src="images/upload.png"/><br/> </form></body></html>創(chuàng)建了一個(gè)文件域，用于上傳文件，其type屬性值是file。當(dāng)使用文件域file時(shí)，必須在<form>標(biāo)簽中說(shuō)明編碼方式：enctype=“multipart/form-data，這樣服務(wù)器才能接收到正確的信息。創(chuàng)建了一個(gè)普通的表單按鈕，type屬性值為button，value屬性值是顯示在按鈕上的文字，onclick表示單擊該按鈕觸發(fā)的事件：alert('歡迎來(lái)到我們的網(wǎng)站！')，表示彈出窗口并顯示“歡迎來(lái)到我們的網(wǎng)站！”。創(chuàng)建了一個(gè)圖片域，type屬性值為“image”，src表示圖片路徑，其作用相當(dāng)于提交按鈕。表單基本元素【例5-3】制作上傳附件頁(yè)面實(shí)例，代碼如下所示（示例文件5-3.html）。在chrome瀏覽器中預(yù)覽單擊“選擇文件”按鈕單擊“圖片要求”按鈕表單其他元素表單其他元素如表所示。標(biāo)簽含義說(shuō)明textarea多行文本輸入框主要用于輸入較長(zhǎng)的文本信息。select下拉列表框下拉列表是一種簡(jiǎn)單的帶有預(yù)選值的下拉列表，能夠在有限空間設(shè)置多個(gè)選項(xiàng)表單其他元素【例5-4】制作入庫(kù)單實(shí)例，代碼如下所示（示例文件5-4.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>入庫(kù)單</title> <styletype="text/css"> body{line-height:30px;} </style></head><body> <formmethod="post"action=""> <h1>入庫(kù)單</h1>

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

請(qǐng)選擇所入倉(cāng)庫(kù)：<br/> <selectname="stock"> <optionvalue="stock1">倉(cāng)庫(kù)一</option> <optionvalue="stock2">倉(cāng)庫(kù)二</option> <optionvalue="stock3"selected="selected">倉(cāng)庫(kù)三</option> </select><br/>

請(qǐng)選擇經(jīng)手庫(kù)管員：<br/> <selectname="stockman"size="3"> <optionvalue="stockman1">張金紅</option> <optionvalue="stockman2">李穎</option> <optionvalue="stockman3">王占坤</option> </select><br/>

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

驗(yàn)證一個(gè)網(wǎng)址：<br/> <inputtype="url"name="user_date"required="required"/><br/>

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

中國(guó)XXX銀行注冊(cè)頁(yè)面

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

您確定注冊(cè)并開(kāi)通以上業(yè)務(wù)嗎？

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論