# 라디오 버튼

{% code title="index.html" %}

```markup
<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="/submit-cat-photo">
    <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><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
```

{% endcode %}

> &#x20;It is considered best practice to explicitly define the relationship between a checkbox `input`and its corresponding `label`by setting the `for`attribute on the `label`element to match the `id`attribute of the associated `input`element.\
> \- learn.freecodecamp.org

{% hint style="success" %}
레이블 요소의 for 속성을 연관된 입력 요소의 id 속성과 일치하도록 설정하여 체크 상자 입력과 해당 레이블 간의 관계를 명시적으로 정의하는 것이 좋다
{% endhint %}

{% hint style="info" %}
**`checked`** 속성을 추가해서 박스가 체크된 상태로 만들 수도 있다.
{% endhint %}

## Codepen으로 결과 보기

{% embed url="<https://codepen.io/j1hwan/pen/NZQVXe>" %}
Check Radio Buttons and Checkboxes
{% endembed %}

## **References** <a href="#references" id="references"></a>

* HTML / label - 폼의 양식에 이름 붙이는 태그<https://www.codingfactory.net/11008>