小白前端入門筆記（21），表單里如何添加單選按鈕？

大家好，歡迎來到freecodecamp HTML專題第21篇，我們今天來聊聊單選按鈕的使用。

背景知識

單選按鈕顧名思義就是讓用戶在多個選項當中選擇一項的按鈕，這個功能大家應該都不會陌生，在各種采訪以及問答式的網(wǎng)站當中相比已經(jīng)見過很多次了。單選按鈕是通過Radio button實現(xiàn)的，radio button是input的一種類型，我們只需要簡單的設置即可。

每個單選按鈕需要被嵌套在同一個label元素當中，然后所有的單選按鈕的name必須相同，這樣瀏覽器才能識別這些單選按鈕屬于同一個按鈕組，這樣才能限制用戶單選。我們可以來看一個簡單的例子：

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

在label上添加for屬性是一個好習慣，當for屬性的值和label中input的id的值相同的時候，瀏覽器就會將這兩者關(guān)聯(lián)起來。至于這個關(guān)聯(lián)有什么用處，這是之后的內(nèi)容，我們可以先放一放。我們來看一個例子：

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

題意

我們要在表單當中添加一對按鈕，每一個按鈕都要被嵌套在一個單獨的label元素里。一個按鈕的選項叫做indoor，另外一個選項叫做outdoor。這兩個選項的name相同，都叫做indoor-outdoor。

要求

• 你的網(wǎng)頁當中必須要有兩個radio按鈕
• 你的radio按鈕必須要有一個name屬性，并且它的值為indoor-outdoor
• 你的每一個radio按鈕都必須被嵌套在label當中
• 你的label元素必須要有closing tag
• 你的一個radio按鈕的label是indoor
• 你的一個radio按鈕的label是outdoor
• 你每一個radio按鈕都必須在form標簽內(nèi)

編輯器

<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>

可以看到預覽區(qū)域當中已經(jīng)多了兩個單選按鈕。

想要親自動手嘗試一下的同學不要忘了點擊文末的閱讀原文進行跳轉(zhuǎn)哦~

文章就到這里，給個三連再走吧~