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

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

下面是综合应用这些组成一个注册表单。

 <meta charset="utf-8"><title></title><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"></select><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>

显示效果如下：

 

前端入门到VUE实战笔记：立即学习
>在学习笔记中，你将探索 前端 的入门与实战技巧！