<form method="post"（規定如何發送表單數據 常用值：get|post）
action="result.html">（表示向何處發送表單數據）
<p> 名字：<input name="name" type="text" > </p>
<p> 密碼：<input name="pass" type="password" > </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填“/>
</p>
</form>
經驗：在實際網頁開發中通常採用post方式提交表單數據
表單元素格式
語法：
<input type="text"（input元素類型）name="fname"（input元素名稱）
value="text"（input元素的值）/>
屬性
說明
type
指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認爲 text
name
指定表單元素的名稱
value
元素的初始值。type 爲 radio時必須指定一個值
size
指定表單元素的初始寬度。當 type 爲 text 或 password時，表單元素的大小以字符爲單位。對於其他類型，寬度以像素爲單位
maxlength
type爲text 或 password 時，輸入的最大字符數
checked
type爲radio或checkbox時，指定按鈕是否是被選中
表單元素
文本框-語法
<input type="text"(文本框) name="userName"(文本框名稱) value="用戶名"(文本框初始值) size="30"(文本框長度) maxlength="20"(文本框可輸入最多字符) />
密碼框-語法
<input type="password "(密碼框) name="pass"(密碼框的名稱) size="20"(密碼框的長度) />
單選按鈕-語法
<input name="gen" type="radio"(單選按鈕框) value="男"(值) checked(單選按鈕選中狀態) />男
<input name="gen" type="radio" value="女" />女
複選框-語法
<input type="checkbox"(複選框) name="interest" value="sports"(值)/>運動
<input type="checkbox" name="interest" value="talk" checked(複選框選中狀態) />聊天
<input type="checkbox" name="interest" value="play"/>玩遊戲
列表框-語法
<select(列表框) name="列表名稱" size="行數">
<option value="選項的值" selected="selected"(默認選中項)>…</option >
<option(選項) value="選項的值">…</option >
</select>
按鈕-語法
<input type="reset" (重置按鈕) name="butReset" value="reset按鈕"(按鈕上顯示的文字)>
<input type="submit"(提交按鈕) name="butSubmit" value="submit按鈕">
<input type="button"(普通按鈕) name="butButton" value="button按鈕"/>
圖片按鈕
<input type="image" src="images/login.gif"/(圖片路徑)>
多行文本域-語法
<textarea(多行文本域) name="showText" cols="x"(顯示的列數) rows="y"(顯示的行數)>文本內容 </textarea >
文件域-語法
<form action="" method="post" enctype="multipart/form-data"（表單編碼屬性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
郵箱-語法
<p>郵箱:<input type="email"（郵箱） name="email"/></p>
<input type="submit"/>
注意：會自動驗證Email地址格式是否正確
網址-語法
<p>請輸入你的網址:<input type="url"（網址） name="userUrl"/></p>
<input type="submit"/>
注意：會自動驗證URL地址格式是否正確
數字-語法
<p>請輸入數字:<input type="number"(數字) name="num" min="0"(允許的最小值) max="100"(允許的最大值) step(合法的數字間隔)="10"/></p>
<input type="submit"/>
滑塊-語法
<p>請輸入數字:<input type="range"(滑塊) name="range1" min="0"(允許的最小值) max="10"(允許的最大值) step(合法的數字間隔)="2"/></p>
<input type="submit"/>
搜索框-語法
<p>請輸入搜索的關鍵詞:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>
表單的高級應用
隱藏域-語法
<input type="hidden"(隱藏域) value="666" name="userid">
只讀和禁用-語法
<input name="name" type="text" value="張三" readonly(只讀文本框)>
<input type="submit " disabled （禁用） value="保存" >
表單元素的標註
1.增強鼠標的可用性
2.自動將焦點轉移到與該標註相關的表單元素上
語法
<label for="id"(表單元素的id)>標註的文本</label>
<input type="radio" name="gender" id="male"/(表單元素id)>
表單的初級驗證
表單驗證的好處
1.減輕服務器的壓力
2.保證數據的可行性和安全性
表單初級驗證的方法
1.placeholder 2.required 3.pattern
placeholder
1.input類型的文本框提供一種提示（hint）
2.可以描述文本框期待用戶輸入何種內容
3.提示語默認顯示，當文本框中輸入內容時提示語消失
4.適合於input標籤：text、search、url、email和password等類型
語法：
<input type="search" name="sousuo" placeholder(文本框輸入內容提示)="請輸入要搜索的關鍵字"/>
required
1.規定文本框填寫內容不能爲空，否則不允許用戶提交表單
2.適合於input標籤：text、search、url、email、password、number、checkbox、radio、file等類型
語法：
<input type="text" name="username" required/(必填項)>
pattern
用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單
語法：
<input type="text" name="tel" required pattern（驗證規則，正則表達式）="^1[358]\d{9}" />
---------------------
作者：北方的南先生
來源：CSDN
原文：https://blog.csdn.net/nanjinzhu/article/details/82251110
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！