라디오 버튼

learn.freecodecamp.org 에서 익힘

index.html

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

It is considered best practice to explicitly define the relationship between a checkbox inputand its corresponding labelby setting the forattribute on the labelelement to match the idattribute of the associated inputelement. - learn.freecodecamp.org

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

checked 속성을 추가해서 박스가 체크된 상태로 만들 수도 있다.

Codepen으로 결과 보기

Check Radio Buttons and Checkboxes

References

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