认识HTML---------表单标签非input标签
表单标签非input标签
1.select标签
作用：用于定义下拉列表
格式：
<select><option>列表数据</option></select>
案例一：下拉列表----小说类型
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<select>
<option>人文</option>
<option>历史</option>
<option>军事</option>
<option>科幻</option>
<option>儿童</option>
<option>悬疑</option>
</select>
</body>
</html>
运行结果如图所示：
注意点：
结论一：下拉列表不能输入内容，但是可以直接在列表中选择内容。
案例二：设置默认值selected="selected",观察效果。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<select>
<option>人文</option>
<option>历史</option>
<option>军事</option>
<option>科幻</option>
<option>儿童</option>
<option selected="selected">悬疑</option>
</select>
</body>
</html>
运行结果如图所示：
本来是"人文"做小说的原配，现在变成”悬疑“原配
结论二：可以通过给option标签添加一个selected属性来指定列表的默认值。
案例三：怎么把湖南的区与重庆的区分开？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<select>
<optgroup label="重庆">
<option>沙坪坝区</option>
<option>渝中区</option>
<option>渝北区</option>
<option>江北区</option>
<option>巴南区</option>
</optgroup>
<optgroup label="长沙">
<option>芙蓉区</option>
<option>天心区</option>
<option>岳麓区</option>
<option>望城区</option>
<option>开福区</option>
</optgroup>
</select>
</body>
</html>
运行结果如图所示：
结论三：可以通过给option标签包裹一层optgroup标签来给下拉列表中数据分类
2.textarea标签
作用：定义一个多行的输入框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<select>
<optgroup label="重庆">
<option>沙坪坝区</option>
<option>渝中区</option>
<option>渝北区</option>
<option>江北区</option>
<option>巴南区</option>
</optgroup>
<optgroup label="长沙">
<option>芙蓉区</option>
<option>天心区</option>
<option>岳麓区</option>
<option>望城区</option>
<option>开福区</option>
</optgroup>
</select>
<hr>
<textarea>
</textarea>
</body>
</html>
运行结果如下：
结论一：默认情况下输入框可以无限换行。
结论二：默认情况下输入框有自己的宽度和高度。
案例二：textarea指定行数和列数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<select>
<optgroup label="重庆">
<option>沙坪坝区</option>
<option>渝中区</option>
<option>渝北区</option>
<option>江北区</option>
<option>巴南区</option>
</optgroup>
<optgroup label="长沙">
<option>芙蓉区</option>
<option>天心区</option>
<option>岳麓区</option>
<option>望城区</option>
<option>开福区</option>
</optgroup>
</select>
<hr>
<textarea cols="2" rows="5">
</textarea>
</body>
</html>
运行结果如图所示：
结论三：可以通过cols和rows来指定输入框的宽度和高度，但是虽然指定了列数和行数，但是还是可以无限往下输入。
结论四：默认情况下输入框可以手动拉伸。
