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 >注册表单</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"/>电影
textarea中cols表示<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>
显⽰效果如下:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论