HTML|下拉框和文本域、文件域
1.下拉框
在平时我们填问卷或者冲浪的时候做筛选的时候都会遇到下拉框,html写一个下拉框的方式是使用select标签,name和id是默认属性
<select name="1" id=""></select>
在select标签内部可以添加option用来添加选项,其中value是值,在option中间可以加上修饰词:
<option value="apple">苹果</option>
如果我们要做一个下拉框,让你选择你喜欢的水果,可供的选择是苹果、西瓜、香蕉:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框文本和文件域</title>
</head>
<body>
<!--
下拉框
select标签
name是下拉框的名字
option标签是下拉框中的选项,value是它的值
-->
<p>
下拉框:
<select name="你喜欢的水果:">
<option value="apple">苹果</option>
<option value="watermelon">西瓜</option>
<option value="banana">香蕉</option>
</select>
</p>
</body>
</html>
点击下拉按钮即可看到有我们代码中写入的三个选项。
选择都可以设置默认选项,比如这个下拉框,苹果是在第一个,但是我们如果想西瓜设置为默认过后,选择之前就会是西瓜,只需要在第二个option添加上selected属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框文本和文件域</title>
</head>
<body>
<!--
下拉框
select标签
name是下拉框的名字
option标签是下拉框中的选项,value是它的值
-->
<p>
你喜欢的水果
<select name="fruit">
<option value="apple">苹果</option>
<option value="watermelon" selected>西瓜</option>
<option value="banana">香蕉</option>
</select>
</p>
</body>
</html>
类似的,单选框和多选框也可以做这样的操作。
2.文本域
我们在input处的type默认为text的话,是输入单行文本,在实际应用中也会用到多行文本。
用textarea标签即可,我们这里写一个个人简介的填写框:
<p>
个人简介:<br>
<textarea name="textarea"cols="30" rows="10">请填写你的个人简介吧!</textarea>
</p>
10行30列,默认内容为中间的文字:
3.文件域
input标签的type改为file即可:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表框文本和文件域</title>
</head>
<body>
<!--
下拉框
select标签
name是下拉框的名字
option标签是下拉框中的选项,value是它的值
-->
<p>
你喜欢的水果
<select name="fruit">
<option value="apple">苹果</option>
<option value="watermelon" selected>西瓜</option>
<option value="banana">香蕉</option>
</select>
</p>
<!--
文本域
textarea
10行30列
中间为默认内容
-->
<p>
个人简介:<br>
<textarea name="textarea"cols="30" rows="10">请填写你的个人简介吧!</textarea>
</p>
<!--
文件域
input标签中的type改为file即可
-->
<p>
<input type="file">
</p>
</body>
</html>
点击选择文件即可选择:
人生没有白走的路,每一步都算数!