Python3学习:HTML表单
2017-11-28 本文已影响3人
虞锦雯
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