HTML表单用于从客户端收集用户在浏览器中的输入，是HTML实现客户端与服务器交互的核心方法。
一、文本输入
| 分类 | 标签 |
|---|---|
| 单行文本 | <input type="text"> |
| 多行文本 | <textarea> |
| 密码框 | <input type="password"> |
二、单项选择
| 分类 | 标签 |
|---|---|
| 单选按钮 | <input type="radio"> |
| 下拉列表 | <select>/<option> |
三、多项选择
标签：<input type="checkbox">
四、文件上传
标签：<input type="file">
五、边框
标签：<fieldset>
六、集成练习
用户注册界面
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<from name="input" action="url_from_action">
<fieldset>
<legend>用户注册</legend>
<!----------此处放置所有的输入控件----------->
<table>
<!----------文本输入----------->
<tr>
<td>用户名：</td>
<td><input type = "text" name = "name"></td>
<td>密码：</td>
<td><input type = "password" name = "pass"></td>
</tr>
<tr>
<td colspan = "2">备注：</td>
</tr>
<tr>
<td colspan = "4"><textarea name = "comment" rows = "5" cols = "60"></textarea></td>
</tr>
<!----------单选按钮----------->
<tr>
<td>性别：</td>
<td>男性<input type="radio" checked ="checked" name ="Sex" value="male" /></td>
<td>女性<input type="radio" name="Sex" value="female" /></td>
</tr>
<!----------下拉菜单----------->
<tr>
<td>学历：</td>
<td colspan="2">
<select name="grade">
<option value="middle_school">高中及以下</option>
<option value="high_school">专科</option>
<option value="bachlor" selected="selected">本科</option>
<option value="master">研究生及以上</option>
</select>
</td>
</tr>
<!----------多项选择----------->
<tr>
<td rowspan="2">兴趣爱好：</td>
<td>运动：<input type="checkbox" name="sport"></td>
<td>电影：<input type="checkbox" name="movie"></td>
<td>音乐：<input type="checkbox" name="music"></td>
</tr>
<tr>
<td>编程：<input type="checkbox" name="programming"></td>
<td>下厨：<input type="checkbox" name="cooking"></td>
<td>旅游：<input type="checkbox" name="tour"></td>
</tr>
<!----------文件上传----------->
<tr>
<td>头像上传：</td>
<td><input type="file" name="pic" accept=".png,.jpg,.gif"></td>
</tr>
</table>
<input type="submit" value="提交">
</fieldset>
</from>
</body>
运行效果图如下：
用户注册界面.PNG
网友评论