HTML + CSS 连载 | 35 - 单选、多选框和 textarea

input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以

Riemann Hypothesis

2118人浏览 · 2023-10-31 22:09:55

Riemann Hypothesis · 2023-10-31 22:09:55 发布

html+css.jpeg

一、input 元素实现 radio 单选框

单选框在实际开发中应用非常广泛，比如在选择页面的模式的时候，只能选择一种，如下图所示：

input 元素可以实现单选框的效果，结合 lable 元素，只需要将 type 设置为 radio 就表示为单选框，但是同时需要设置单选框的文本，文本内容直接写在 input 元素的后面即可；还需要设置 name 属性，因为只有 name 值相同才具备单选的属性。

<!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>
  <label for="male">
    <input id="male" type="radio" name="sex" value="male">男
  </label>
  <label for="female">
    <input id="female" type="radio" name="sex" value="female">女
  </label>
</body>
</html>

使用浏览器打开 HTML 页面，具体效果如下：

可以看到已经出现单选的样式，我们可以使用 form 元素来包裹这两个单选框，同时增加添加提交按钮，向后端地址发送数据，比如 http://www.xxx/s?age=188&set=male；具体 HTML 代码如下

<!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>
  <!--action 表示要发送的后端的 URI 地址--> 
  <form action="/abc">
    <label for="male">
      <input type="radio" id="male" name="sex" value="male">男
    </label>
    <label for="female">
      <input type="radio" id="female" name="sex" value="female">女
    </label>
    <button type="submit">提交按钮</button>
    <input type="submit" value="提交按钮">
  </form>
</body>
</html>

通过 VSCode 的插件 Live Server 打开 HTML 页面，效果如下：

可以看到该页面是有具体的服务器地址的，因此我们可以点击任意一个提交按钮，向后端提交数据：

点击按钮，页面会发生跳转，可以从地址栏中看到我们向后端发送的数据内容，可以看到 value 属性的值就是我们向服务器发送的数据。

二、input 元素实现 checkbox 多选框

多选框在 Web 开发中也是非常常用，比如注册页面或者个人信息设置页面等常会用到。

input 元素也可以通过设置 type 属性值为 checkbox 来实现多选框，除了 type 属性外，多选框也需要设置 name 属性，对于同一类型的 checkbox，name 属性要保持一致。

创建 HTML 页面实现多选框，使用 form 元素实现表单，具体 HTML 代码如下：

<!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"> 足球
      </label>
      <label for="football">
        <input type="checkbox" id="football" name="hobby"> 篮球
      </label>
      <label for="reading">
        <input type="checkbox" id="reading" name="hobby"> 阅读
      </label>
    </div>
    <input type="submit" value="提交按钮">
  </form>
</body>
</html>

使用 VSCode 的 LiverServer 插件打开 HTML 页面，效果如下：

点击提交按钮，向服务器提交数据：

可以从浏览器地址栏看到数据并没有提交成功，这是因为选项中没有设置 value 属性，接下来给每个选项设置 value 属性，value 属性就表示当前选项，具体代码如下：

  <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">
        <input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
      </label>
    </div>
    <input type="submit" value="提交按钮">
  </form>

通过 LiverServer 打开 HTML 页面，再次点击提交按钮：

可以看到数据已经成功发送。

三、textarea 多行文本输入框

input 是单行输入框，用户可以输入一行文本，通常用户获取用户名等简单信息，而对于评论或者是博客这种多行文本我们就需要使用到 textarea 元素来实现。

textarea 元素包含了两个属性，分别是 cols 用于设置文本输入框的列数，以及 rows 用来设置文本输入框的行数。

创建 HTML 页面，使用 textarea 元素实现多行文本框，具体代码如下：

<!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">
    <label for="info">
      个人介绍：
      <textarea name="info" id="info" cols="30" rows="10"></textarea>
    </label>
  </form>
</body>
</html>

通过 LiverServer 打开 HTML 页面，效果如下：