02 HTML 表单标签
By Kevin Song
- 02-01 < input>标签
- 02-02 < select>标签
- 02-03 表单格式化
< form>
< /form>
表单是最常用的标签，用于与服务器端的交互
常用属性
- action
- method
02-01 < input>标签
< input type=”属性值” />：输入标签，接受用户输入信息
type属性的10个值
- text：文本框
- password：密码框
- radio：单选框
- name：组名，同一组的只能选一个
- checked：默认选定
- checkbox：复选框
- reset：重置
- value：自定义按钮名称
- submit：提交
- value：自定义按钮名称
- file：选择文件
- image：图片超链接
- hidden：隐藏组件，数据不需要客户端知道，但是可以将其提交到服务器端
- button：按钮
- onclick：点击触发
如果要给服务器提交数据：表单中的组件必须有name和value属性
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<form>
1. 输入姓名：<input type="text" name="user" value="" /><br/>
2. 输入密码：<input type="password" name="pwd"/><br/>
3. 选择性别：<input type="radio" name="gender" value="man"/>男<br/>
<input type="radio" name="gender" value="woman" checked="checked"/>女<br/>
4. 选择技术：<input type="checkbox" name="tech" value="Java"/>Java<br/>
<input type="checkbox" name="tech" value="C++"/>C++<br/>
<input type="checkbox" name="tech" value="Python"/>Python<br/>
5. 选择文件：<input type="file" name="file" value="" /><br/>
6. 图片按钮：<input type="image" src="11.jpg"><br/>
7. 隐藏组件：<input type="hidden" src="11.jpg"><br/>
8. 一个按钮：<input type="button" value="按钮" onclick="alert('爱你欧')"><br/>
<input type="reset" value="重置表单">
<input type="submit" value="提交表单">
</form>
</body>
</html>02-02 < select>标签
下拉菜单
<select>
<option value="none">--选择国家--</option>
<option value="USA">美国</option>
<option value="CN" selected="selected">中国</option>
<option value="KR">韩国</option>
</select>文本框
<textarea name="text"></textarea>02-03 表单格式化
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<table border="1" bordercolor="#00ffff">
<tr>
<thcolspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" name="user" value="" /></td>
</tr>
<tr>
<td>输入密码</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td>选择性别</td>
<td>
<input type="radio" name="gender" value="man" />男
<input type="radio" name="gender" value="woman" />女
</td>
</tr>
<tr>
<td>选择技术</td>
<td>
<input type="checkbox" name="tech" value="Java"/>Java
<input type="checkbox" name="tech" value="C++"/>C++
<input type="checkbox" name="tech" value="Python"/>Python
</td>
</tr>
<tr>
<td>选择国家</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="USA">美国</option>
<option value="CN" selected="selected">中国</option>
<option value="KR">韩国</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="重置表单">
<input type="submit" value="提交表单">
</th>
</tr>
</table>
</form>
</body>
</html>