一、什么是表單
- 可以收集用戶的信息和反饋意見，是網站管理者與瀏覽者之間溝通的橋梁。
- 表單元素指的是不同類型的 input 元素，比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選（checkboxes)、提交按鈕（button）等等。
-
表單的種類有注冊表、留言薄、站點導航條、搜索引擎等。
如圖：
經典表單.jpg
二、表單的標簽<form>
form：包裹表單，形成完整的數據
form標簽有兩個屬性如下：
- action —— 這個屬性規定該表單提交的信息存儲的文件以及它的地址
- method —— 這個屬性規定該表單的提交方式
瀏覽器向服務器傳輸數據、發送請求的方式有兩種 get、post
- get：將所有的請求數據拼接成key=value的形式連接一起，組裝到URL上【類似搜索使用】
- post：請求的URL不會發生變化，但是數據會通過瀏覽器傳輸給后臺【賬號密碼使用】
兩者的使用場景
當向后臺傳送數據或者安全性要求更高時選擇post
當向后臺索要數據或者簡單的安全性要求低是選擇get
三、標簽<input>
- 用處：<input>標簽一般用于給用戶輸入信息，服務器收集用戶輸入的信息
一般格式為：<input type="?" name="?" value="?">
1.用戶名：<input type = "text" name="username">
和密碼框一樣都是單行輸入框，用于給用戶輸入賬號用戶名之類；
2.密碼框：<input type = "password" name="password">
用于給用戶輸入密碼，輸入后信息會被偽裝成小圓點；
如圖：
3.單選框：當 type=radio 時為 “單選框”
例如：
<input type = "radio" name="sex" value="male">男
<input type = "radio" name="sex" value="female" checked/>女
用于給用戶選擇只能選擇一項的選擇
①：單選框name屬性必須要有，且每個選項的name值必須相同；
②：value屬性的值也要有，否則提交后服務器顯示的是on，就不能獲悉提交的內容是什么
注：checked是為了默認選項
如圖：
4.復選框（checkbox）:當 type=checkbox 時為 “復選框”
<input type="checkbox" name="?" value="?">
例如：
<input type="checkbox" name="hobby" value="sing" >聽歌
<input type="checkbox" name="hobby" value="book" >看書
<input type="checkbox" name="hobby" value="run" >跑步
注：同一組選項，name屬性必須保持一致；
因：name屬性相同則屬同一組選項，name屬性不同則屬于多組選項
如圖：
5.文件上傳：當 type=file 時為 “上傳文件框”
<input type="file" name = "上傳文件的在服務器的名字" accept="規定文件類型">，用于給用戶上傳文件
注： < accept="image/png" > 意思是 可上傳文件的類型為 “ png格式的圖片 ”，即 < accept="?" > 屬性的意思是 規定可上傳文件的類型。
如圖：
6.隱藏域：當 type=hidden 時為 “隱藏”
<input type="hidden" name = "上傳到服務器該數據的key" value="上傳到服務器該數據的值">
注：此條信息不做展示，所以用戶不會看到；hidden 用于暫存信息、安全校驗
7.按鈕：當type=button時為“按鈕”
<input type="button" value="Buttom" >
如圖：
注：點擊按鈕不會向服務器提交表單數據信息
8.提交表單：當type=submit時為“提交表單”
<input type="submit" value="submit" >
如圖：
注：點擊按鈕會向服務器提交表單數據信息
9.重置表單:當type=reset時為“重置”
<input type="reset" value="重置" >
如圖：
注：點擊按鈕會重置表單內所有信息為初始狀態，清空表單內填寫的信息
四、下拉菜單標簽<select><option>
- 用法：select標簽---下拉菜單
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" >上海</option>
<option value="hangzhou">杭州</option>
</select>
- 如何設置下拉菜單默認選項？ 使用selected即可，默認選擇上海如下所示：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai" selected> 上海</option>
<option value="hangzhou">杭州</option>
</select>
如圖：
五、文本域<textarea>——多行文本
<textarea name="article"> 你好，這里是饑人谷！ </textarea>
注：多行文本框可拖動大小，需要使用其他代碼鎖住多行文本框的大小；多行文本框敲擊回車可以換行，應注意與 type=text 的區別
如圖：
六、label標簽---定義 <input> 元素的標簽，一般為元素標簽的標題
<label>用戶名</label>
<input type="text" name="username" >
OR
<label for="username">用戶名</label>
<input type="text" name="username" id="username">
區別是使用第二種編寫代碼時，點擊 “用戶名” 標題，“用戶名輸入框” 可變為選中狀態；
而使用第一種編寫代碼時，點擊 “用戶名” 標題毫無作用
七、<input>的常用屬性添加
- placeholder：用于提示用戶該輸入框內容
- maxlength：規定輸入框的最大輸入字數
- disabled：該輸入框禁止輸入
最后
****文章著作權歸饑人谷_Shirley和饑人谷所有，轉載須說明來源****
