随笔- 35 文章- 0 评论- 1 阅读- 11238

单选框和复选框

单选框：

<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>

另一种写法：

<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
<input id="female" type="radio" name="gender" value="female" />
<label for="female">女</label>

复选框：

<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>

需要注意的是：复选框是只有2种状态的表单控件：已选中或未选中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选择了这个单选框，就不能再取消选择了，除非他刷新了网页~

例1：单选框：你喜欢旅游吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="https://www.youkeda.com/">
    <p>你喜欢旅游吗？</p>

    <input type="radio" name="travel" value="agree" id="agree" />
    <label for="agree">喜欢</label>

    <input type="radio" name="travel" value="neutral" id="neutral" />
    <label for="neutral">无所谓</label>

    <input type="radio" name="travel" value="disagree" id="disagree" />
    <label for="disagree">不喜欢</label>
  </form>
</body>
</html>

例2：

下面是一道单选题的四个选项，请把这四个选项用单选框写出来，要求：用label标签的for属性和input的id属性对应的方式，实现点击文字也能选中对应的选项的功能。

A、form 标签是块状标签
B、form 标签内可以写输入框之类的表单控件
C、form 标签可嵌套在 form 标签内
D、表单中的内容可以被提交到 action 属性定义的地址去

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>编程题</title>
  </head>
  <body>
    <form action="https://www.youkeda.com/">
      <input type="radio" name="form" value="A" id="form-a" />
      <label for="form-a">A、form标签是块状标签</label>

      <input type="radio" name="form" value="B" id="form-b" />
      <label for="form-b">B、form标签内可以写输入框之类的表单控件</label>

      <input type="radio" name="form" value="C" id="form-c" />
      <label for="form-c">C、form标签可嵌套在form标签内</label>

      <input type="radio" name="form" value="D" id="form-d" />
      <label for="form-d">D、表单中的内容可以被提交到action属性定义的地址去</label>
    </form>
  </body>
</html>

有时我们在注册账号的时候需要勾选一些条款：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>编程题</title>
</head>
<body>
  <form action="https://www.youkeda.com/">
<label><input type="checkbox" name="slect" value="select" />我已阅读并同意相关服务条款和隐私政策</label>
  </form>
</body>
</html>