版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
第6章
表單6.1添加表單
6.2輸入標簽
6.3下拉列表
6.4文本域
6.5小結
6.1添加表單6.1.1鏈接跳轉
6.1.2鏈接跳轉方式
6.1.3表單名稱
6.1.1鏈接跳轉action屬性<formaction="鏈接跳轉的地址">設置各種表單元素</form>【示例6-1】設置表單的鏈接跳轉地址。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>設置表單的處理程序</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鏈接跳轉方式method屬性<formmethod="表單的鏈接跳轉方式">表單元素</form>表單的鏈接跳轉方式一般可以設置為get和post兩種，其具體含義如表6.1所示。跳轉方式含義注意事項get表單數據會被視為參數發送，用戶輸入的數據會附加在URL之后，由用戶端直接發送至服務器，是METHOD屬性的默認值其速度較快，但數據不能太長。如果信息超過8192個字符，則可能會被截去，另外，該方式不具有保密性post表單數據與URL分開，將數據寫在表單主體內發送沒有字符長度的限制，可以發送較長的信息，但速度相對較慢6.1.3表單名稱name屬性<formname="表單名稱">表單元素</form>6.2輸入標簽6.2.1文本框
6.2.2密碼框
6.2.3單選按鈕
6.2.4復選框
6.2.5“提交”按鈕
6.2.6“重置”按鈕
6.2.7“圖像”按鈕
6.2.8文件域
6.2.9隱藏域
6.2.1文本框<form>
<inputtype="text"></form>【示例6-2】在表單中插入一個文本框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加文本框</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】在表單中設置一個密碼框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加密碼框</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】在表單中添加一個單選按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加單選按鈕</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代碼進行更改。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加單選按鈕</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復選框<form>
<inputtype="checkbox"name="名稱"></form>【示例6-5】在表單中設置一個復選框。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加復選框</title>5
</head>6
<body>7
<form>8
<p>選擇您想要的資訊內容：<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】在表單中添加一個文本框、一個密碼框和一個“提交”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加“提交”按鈕</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】在表單中添加一個文本框、一個密碼框和一個“重置”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加“重置”按鈕</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】在表單中設置一個“圖像”按鈕。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加“圖像”按鈕</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】在表單中添加一個文件域。1
<!DOCTYPEhtml>2
<html>3
<head>4
<title>為頁面添加文件域</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】設置一個隱藏域，保存上次以及本次在文本框中輸入的內容。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 請輸入您的姓名：<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="">選項內容</option>
<optionvalue="">選項內容</option>
<optionvalue="">選項內容</option>
…</select>【示例6-11】在表單中設置一個下拉列表。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">網絡</option>12
<optionvalue="newspapers">報刊</o
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 網絡工程師2025年考試實例和試題及答案講解
- 比較西方與其他地區政治體系功能試題及答案
- 機電工程策劃與實施的思考及試題與答案
- 機電工程基礎裝備試題及答案
- 軟件設計師考試技術深度探討試題及答案
- 網絡工程師復習攻略及試題及答案
- 技術創新與公共政策的對接試題及答案
- 信息系統項目管理的效果評估試題及答案
- 網絡工程師面臨的新挑戰試題及答案
- 深入研究西方國家的經濟治理與公共安全的互動關系試題及答案
- 防恐防暴安全班會課件
- 《人工智能：AIGC基礎與應用》高職全套教學課件
- 2024年貴州省貴陽市觀山湖區中考二模物理試題（含答案）
- 工匠精神概述課件
- 國家安全教育大學生讀本課件高教2024年8月版課件-第七章堅持以軍事、科技、文化、社會安全為保障
- 《SDN技術及應用》課件-第2章
- 2025屆四川省德陽市第一中學重點達標名校中考沖刺卷生物試題含解析
- 2025年春新北師大版數學一年級下冊課件 第六單元 第1課時 認識圖形
- 小學語文閱讀答題技巧課件
- 《心肺復蘇及電除顫》課件
- 福建省廈門市湖里2024-2025學年區中考物理質檢檢測試題（三模）含答案
評論
0/150
提交評論