# 라디오 버튼

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jihwan.gitbook.io/life101/html/untitled-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.