html表單的各種輸入控件


表單的輸入控件主要是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>

顯示效果如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM