[HTML] Radio Button Input

안녕하세요 동기 여러분! 오늘은 라디오 버튼 넣는 방법에 대해 알아봅시다!

 

Radio Button Input

사용자에게 여러 가지의 옵션을 주고 하나 고르게 하고 싶을 때 쓰는 방법입니다.

 

---

 

생김새

  <form>
    <p>1. 1963년 국내에 첫 출시하여 대한민국의 모든 인스턴트 라면의 원조이며 <br>
    햄맛을 국물 베이스로 사용하고 있는 이 라면은 무엇인가?</p>
    <input type="radio" id="one" name="answer" value="신라면">
    <label for="one">1. 신라면</label>
    <br>
    <input type="radio" id="two" name="answer" value="진라면">
    <label for="two">2. 진라면</label>
    <br>
    <input type="radio" id="three" name="answer" value="진라면">
    <label for="three">3. 안성탕면</label>
    <br>
    <input type="radio" id="four" name="answer" value="진라면">
    <label for="four">4. 수타면</label>
    <br>
    <input type="radio" id="five" name="answer" value="진라면">
    <label for="five">5. 삼양라면</label>
  </form>

위의 코드를 출력하면

이렇게 라디오 버튼을 가지고 있는 문항들이 생겨납니다.

 

코드 분석

• 이전과 마찬가지로 <label>의 for의 값과 <input>의 값은 같아야 합니다. 
• name은 "answer"로 모두 같게 설정을 해주는데 이유는 그룹화하기 위함입니다.
• 값은 식별이 용이하게 label의 내용과 연관있는 단어나 문장을 써서 넣어줍니다.
• 위에 사용된 <br>은 줄바꿈 태그입니다.

---

 

그래서 라면 문제의 정답은 뭘까요?ㅋㅋㅋ

 

---

오늘의 느낌

정답은...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

"삼양라면"입니다.