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

WBOY
Freigeben: 2016-06-24 11:17:30
Original
1233 Leute haben es durchsucht

表单的输入控件主要是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>
Nach dem Login kopieren

显示效果如下:

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage