1、表單語法 method: 規定如何發送表單數據常用值：get post 在實際網頁開發中通常採用post方式提交表單數據 action: 表示向何處發送表單數據 <form method="post" action="result.html"> <p>名字：<input name="name" ...
1、表單語法
method: 規定如何發送表單數據常用值：get post
在實際網頁開發中通常採用post方式提交表單數據
action: 表示向何處發送表單數據
<form method="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>
2、13個表單元素
1、文本框
<!--type="text" name：文本框名稱(必填) value：文本框初始值 size：文本框長度 maxlength：文本框可輸入最多字元 --> <input type="text" name="userName" value="用戶名" size="30" maxlength="20"/>
2、密碼框
向密碼框中輸入字元時，顯示的效果，密碼字元以黑色實心的圓點來顯示。
<!--type="password" name：密碼框名稱(必填) size：密碼框長度 --> <input type="password" name="pass" size="20"/>
3、單選按鈕
同一組單選按鈕，name屬性值必須相同，才能在選中單選按鈕時達到互斥
<!--type="radio" name：單選框名稱(必填)，一組的名稱需要相同 checked：單選按鈕選中狀態 value：單選框的值 --> <input name="gen" type="radio" value="男" checked />男 <input name="gen" type="radio" value="女" />女
4、覆選框
同一組覆選框，根據需要可設置name屬性值相同
<!--type="checkbox" name：覆選框名稱(必填)，一組的名稱需要相同 checked：覆選按鈕選中狀態 value：覆選框的值 --> <input type="checkbox" name="interest" value="sports"/>運動 <input type="checkbox" name="interest" value="talk" checked />聊天 <input type="checkbox" name="interest" value="play"/>玩游戲
5、下拉列表框
希望在頁面載入時有預設選中的選中項，則必須使用selected屬性，如果沒有預設選中項則第一個選項 預設被選中
<!--select:下拉列表框--> <!--option：選項--> <select name="列表名稱" size="行數"> <option value="選項的值" selected="selected">…</option > <option value="選項的值">…</option > </select>
6、按鈕
<!--重置按鈕--> <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" />
7、多行文本域
textarea：多行文本域 cols：顯示的列數 rows：顯示的行數 <textarea name="showText" cols="x" rows="y">文本內容 </textarea>
8、文件域
在表單中使用文件域時，必須設置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數據 分為多部分提交。
enctype：表單編碼屬性 <form action="" method="post" enctype="multipart/form-data"> <p> <!--type="file" 文件域--> <input type="file" name="files" /> <input type="submit" name="upload" value="上傳" /> </p> </form>
9、郵箱
會自動驗證Email地址格式是否正確
郵箱:<input type="email" name="email"/>
10、網址
會自動驗證Email地址格式是否正確
請輸入你的網址:<input type="url" name="userUrl"/>
11、數字
min：最小值 max：最大值 step：步長 請輸入數字:<input type="number" name="num" min="0" max="100" step="10"/>
12、滑塊
type值為range即為滑塊。
請輸入數字:<input type="range" name="range1" min="0" max="10" step="2"/>
13、搜索框
type值為search即為搜索框。
請輸入搜索的關鍵詞:<input type="search" name="sousuo"/>
3、表單的高級應用
在某些註冊頁面或本圖片中訂單信息頁面，必須同意一些條款按鈕才能使用等等
- 隱藏域
在瀏覽器中看不到隱藏域，但是在提交表單時可以看到隱藏域的內容被提交至伺服器
<input type="hidden" value="666" name="userid">
- 只讀、禁用
W3C HTML5標準中，規定對於布爾類型的屬性，屬性值可以省略
只讀和禁用不能單寫readonly或disabled，必須寫readonly＝”readonly”和disabled=“disabled” <input name="name" type="text" value="張三" readonly> <input type="submit" disabled value="保存" >
- 表單元素的標註
增強滑鼠的可用性
自動將焦點轉移到與該標註相關的表單元素上
<!--它的for屬性對應的id與表單元素id一致--> <label for="id">標註的文本</label> <input type="radio" name="gender" id="male"/>
4、表單的初級驗證
如果用戶填寫的表單內容不進行驗證就發給伺服器，那麼伺服器發現填寫的不合法，或是沒有填寫，就 會返迴響應給用戶，用戶重新填寫再提交，如此多次持續直到用戶輸入正確。它們之間的通信是通過網 絡進行的，如果網路很差，那麼註冊一個賬號就得花很長時間，對用戶來說是非常煩的，對伺服器來說 也增加了其工作壓力。
要是有惡意的用戶向伺服器發送病毒或是有害於伺服器安全的程式就更危險了。
表單驗證的好處：
- 減輕伺服器的壓力。
- 保證數據的可行性和安全性。
在客戶端就對錶單進行驗證是非常有必要的
表單初級驗證的方法
- placeholder
提示語預設顯示，當文本框中輸入內容時提示語消失
<input type="search" name="sousuo" placeholder="請輸入要搜索的關鍵字"/>
- required
規定文本框填寫內容不能為空，否則不允許用戶提交表單
<input type="text" name="username" required/>
- pattern
用戶輸入的內容必須符合正則表達式所指的規則，否則就不能提交表單
<input type="text" name="tel" required pattern="^1[358]\d{9}" />
5、小結
本文來自博客園，作者：腹白，轉載請註明原文鏈接：https://www.cnblogs.com/wyh518/
