0
点赞
收藏
分享

微信扫一扫

HTML|下拉框和文本域、文件域


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>

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>

HTML|下拉框和文本域、文件域_下拉框_02

类似的,单选框和多选框也可以做这样的操作。

2.文本域

我们在input处的type默认为text的话,是输入单行文本,在实际应用中也会用到多行文本。

用textarea标签即可,我们这里写一个个人简介的填写框:

<p>
个人简介:<br>
<textarea name="textarea"cols="30" rows="10">请填写你的个人简介吧!</textarea>
</p>

10行30列,默认内容为中间的文字:

HTML|下拉框和文本域、文件域_select标签_03

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>

HTML|下拉框和文本域、文件域_下拉框_04

点击选择文件即可选择:

HTML|下拉框和文本域、文件域_下拉框_05

人生没有白走的路,每一步都算数!


举报

相关推荐

0 条评论