HTML

2023-10-26

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>

在这里插入图片描述

点击选择文件即可选择:

在这里插入图片描述


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 的相关文章