表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
| 1 <div> 2 <h3>歡迎注冊本網站</h3> 3 <form> 4 所有的表單內容，都要寫在form標簽里面 5 </form> 6 </div> |
form是英語表單的意思。form標簽里面有action屬性和method屬性，action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有get、post兩種。
1 文本框
| 1 <input type="text" /> |
input表示“輸入”，指的是這是一個“輸入小部件”，
type表示“類型”，
text表示“文本”，指的是類型是一個文本框的輸入小部件。
這是一個自封閉標簽，自此，我們學習的自封閉標簽有：
| 1 <meta name=”Keywords” content=”” /> 2 <img src=”” alt=”” /> 3 <input type=”text” /> |
value表示“值”，value屬性就是默認有的值，文本框中已經被填寫好了：
| 1 <input type="text" value="默認有的值" /> |
2 密碼框
| 1 <input type="password" /> |
也就是說，input標簽很神奇，又是文本框，又是密碼框。
到底是啥？看type屬性的值是什么，來決定。
如果type=”text” 文本框
如果type=”password” 密碼框
3 單選按鈕
只能選一個，術語叫做“互斥”。
| 1 <input type="radio" name="xingbie" /> 男 2 <input type="radio" name="xingbie" /> 女 |
radio是“收音機”的意思，input的type的值，如果是radio就是單選按鈕。
非常像以前的收音機，按下去一個按鈕，其他的就抬起來了。所以叫做radio。
單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
| 1 <input type="radio" name="xingbie" /> 男 2 <input type="radio" name="xingbie" /> 女 |
默認被選擇，就應該書寫checked=”checked”
| 1 <input type="radio" name="sex" checked="checked"> |
4 復選框
也是input標簽，type是checkbox。
| 1 <p> 2 請選擇你的愛好： 3 <input type="checkbox" name="aihao"/> 睡覺 4 <input type="checkbox" name="aihao"/> 吃飯 5 <input type="checkbox" name="aihao"/> 足球 6 <input type="checkbox" name="aihao"/> 籃球 7 <input type="checkbox" name="aihao"/> 乒乓球 8 <input type="checkbox" name="aihao"/> 打豆豆 9 </p> |
復選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）
總結:
| 1 <input type="text" /> 文本框 2 <input type="password" /> 密碼框 1 <input type="radio"> 單選按鈕 2 <input type="checkbox" /> 復選框 |
5 下拉列表
select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
| 1 <select> 2 <option>北京</option> 3 <option>河北</option> 4 <option>河南</option> 5 <option>山東</option> 6 <option>山西</option> 7 <option>湖北</option> 8 <option>安徽</option> 9 </select> |
6 多行文本框（文本域）
text就是“文本”，area就是“區域”。
| 1 <textarea cols="30" rows="10"></textarea> |
這個標簽，是個標簽對兒。對兒里面不用寫東西。如果寫的話，就是這個框的默認文字。
cols屬性表示columns“列”，rows屬性表示rows“行”。
值就是一個數，表示多少行，多少列。
7 三種按鈕
按鈕也是input標簽，一共有三種按鈕：
普通按鈕：
| 1 <input type="button" value="我是一個普通按鈕" /> |
button就是英語“按鈕”的意思。value就是“值”的意思，按鈕上面顯示的文字。
提交按鈕：
| 1 <input type="submit" /> |
submit就是英語“提交”的意思。這個按鈕不需要寫value自動就有“提交”文字。
這個按鈕點擊，表單真的能提交。這個表單就會被提交到，form標簽的action屬性中的那個頁面中去。
前端開發工程師，只需要關心頁面的美、樣式、板式、交互。至於數據的保存、讀取，都是后台工程師做的事情。（Node.js我們猴年要學，Node.js就是后台語言，到時候我們就知道怎么把表單存儲到數據庫中了。實際上Ajax課會給大家講半天的PHP，涉及MySQL，Ajax課你就知道表單怎么真的被提交了。）
重置按鈕：
| 1 <input type="reset" /> |
reset就是“復位”的意思。
至此，input的類型實際上非常多，HTML5將會變得更多。現在的階段，input的類型：
| 1 text 2 password 3 radio 4 checkbox 5 button 6 submit 7 reset |
8 label標簽
本質上講，“男”、“女”這兩個漢字，和input元素沒有關系。
| 1 <input type="radio" name="sex" /> 男 2 <input type="radio" name="sex" /> 女 |
label就是解決這個問題的。
| 1 <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> 2 <input type="radio" name="sex" id="nv" /> <label for="nv">女</label> |
input元素要有一個id，然后label標簽就有一個for屬性，和id相同，就表示綁定了，這個label和input就有綁定關系了。
復選框也有label：
| 1 <input type="checkbox" id="kk" /> 2 <label for="kk">10天內免登陸</label> |
什么表單元素都有label。