表單的輸入控件主要是input和select。其中input可以是多種類型,通過type屬性來進行定義,type可以取值是text,radio,checkbox,password,submit,reset.
select是和option組合使用的。后台要想獲得表單的值,是通過name屬性的值來獲得用戶的輸入。
后台獲取的值:
input-text-name
input-redio-name-value
input-checkbox-name-value
input-password-name
input-textarea-name
select-option-name-value
下面是綜合應用這些組成一個注冊表單。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <center> <h1 style="color:blue;">注冊表單</h1> <hr/> <form name="reg" action="regsuccess.html" method="post"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td>用戶名:</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>確認密碼:</td> <td><input type="password" name="confirmpwd"/></td> </tr> <tr> <td>電子郵箱:</td> <td><input type="text" name="email"/></td> </tr> <tr> <td>性別:</td> <td><input type="radio" name="gender" value='1' checked/>男<input type="radio" name="gender" value='0'/>女</td> </tr> <tr> <td>學歷:</td> <td> <select name="edulevel"/> <option value="-1">--請選擇學歷--</option> <option value="0">小學</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">學士</option> <option value="4">碩士</option> <option value="5">博士</option> <option value="6">博士后</option> </td> </tr> <tr> <td>愛好:</td> <td> <input type="checkbox" name="hoby" value="reading"/>讀書 <input type="checkbox" name="hoby" value="movie"/>電影 <input type="checkbox" name="hoby" value="shopping"/>購物 <input type="checkbox" name="hoby" value="internet"/>上網 <input type="checkbox" name="hoby" value="other"/>其他 </td> </tr> <tr> <td>上傳頭像:</td> <td><input type="file"/></td> </tr> <tr> <td>服務協議:</td> <td><textarea rows="10" cols="40">rule 1</textarea></td> </tr> <tr> <td>是否接受協議:</td> <td><input type="checkbox"name='rule'value='accept'/>接受</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注冊"> <input type="reset" value="重置"/></td> </tr> </table> </form> </center> </body> </html>
顯示效果如下: