版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第6章
表單6.1添加表單
6.2輸入標(biāo)簽
6.3下拉列表
6.4文本域
6.5小結(jié)
6.1添加表單6.1.1鏈接跳轉(zhuǎn)
6.1.2鏈接跳轉(zhuǎn)方式
6.1.3表單名稱
6.1.1鏈接跳轉(zhuǎn)action屬性<formaction="鏈接跳轉(zhuǎn)的地址">設(shè)置各種表單元素</form>【示例6-1】設(shè)置表單的鏈接跳轉(zhuǎn)地址。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設(shè)置表單的處理程序</title>5
</head>6
<body>7
<p>表單的作用就是收集用戶信息。8
<formaction=mailto:html-css@163.com>9
<p><inputtype="submit"value="提交">10
</form>11
</body>12
</html>6.1.2鏈接跳轉(zhuǎn)方式method屬性<formmethod="表單的鏈接跳轉(zhuǎn)方式">表單元素</form>表單的鏈接跳轉(zhuǎn)方式一般可以設(shè)置為get和post兩種，其具體含義如表6.1所示。跳轉(zhuǎn)方式含義注意事項(xiàng)get表單數(shù)據(jù)會(huì)被視為參數(shù)發(fā)送，用戶輸入的數(shù)據(jù)會(huì)附加在URL之后，由用戶端直接發(fā)送至服務(wù)器，是METHOD屬性的默認(rèn)值其速度較快，但數(shù)據(jù)不能太長(zhǎng)。如果信息超過8192個(gè)字符，則可能會(huì)被截去，另外，該方式不具有保密性post表單數(shù)據(jù)與URL分開，將數(shù)據(jù)寫在表單主體內(nèi)發(fā)送沒有字符長(zhǎng)度的限制，可以發(fā)送較長(zhǎng)的信息，但速度相對(duì)較慢6.1.3表單名稱name屬性<formname="表單名稱">表單元素</form>6.2輸入標(biāo)簽6.2.1文本框
6.2.2密碼框
6.2.3單選按鈕
6.2.4復(fù)選框
6.2.5“提交”按鈕
6.2.6“重置”按鈕
6.2.7“圖像”按鈕
6.2.8文件域
6.2.9隱藏域
6.2.1文本框<form>
<inputtype="text"></form>【示例6-2】在表單中插入一個(gè)文本框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加文本框</title>5
</head>6
<body>7
<p>表單的作用就是收集用戶信息。</p>8
<form>9 輸入文字：<inputtype="text"/>10
</form>11
</body>12
</html>6.2.2密碼框<form>
<inputtype="password"></form>【示例6-3】在表單中設(shè)置一個(gè)密碼框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加密碼框</title>5
</head>6
<body>7
<p>表單的作用就是收集用戶信息。</p>8
<form>9
<p>姓名：<inputtype="text"/></p>10
<p>密碼：<inputtype="password"/></p>11
</form>12
</body>13
</html>6.2.3單選按鈕<form>
<inputtype="radio"name="名稱"></form>【示例6-4】在表單中添加一個(gè)單選按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加單選按鈕</title>5
</head>6
<body>7
<form>8
<p>選擇您所在的城市：<br/>9
<inputtype="radio"/>北京10
<inputtype="radio"/>上海11
<inputtype="radio"/>南京12
<inputtype="radio"/>石家莊13
</p>14
</form>15
</body>16
</html>下面將示例6-4代碼進(jìn)行更改。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加單選按鈕</title>5
</head>6
<body>7
<form>8
<p>選擇您所在的城市：<br/>9
<inputtype="radio"name="city"/>北京10
<inputtype="radio"name="city"/>上海11
<inputtype="radio"name="city"/>南京12
<inputtype="radio"name="city"/>石家莊13
</p>14
</form>15
</body>16
</html>6.2.4復(fù)選框<form>
<inputtype="checkbox"name="名稱"></form>【示例6-5】在表單中設(shè)置一個(gè)復(fù)選框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加復(fù)選框</title>5
</head>6
<body>7
<form>8
<p>選擇您想要的資訊內(nèi)容：<br/>9
<inputtype="checkbox"name="zixun"/>體育10
<inputtype="checkbox"name="zixun"/>美容11
<inputtype="checkbox"name="zixun"/>服飾12
<inputtype="checkbox"name="zixun"/>旅游13
</p>14
</form>15
</body>16
</html>6.2.5“提交”按鈕<form><inputtype="submit"name="名稱"value=""></form>【示例6-6】在表單中添加一個(gè)文本框、一個(gè)密碼框和一個(gè)“提交”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加“提交”按鈕</title>5
</head>6
<body>7
<p>表單的作用就是收集用戶信息。8
<form>9
<p>姓名：<inputtype="text"/></p>10
<p>密碼：<inputtype="password"/></p>11
<p><inputtype="submit"value="提交"/></p>12
</form>13
</body>14
</html>6.2.6“重置”按鈕<form>
<inputtype="reset"name="名稱"value=""></form>【示例6-7】在表單中添加一個(gè)文本框、一個(gè)密碼框和一個(gè)“重置”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加“重置”按鈕</title>5
</head>6
<body>7
<form>8
<p>姓名：<inputtype="text"/></p>9
<p>密碼：<inputtype="password"/></p>10
<inputtype="reset"value="重置"/>11
</form>12
</body>13
</html>6.2.7“圖像”按鈕<form>
<inputtype="image"src="圖像源文件"></form>【示例6-8】在表單中設(shè)置一個(gè)“圖像”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加“圖像”按鈕</title>5
</head>6
<body>7
<form>8
<p>姓名：<inputtype="text"/></p>9
<p>密碼：<inputtype="password"/></p>10
<inputtype="image"src="qd.jpg"/>11
</form>12
</body>13
</html>6.2.8文件域<form>
<inputtype="file"name="名稱"></form>【示例6-9】在表單中添加一個(gè)文件域。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁(yè)面添加文件域</title>5
</head>6
<body>7
<p>表單的作用就是收集用戶信息。</p>8
<form>9
<p><inputtype="file"/></p>10
</form>11
</body>12
</html>6.2.9隱藏域<form>
<inputtype="hidden"></form>【示例6-10】設(shè)置一個(gè)隱藏域，保存上次以及本次在文本框中輸入的內(nèi)容。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>隱藏域</title>5
<scriptlanguage="javascript">6
functiontesttxt()7
{8
if(myform.oldname.value.length==0)9
{alert("您是第一次輸入姓名，本次輸入的姓名為"+myform.myname.value)}10
else11
{alert("您上次輸入的姓名為"+myform.oldname.value+"\n本次輸入的姓名："+myform.myname.value)}12
myform.oldname.value=myform.myname.value13
}14
</script>15
</head>16
<body>17
<formname="myform"id="myform">18 請(qǐng)輸入您的姓名：<inputtype="text"name="myname"/>19
<inputtype="hidden"name="oldname"value=""/>20
<inputtype="button"onclick="testtxt()"value="確定"/>21
</form>22
</body>23
</html>6.3下拉列表<selectname="名稱">
<optionvalue="">選項(xiàng)內(nèi)容</option>
<optionvalue="">選項(xiàng)內(nèi)容</option>
<optionvalue="">選項(xiàng)內(nèi)容</option>
…</select>【示例6-11】在表單中設(shè)置一個(gè)下拉列表。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>下拉列表</title>5
</head>6
<body>7
<formname="myform1"id="myform1">8 用戶名：<inputtype="text"name="username"/><br/><br/>9 從何處得知本站：10
<selectname="where">11
<optionvalue="web">網(wǎng)絡(luò)</option>12
<optionvalue="newspapers">報(bào)刊</o
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 測(cè)試環(huán)境的搭建策略及技巧分享試題及答案
- 寄宿小學(xué)安全管理制度
- 商鋪關(guān)于餐飲管理制度
- 工程對(duì)上結(jié)算管理制度
- 計(jì)算機(jī)網(wǎng)絡(luò)知識(shí)點(diǎn)概述試題及答案
- 實(shí)驗(yàn)生物安全管理制度
- 學(xué)校資產(chǎn)報(bào)告管理制度
- 學(xué)生自我隔離管理制度
- 深入淺出網(wǎng)絡(luò)監(jiān)控工具介紹試題及答案
- 2024年國(guó)家大劇院招聘真題
- 2025年四川省綿陽(yáng)市富樂學(xué)校中考模擬英語(yǔ)試題（含答案）
- 文化產(chǎn)業(yè)發(fā)展的試題及答案
- 學(xué)校大型活動(dòng)組織流程
- 2025年教育信息化2.0背景下教師跨學(xué)科教學(xué)能力培養(yǎng)模式創(chuàng)新與優(yōu)化
- 浙江建筑b證試題及答案
- 2025-2030全球及中國(guó)協(xié)作機(jī)器人系統(tǒng)行業(yè)市場(chǎng)現(xiàn)狀供需分析及市場(chǎng)深度研究發(fā)展前景及規(guī)劃可行性分析研究報(bào)告
- 2025年高考政治搶押秘籍(江蘇專用)時(shí)政熱點(diǎn)05延遲法定退休年齡改革(學(xué)生版+解析)
- 落戶咨詢服務(wù)合同協(xié)議
- 職務(wù)轉(zhuǎn)讓協(xié)議書范本
- 財(cái)務(wù)公司調(diào)賬合同協(xié)議
評(píng)論
0/150
提交評(píng)論