html--form表單常用操作
form表單
用於收集使用者資訊，如：登入、註冊等場景；所有要提交的資料都必須放在form標籤中<form action=" " method=" ">
action：提交地址、動作，與input標籤中typy標籤的submit屬性相關聯。 <input type="submit" value="提交" />，提交地址是action的地址
method:提交方法，有get和post兩種提交方法。
get方法：提交資料可以再URL中看見，
例如：（1）以http://reg.email.163.com/unireg/call.do?cmd=register.entrance&from=126mail傳遞引數
（2）URL長度有限制，所以傳遞的引數資料就有限制
（3）由於資料可以看見，所以不安全
（4）網頁預設的請求是get
post方法：
1. 將form data 儲存在http的請求體
2. 沒有長度限制
3. 安全的
4. 往往在開發中用於提交資料form表單提交post
5. 檔案上傳 method = post enctype=multipart/form-data
input標籤：輸入框，是表單中最重要的部分
name：指定名字，因為提交的是鍵值對，所以必須要指定名字，否則無法提交，即使提交了也沒有意義
value：文字框的內容，一般用在不能輸入的型別中，如改變按鈕的名字等。
placeholder：佔位內容，通常用於提示：
<input type="text" name="emailId" placeholder="輸入賬號" />
readonly：只讀模式，設定後無法修改輸入框的內容
disabled：禁用狀態
<input type="text" name="emailId" placeholder="輸入賬號" disabled="disabled"/>
size：由於輸入框是單行的，所以只能設定寬度
maxlength：限制輸入框最大輸入的字元個數
type屬性：
text：普通文字，標籤的預設屬性時text ，通常如輸入使用者名稱用的是text
passworld：密文文字，輸入的內容不顯示。如密碼輸入框
submit：提交按鈕。上文提到過，要與action一起用。
radio：單選框，多個關聯選項name屬性要一致，需要設定value，預設選中用checked設定
<labke for=""></lable>:用於關聯單選按鈕與文字。
性別：<input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label> <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label><br/>
CheckBox：複選框，屬性與單選框類似
愛好：<input type="checkbox" name="like" value="sport" id="1"/><label for="1">運動</label> <input type="checkbox" name="like" value="music"id="2"/><label for="2">音樂</label> <input type="checkbox" name="like" value="song" id="4"/><label for="4">唱歌</label> <input type="checkbox" name="like" value="games" id="5"/><label for="5">遊戲</label><br/>
file：檔案上傳，需要進行配套設定。提交方法需要用post
hidden：隱藏欄位，該欄位根普通欄位一樣，但是不會在頁面上顯示
<input type="hidden" name="csrf_hidden" value="hdsuifhudsifhsdoi">
除了輸入框外常用的還有下拉選擇框和文字域
select：下拉選擇框
size：可以設定高度(選項個數)
每個選項都是一個option，必須指定value，預設選中使用屬性selected
籍貫：<select name="from"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">廣州</option> <option value="sz">深圳</option> </select><br/>
textarea：文字域。
屬性：
cols：列數(寬度)
rows：行數(高度)
注意：不要在標籤書寫任何多餘的內容
簡介：<textarea name="intro" cols="20" rows="5"></textarea><br/> <input type="submit" value="註冊"><br/>
例子：
為了對齊方便使用table表格標籤來輔助對齊。
<html> <head> <meta charset="utf-8"> <title></title> </head> <body background="timg.jpg"> <h1>還沒有賬號？趕緊註冊一個吧！</h1> <form> <table width="500px" heigth="300px" border="0" bordercolor="red" align="center"cellspacing="0" cellpadding="0"> <tr> <td align="right" padding="0">電子郵箱：</td> <td align="left" padding><input type="text" name="emil" placeholder="請輸入："/><br/></td> </tr> <tr> <td></td> <td>您可以使用<a href="#">郵箱</a>或者<a href="#">手機號</a>註冊 <br/></td> </tr> <tr> <td align="right">建立密碼：</td> <td><input type="password" name="pwd"></td> </tr> <tr> <td align="right">真實姓名：</td> <td><input type="text" name="name" placeholder="請輸入："/></td> </tr> <tr> <td align="right">性別：</td> <td><input type="radio" name="sex" value="0" id="nan"/><label for="nan">男</label> <input type="radio" name="sex" value="1" id="nv"/><label for="nv">女</label></td> </tr> <tr> <td align="right">生日：</td> <td><input type="date" name="date"/><br/></td> </tr> <tr> <td align="right">我現在：</td> <td><input type="radio" name="work" value="school"/>正在上學 <input type="radio" name="work" value="worker"/>已經工作 <input type="radio" name="work" value="other"/>其他</td> </tr> <tr> <td align="right"> 現居地：</td> <td><input type="text" name="address" placeholder="請輸入："/></td> </tr> <tr> <td></td> <td><input type="checkbox" name="name" value="agree"/>同意<a href="#">服務條款</a></td> </tr> <tr> <td></td> <td><input type="submit" value="立即註冊"/></td> </tr> </table> </form>