HTML + CSS 连载 | 36 - select 下拉列表

Riemann Hypothesis

于 2023-10-31 22:10:07 发布

阅读量3.5k

点赞数 4

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134131338

版权

HTML2CSS 专栏收录该内容

64 篇文章 2 订阅

订阅专栏

html+css.jpeg

一、select 选项列表

下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表。

HTML 中 select 元素可以创建一个下拉列表，而下拉列表的选项则由 option 元素来实现，option 是 select 的子元素，一个 option 代表一个选项。

select 元素有两个常用属性，分别是：

multiple：可以多选
size：显示几个选项

option 常用属性有：

selectd：默认被选中

创建 HTML 页面，使用 select 和 option 配合实现一个下拉列表，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <select name="fruits" id="">
    <option value="banana">香蕉</option>
    <option value="apple">苹果</option>
    <option value="grape">葡萄</option>
  </select>
</body>
</html>

使用 LiverServer 打开 HTML 页面，效果如下：

默认只能选择其中一个选项，但是我们可以通过设置布尔属性 multiple 就可以可以选择多个选项，具体代码如下：

<select name="fruits" id="" multiple>
  <option value="banana">香蕉</option>
  <option value="apple">苹果</option>
  <option value="grape">葡萄</option>
</select>

刷新页面，同时选择多个选项，效果如下：

除了可以设置选择多个，还可以通过 size 属性设置显示的选项的个数，size 属性是一个 KV 属性，需要指定显示的选项的数量，具体代码如下：

<select name="fruits" id="" multiple size="2">
  <option value="banana">香蕉</option>
  <option value="apple">苹果</option>
  <option value="grape">葡萄</option>
</select>

刷新页面，具体效果如下：

可以看到默认已经显示了两个选项，当然我们也可以通过 selected 这个布尔属性来设置设置一个默认选中（显示）在页面上的一个选项，具体 HTML 代码如下：

<select name="fruits" id="" multiple size="2">
  <option value="banana">香蕉</option>
  <option value="apple" selected>苹果</option>
  <option value="grape">葡萄</option>
</select>

刷新页面，可以看到设置了 selected 属性的选项显示在页面上：

需要注意的是，在单选或者多选框中使用 checked 布尔属性实现默认选中的选项，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="/abc">
    <div>
      爱好：
      <label for="basketball">
        <input type="checkbox" id="basketball" name="hobby" value="football"> 足球
      </label>
      <label for="football">
        <input type="checkbox" id="football" name="hobby" value="basketball"> 篮球
      </label>
      <label for="reading">
        <!--使用checked表示默认选中的选项-->
        <input type="checkbox" id="reading" name="hobby" value="reading" checked> 阅读
      </label>
    </div>
    <input type="submit" value="提交按钮">
  </form>
</body>
</html>

使用 LiverServer 打开，可以看到 阅读 选项被默认选中了。

二、form 元素的使用

在前面我们已经多次使用过了 form 元素，form 通常作为表单元素的父元素；form 可以将整个表单作为一个整体来进行操作；比如对整个表单的数据进行重置或者是对整个表单的数据进行提交

form 的常见属性如下：

action：用于提交表单数据的请求 URL
method：请求方法，get 和 post，默认是 get
target：在什么地方打开 URL，与 a 元素的 target 属性用法是一样的

创建 HTML 页面，使用 form 元素设计一个表单，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="">
    <div>
      <label for="username">
        用户：<input type="text" id="username" name="username">
      </label>
    </div>
    <div>
      <label for="password">
        密码：<input type="password" id="password" name="password">
      </label>
    </div>
    <div>
      <label for="sex">
        <input type="radio" id="sex" value="male" name="sex">男
      </label>
      <label for="sex">
        <input type="radio" id="sex" value="femle" name="sex">女
      </label>
    </div>
    <div>
      <label for="baskedball">
        <input type="checkbox" value="baskedball" id="baskedball" name="hobby">篮球
      </label>
      <label for="football">
        <input type="checkbox" value="football" id="football" name="hobby">足球
      </label>
      <label for="reading">
        <input type="checkbox" value="reading" id="reading" name="hobby">阅读
      </label>
    </div>
  
  </form>
</body>
</html>

在 LiverServer 中打开该 HTML 页面，效果如下：

当然我们想要对表单进行重置或者提交还需要添加添加重置和提交按钮，在 form 表单的底部增加按钮的 HTML 代码，具体如下：

<button type="reset">重置</button>
<button type="submit">提交</button>

刷新页面，效果如下：

除了按钮之外，我们还需要通过 form 的属性 action 来执行我们数据提交的地址，具体代码如下：

<form action="/abc">
  <!--中间代码不变-->
</form>

刷新页面，点击提交按钮：

如果不指定 method 情况下，默认是 GET 请求，可以从地址栏中看到我们提交的具体的数据，如下所示：

GET 请求和 POST 请求之间的差别如下：

当然我们也可以通过 method 来指定使用的请求方式，并且通过 target 来决定是否要打开一个新的页面，具体代码如下：

<form action="/abc" method="post" target="_blank">
  <!--中间代码不变-->
</form>

刷新并提交，可以从浏览器检查工具中的 Network 看到我们具体提交的数据，如下图所示：

Riemann Hypothesis

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
HTML + CSS 连载 | 36 - select 下拉列表

下拉列表也是一种选择类型的元素，下拉列表可以节省网页的空间，默认状态下只显示一个选项，只有在点击下拉按钮的时候才会显示多个选项，比如下面这里选择地址的时候就是使用的下拉列表。可以将整个表单作为一个整体来进行操作；比如对整个表单的数据进行。默认只能选择其中一个选项，但是我们可以通过设置布尔属性。可以看到默认已经显示了两个选项，当然我们也可以通过。元素可以创建一个下拉列表，而下拉列表的选项则由。当然我们想要对表单进行重置或者提交还需要添加添加。使用 LiverServer 打开，可以看到。
复制链接

扫一扫