1、表单标签
- input标签的常见属性
- placeholder：设置提示信息 (placeholder n. 占位符)
- checked：默认选择
- disabled：不能选择
- multiple：多选属性
- for：用在lable标签中和主标签中的id相关联
- selected：用在下拉菜单中
- size：用在下来菜单中
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>表单标签</h1>
<p>表单标签中的input用于搜集用户信息，根据不同的type属性值，展示不同的控件</p>
<form action="http://www.baidu.com">
<h2>普通文本输入框</h2>
<input type="text" placeholder="输入你的姓名">
<h2>密码输入框</h2>
<input type="password" placeholder="输入你的密码">
<h2>复选框</h2>
<input type="checkbox" checked>辣椒
<input type="checkbox">黄瓜
<input type="checkbox" disabled>西红柿
<h2>单选框</h2>
<p>单选框要实现二选一的功能，就要有属性name，且name为同一值</p>
<input type="radio" name="xb" checked>男
<input type="radio" name="xb">女
<h2>提交按钮和重置按钮</h2>
<input type="submit">提交
<input type="reset">重置
<h2>多行文本框</h2>
<textarea cols="30" rows="2"></textarea>
<h2>下拉菜单：select，option</h2>
<select>
<option>北京</option>
<option selected>上海</option>
<option>天津</option>
</select>
<select size="2">
<option disabled selected>请选择：</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
<select multiple>
<option disabled selected>请选择：</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
</select>
<h2>label标签：</h2>
<p>label标签用来配合单选框使用，增大单选框的作用区域（以前选男女文字没效果，现在就会有效果）</p>
<input type="radio" name="x" id="man"><label for="man">男</label>
<input type="radio" name="x" id="woman"><label for="woman">女</label>
</form>
</body>
- 结果展示
2、练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
<base target="_blank">
</head>
<body>
<form>
<table cellpadding="0">
<tBody>
<tr>
<td>电子邮箱：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text"></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="xb">男<input type="radio" name="xb">女</td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option selected disabled>请选择</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>年
<select>
<option selected disabled>--</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
</select>月
<select>
<option selected disabled>--</option>
<option>01</option>
<option>02</option>
</select>日
</td>
</tr>
<tr>
<td></td>
<td>
<a href="http://www.baidu.com" target="_blank">为什么要填写我的生日?</a>
</td>
</tr>
<tr>
<td>我现在：</td>
<td>
<select>
<option selected disabled>请选择身份</option>
<option>学生</option>
<option>老师</option>
</select>（非常重要）
</td>
</tr>
<tr>
<td></td>
<td>
<img src="./验证码.jpeg" width="100" height="50">
<a href="http://www.baidu.com">看不清楚换一张?</a>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
- 结果显示：
扫一扫
3470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
