HTML / Reference / input type="radio"

개요

  • radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다.
  • input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

문법

<input type="radio" name="xxx" value="yyy" checked>
  • name : name의 값이 같은 것 중에서 하나를 선택합니다.
  • value : 선택했을 때 전달될 값입니다.
  • checked : 선택된 상태로 만듭니다.

예제 1

  • Apple 또는 Banana 중 하나만 선택합니다.
  • 아무것도 선택되지 않은 상태에서 시작합니다.
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="get" action="form-action.html">
      <p>Fruit</p>
      <label><input type="radio" name="fruit" value="apple"> Apple</label>
      <label><input type="radio" name="fruit" value="banana"> Banana</label>
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

  • Apple을 선택하고 Submit 버튼을 클릭하면, fruit의 값이 apple로 전송됩니다.

예제 2

  • Apple 또는 Banana에서 하나, Soccer 또는 Baseball에서 하나를 선택합니다.
  • 아무것도 선택되지 않은 상태에서 시작합니다.
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="get" action="form-action.html">
      <p>Fruit</p>
      <label><input type="radio" name="fruit" value="apple"> Apple</label>
      <label><input type="radio" name="fruit" value="banana"> Banana</label>
      <p>Sport</p>
      <label><input type="radio" name="sport" value="soccer"> Soccer</label>
      <label><input type="radio" name="sport" value="baseball"> Baseball</label>
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

  • Apple과 Baseball을 선택하고 Submit 버튼을 클릭하면 fruit의 값으로 apple, sport의 값으로 banana를 전송합니다.

예제 3

  • checked를 추가하면, 그 값이 선택된 상태로 시작합니다.
<!doctype html>
<html lang="ko">
  <head>
  <meta charset="utf-8">
    <title>HTML</title>
    <style>
      * {
        font-size: 16px;
        font-family: Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <form method="get" action="form-action.html">
      <p>Fruit</p>
      <label><input type="radio" name="fruit" value="apple"> Apple</label>
      <label><input type="radio" name="fruit" value="banana" checked> Banana</label>
      <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
    </form>
  </body>
</html>

초기화

라디오 버튼은 체크박스와는 달리 선택을 해제할 수 없습니다. 따라서 초기화 버튼을 만들어두는 것이 좋습니다.

<input type="reset" value="Reset">
같은 카테고리의 다른 글
HTML / Reference / input type="date"

HTML / Reference / input type="date"

type이 date인 input은 날짜를 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / progress

HTML / Reference / progress

progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다.  주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다. progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.

HTML / Reference / input type="radio"

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / br

HTML / Reference / br

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

HTML / Reference / pre

HTML / Reference / pre

pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.

HTML / Reference / caption

HTML / Reference / caption

caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.

HTML / Reference / input type="range"

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.

HTML / Reference / noscript

HTML / Reference / noscript

noscript 태그는 HTML 문서에서 JavaScript가 비활성화되어 있을 때 표시할 콘텐츠를 지정하는 데 사용됩니다. 사용자의 브라우저가 JavaScript를 지원하지 않거나, JavaScript가 비활성화되어 있는 경우에만 이 태그 내의 콘텐츠가 렌더링됩니다.

HTML / Reference / q

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / blockquote

HTML / Reference / blockquote

blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.