小白前端入门笔记（21），表单里如何添加单选按钮？

TechFlow-承志

发布于 2021-04-16 15:24:23

1.6K0

发布于 2021-04-16 15:24:23

文章被收录于专栏：TechFlowTechFlow

大家好，欢迎来到freecodecamp HTML专题第21篇，我们今天来聊聊单选按钮的使用。

背景知识

单选按钮顾名思义就是让用户在多个选项当中选择一项的按钮，这个功能大家应该都不会陌生，在各种采访以及问答式的网站当中相比已经见过很多次了。单选按钮是通过Radio button实现的，radio button是input的一种类型，我们只需要简单的设置即可。

每个单选按钮需要被嵌套在同一个label元素当中，然后所有的单选按钮的name必须相同，这样浏览器才能识别这些单选按钮属于同一个按钮组，这样才能限制用户单选。我们可以来看一个简单的例子：

<label> 
  <input type="radio" name="indoor-outdoor">Indoor 
</label>

在label上添加for属性是一个好习惯，当for属性的值和label中input的id的值相同的时候，浏览器就会将这两者关联起来。至于这个关联有什么用处，这是之后的内容，我们可以先放一放。我们来看一个例子：

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

题意

我们要在表单当中添加一对按钮，每一个按钮都要被嵌套在一个单独的label元素里。一个按钮的选项叫做indoor，另外一个选项叫做outdoor。这两个选项的name相同，都叫做indoor-outdoor。

要求

你的网页当中必须要有两个radio按钮
你的radio按钮必须要有一个name属性，并且它的值为indoor-outdoor
你的每一个radio按钮都必须被嵌套在label当中
你的label元素必须要有closing tag
你的一个radio按钮的label是indoor
你的一个radio按钮的label是outdoor
你每一个radio按钮都必须在form标签内

编辑器

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

解法

我们按照题目的要求添加两个嵌套着radio按钮的label标签即可。

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required>

     <label for="indoor"> 
      <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
    </label> 

    <label for="outdoor"> 
      <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor 
    </label> 

    <button type="submit">Submit</button>
  </form>
</main>

可以看到预览区域当中已经多了两个单选按钮。