webui課件第七講html基本標(biāo)簽二

第二章HTML基本標(biāo)簽(二)共性問題集中講解常見調(diào)試問題及解決辦法代碼規(guī)范問題共性問題集中講解表單的典型應(yīng)用為什么使用表單用戶登錄/注冊(cè)收集用戶反饋信息提供搜索工具單行文本框(text)單選按鈕(radio)復(fù)選框(checkbox)下拉列表(select)重置按鈕(reset)提交按鈕(submit)密碼框(password)常見的表單元素文本域(textarea)<formaction="表單提交地址"method="提交方法">…文本框、按鈕等表單元素…

</form>表單的基本語法2-1指定提交后，由服務(wù)器上哪個(gè)處理程序處理指定向服務(wù)器提交的方法：一般為post或get方法,post方法比較安全表單的基本語法2-2……<formaction="login.jsp"method="post"><p>用戶名：<inputname="username"type="text"size="20"maxlength="10"/></p><p>密

碼：<inputname="pwd"type="password"size="20"/></p><p><inputtype="submit"name="btn"value="提交"/>  <inputname="reset"type="reset"value="重填"/></p></form>……表單輸入元素：input表單提交地址和方法的設(shè)置操作演示9：表單應(yīng)用表單的典型應(yīng)用：假定登錄126郵箱表單的執(zhí)行原理Internet12客戶端：請(qǐng)求登錄，通過表單填寫賬戶信息服務(wù)器端：驗(yàn)證發(fā)來的賬號(hào)信息，然后給出反饋客戶端和服務(wù)器類似兩人溝通一樣，從而建立交互活動(dòng)<inputname="表單元素名稱"type="類型"value="值"size="顯示寬度"maxlength="對(duì)大長(zhǎng)度"checked="是否選中"/>指定元素的類型，可為text、radio、submit等控件的名稱控件的初始值控件的初始寬度控件中輸入的最多字符個(gè)數(shù)控件是否被選中checked表單元素的基本格式

表單元素的逐一介紹8-1文本框<formmethod="post"action=""><p>用戶名：<inputname="userName"type="text"size="21"/></p>……</form>單行文本輸入框，字符寬度為21name用于服務(wù)器端獲取數(shù)據(jù)，例如：request.getParameter("userName

")操作演示10：文本框應(yīng)用<input

name="名稱"

type="text"value="初值"

size="數(shù)字">表單元素的逐一介紹8-2

密碼框<formmethod="post"action=""><p>密

碼：

<input

name="pass"type="password"size="22"/></p>……</form>隱藏輸入的信息操作演示10：密碼框應(yīng)用<input

name="名稱"

type="password"

value="初值"

size="數(shù)字">表單元素的逐一介紹8-3

按鈕......<inputtype="reset"name="reset"value="重填"/><inputtype="submit"name="button"value="同意……"/><inputtype="button"name="confirm"value="點(diǎn)播音樂"/><inputtype="button"name="cancel"value="取消"/><inputtype="image"src="images/login.gif"/>……操作演示10：命名按鈕應(yīng)用<input

name="名稱"

type="按鈕類型"

value="按鈕文字"

src="圖片按鈕的圖片url">普通按鈕：button提交按鈕：submit重置（清空）按鈕：reset圖片按鈕：image表單元素的逐一介紹8-4

單選按鈕

......<br/>性別：<inputname="gen"type="radio"value="男"checked="checked"><inputname="gen"type="radio"value="女"

>……特點(diǎn)：?jiǎn)芜x名字name相同表明屬于同一組操作演示11：?jiǎn)芜x按鈕應(yīng)用<inputname=“組名"

type="radio"value=

"…"checked="…"

>表單元素的逐一介紹8-5

復(fù)選框

……愛好：

<inputtype="checkbox"name="hobby1"value="sports"/>運(yùn)動(dòng)

<inputtype="checkbox"name="hobby2"value="talk"

checked="checked"/>聊天

<inputtype="checkbox"name="hobby3"value="play"/>玩游戲……特點(diǎn)：多選操作演示12：復(fù)選框應(yīng)用<inputtype="checkbox"name="…"value="…"

checked=

"…"

>練習(xí)——貴美登錄頁(yè)需求說明：完成網(wǎng)站登錄頁(yè)面完成時(shí)間：20分鐘1、提交地址：login.jsp2、提交方法：post表單元素的逐一介紹8-6

文件域

......<p><inputtype="file"name="files"/><br/><inputtype="submit"name="upload"value="上傳"/></p>……顯示上傳文件的地址操作演示13：文件域應(yīng)用<inputtype="file"name="…"

>小結(jié)前面所學(xué)的各類表單元素，語法分別是什么？type功能例子text單行文本輸入<inputtype="text"name="username"/>password密碼<inputtype="password"name="password"/>radio單選<inputtype="radio"name="sex"value="男"/>男<inputtype="radio"name="sex"value="女"/>女checkbox多選<inputtype="checkbox"name="hobby"value="書"/>書<inputtype="checkbox"name="hobby"value="畫"/>畫reset重置表單數(shù)據(jù)<inputtype="reset"value="重置"/>file文件上傳<inputtype="file"name="files"/>submit提交表單數(shù)據(jù)<inputtype="submit"value="提交"/>image圖形提交按鈕<inputtype="image"src="images/button.gif"/>button普通按鈕<inputtype="button"value="播放音樂"/>表單元素的逐一介紹8-7

列表框......<selectname="bmon"><optionvalue=""selected="selected">[選擇月份]</option><optionvalue="0">一月</option><optionvalue="1">二月</option><optionvalue="2">三月</option><optionvalue="3">四月</option></select>……提供固定選項(xiàng)，避免用戶輸入錯(cuò)誤操作演示14：列表框應(yīng)用<select

name="指定列表名稱"

size="行數(shù)">

<option

value="選項(xiàng)值"

selected="selected">…</option>

…

…</select>表單元素的逐一介紹8-8

多行文本框

......<h2><imgsrc="images/read.gif"alt="閱讀協(xié)議"title="閱讀協(xié)議"/>閱讀貴美網(wǎng)服務(wù)協(xié)議</h2><p><textareaname="textarea"cols="40"rows="6">

歡迎閱讀服務(wù)條款協(xié)議...</textarea></p>……操作演示15：多行文本框應(yīng)用<textareaname="..."cols="列寬"rows="行寬">文本內(nèi)容</textarea>表單的高級(jí)用法2-1

隱藏域方便服務(wù)器端“記住”客戶端的信息、但又不希望客戶看到的數(shù)據(jù)

......<inputtype="hidden"name="userid"value="666"/>……隱藏的客戶代號(hào)信息：666，但客戶端頁(yè)面不顯示隱藏域：既方便服務(wù)器端“記住”客戶端的數(shù)據(jù)，又避免因顯示瀏覽者不關(guān)心的數(shù)據(jù)導(dǎo)致用戶反感操作演示16：隱藏域應(yīng)用<input

type="hidden"name="…."value="…"/>表單的高級(jí)用法2-2只讀和禁用屬性readonly：希望某個(gè)框內(nèi)的內(nèi)容只允許用戶看，不能修改disabled：因沒達(dá)到使用的條件，限制用戶使用<textareaname="content"cols="60"rows="8"readonly="readonly">歡迎閱讀服務(wù)條款協(xié)議，貴美的權(quán)利和義務(wù)......</textarea><br/><br/>同意以上協(xié)議<inputname="agree"type="checkbox"/><inputname="btn"type=