라디오 버튼 만드는 방법 - input - radio

라디오 버튼

라디오 버튼은 여러 개의 항목 중에서 하나만 선택하도록 하는 동그란
버튼입니다.

라디오 버튼은 <input> 태그로 만듭니다.

기본형

<input type="radio" name="xxx" value="yyy" checked>

name : name의 값이 같은 것 중에서 하나를 선택합니다.

value : 선택했을 때 전달될 값입니다.

checked : 선택된 상태로 만듭니다.

예제

예제 1

Apple 또는 Banana 중 하나만 선택합니다.

(중복 선택이 가능하게 하려면
href="https://urliveblogger.blogspot.com/2021/01/html-input-checkbox.html"
>체크박스 >를 만드세요.)

아무것도 선택되지 않은 상태에서 시작합니다.

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

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 라디오 버튼 만드는 방법 input radio 예제1"
data-slug-hash="OJNqJym"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

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

<input type="reset" value="Reset"/>

예제 2

Apple 또는 Banana에서 하나, Soccer 또는 Baseball에서 하나를 선택합니다.

아무것도 선택되지 않은 상태에서 시작합니다.

<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>Sports</p>
  <label><input type="radio" name="sports" value="soccer"> Soccer</label>
  <label><input type="radio" name="sports" value="baseball"> Baseball</label>
  <p><input type="submit" value="Submit"> <input type="reset" value="Reset"></p>
</form>

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="460"
data-pen-title="HTML 라디오 버튼 만드는 방법 input radio 예제2"
data-slug-hash="oNxVNwb"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 460px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

예제 3

checked를 추가하면, 그 값이 선택된 상태로 시작합니다.

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

class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="441"
data-pen-title="HTML 라디오 버튼 만드는 방법 input radio checked 예제3"
data-slug-hash="RwadwLp"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

라디오 버튼 만드는 방법 - input - radio

라디오 버튼 만드는 방법 - input - radio