首頁 > web前端 > html教學 > html表单的各种输入控件_html/css_WEB-ITnose

html表单的各种输入控件_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:17:30
原創
1258 人瀏覽過

表单的输入控件主要是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>
登入後複製

显示效果如下:

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板