今天是十一，祝大家十一快乐，伟大的国家建党百年，万岁万岁万岁！
之前讲了input表单控件，今天继续说下select下拉表单元素控件。使用场景:在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义。
我们来看下<select>表单元素的语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
...
</select>
接下来看看实例:
可以看到这是一个下拉菜单，接着我们看看代码实现
<!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>
籍贯:
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北</option>
<option>河南</option>
<option>东北</option>
<option>陕西</option>
<option>山西</option>
</select>
</body>
</html>
可以看到，代码还是很简单的。一般下拉控件都是在表单中的，所以需要加上
<form>标签
看着没什么变化，看看代码:
<body>
<form>
籍贯:
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>河北</option>
<option>河南</option>
<option>东北</option>
<option>陕西</option>
<option>山西</option>
</select>
</form>
</body>
<body>中增加了<form>表单
接着说下<select>里的一些规则:
- <select>中至少包含一对<option>
- 在<option>中定义 <option selected = "selected">时，当前项即为默认选择项。
可以看下效果， 我们选择山西作为默认选择项。
看看代码，就是添加了 selected属性
<option selected="selected">山西</option>
接下来，我们看下表单元素中最后一个， textarea文本域元素
使用场景:
当用户输入内容较多的时候，就不能使用文本框表单了，需要使用 texttarea文本域 <textarea>标签，用于定义多行文本输入的控件。对应的语法为:
<select>
<textarea rows="3" cols="20">
文本内容
</textarea>
</select>
我们来看下效果:
可以看到有一个可以输入的框，一般在框中都有预先写好的内容，比如 请输入反馈
对应代码为:
<!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>
<form>
今日反馈:
<textarea>
请输入您宝贵的意见
</textarea>
</form>
</body>
</html>
做个小总结:
1. 通过<textarea>标签可以轻松地创建多行文本输入框
2. cols="每行中的字符数" rows="显示的行数" 在实际开发中不会使用，一般都是用css来控制样式
来看下实际效果:
可以看到汉字最多输入10个，可以输入多行，但是在数据框当前页面展示了3行，如果是可以展示5行呢？
页面展示5行了，这块不要理解为只能显示N行。
看下对应的代码:
<form>
今日反馈:
<!--每行最多输入20个字符，最多展示3行-->
<textarea cols="20" rows="5">请输入您宝贵的意见
</textarea>
</form>
好的，今天就先到这里
更多好文章，可以关注 微信公众号 "蛋蛋杂谈"
最新评论