表單語法
<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元素的值）/>
表單元素
文本框-語法
<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)>
表單類型
此類型要求輸入格式正確的email地址,否則瀏覽器是不允許提交的,並會有一個錯誤信息提示.此類型在Opera中必須指定name值,否則無效果.
<input type=email >
url
要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://.
<input type=url >
number
要求輸入格式數字，默認會有上下兩個按鈕，opera支持更好
<input type=number >
tel
此類型要求輸入一個電話號碼,但實際上它並沒有特殊的驗證,與text類型沒什么區別.
<input type=tel >
range
此類型將顯示一個可拖動的滑塊條,並可通過設定max/min/step值限定拖動范圍.拖動時會反饋給value一個值.
<input type=range min=20 max=100 step=2 >
color
此類型表單,可讓用戶通過顏色選擇器選擇一個顏色值,並反饋到value中,可以設置默認值
<input type=color value=#ff0000 >
date, time, datetime, datetime-local, month, week
這一系列是很酷的一個類型,完全解決了煩瑣的JS日歷控件問題.但目前MS只有Opera/Chrome新版本支持,且展示效果也不一樣.
- <input type=date >
- <input type=time >
- <input type=datetime >
- <input type=datetime-local >
- <input type=month >
- <input type=week >
time
<input type=time >
datetime
<input type=datetime >
datetime-local
<input type=datetime-local >
month
<input type=month >
week
<input type=week >
search
此類型表示輸入的將是一個搜索關鍵字,通過results=s 或者 x-webkit-speech 可顯示一個搜索小圖標. [在chrome下才能看得見]
<input type=search results=s >
required
表單驗證屬性為require類型時,若輸入值為空,則拒絕提交,並會有一個提示.這個很有用.並且可以用於textarea以及hidden/image/submit類型.
<input type=text required >
pattern
pattern類型為正則驗證,可以完成各種復雜的驗證.這兩種類型在Opera中必須指定name值,否則無效果.
<input type=email required pattern=\w+@[a-z0-9]+\.[a-z]+/g >
placeholder
這是一個很實用的屬性,免去了用JS去實現點擊清除表單初始值.瀏覽器支持也還不錯,標准瀏覽器都能很好的支持.
<input type=text placeholder="your message" >
autofocus
默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,類似於JS的focus().
<input type=text autofacus="true" >
list
該屬性需要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性可以為選擇框自定義記憶的內容.
- <input type="text" list="ilist">
- <datalist id="ilist">
- <option label="a" value="a">aaaaa</option>
- <option label="b" value="b">bbbbb</option>
- <option label="c" value="c">ccccc</option>
- </datalist>
autocomplete
此屬性是為表單提供自動完成功能.如果該屬性為打開狀態可很好地自動完成.一般來說,此屬性必須啟動瀏覽器的自動完成功能.
<input type=text autocomplete="on" >
keygen
keygen 標簽規定用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。所有主流瀏覽器都支持 keygen 標簽，除了 Internet Explorer 和 Safari。
<keygen name="keygen" />
datalist
datalist 標簽定義選項列表。與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。 用 input 元素的 list 屬性來綁定 datalist。
<label for="search">搜索引擎</label>
<input type="url" name="search" id="search" list="searchlist" autocomplete="on" pattern="https?://.+" />
<datalist id="searchlist">
<option value="http://www.baidu.com/" >
<option value="http://www.google.com/" >
<option value="http://www.sogou.com/" >
</datalist>
output
output 標簽定義不同類型的輸出，比如腳本的輸出。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_output
meter
meter 標簽定義度量衡。僅用於已知最大和最小值的度量。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_meter
progress
progress 標簽定義運行中的進度（進程）。可以使用 progress 標簽來顯示 JavaScript 中耗費時間的函數的進度。
演示地址：http://www.w3school.com.cn/tiy/t.asp?f=html5_progress
contenteditable
此屬性可以讓摸個元素里面的文本節點或值變為可編輯
<p contenteditable="true" >可以編輯的內容</p>
可以編輯的內容
form表單演示
你的位置： 前端開發博客 > HTML5手冊 >