[HTML] radio 버튼, checkbox

 

라디오 버튼과 체크박스

 

input type에 사용되는 라디오 버튼과 체크박스에 대해 알아보도록 하겠습니다.

라디오 버튼과 체크박스는 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소입니다.

 

속성	설명
name	라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련있는 그룹끼리는 name 속성 값을 똑같이 만듭니다.
value	선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다.
checked	라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선택해 놓을 항목이 있다면 checked 속성을 사용합니다.

 

 

 

 

checkbox(체크박스) - 중복 선택 가능

 

항목들 중 여러 가지를 선택해도 될 경우, 체크박스를 사용합니다.

체크박스는 두 개 이상의 항목도 선택할 수 있다는 점만 빼면 라디오 버튼과 사용법이 비슷합니다.

 

<form>

            <fieldset>

                <legend>checkbox Example</legend>

                <p>checkbox 예제(복수 선택 가능)</p>

                <label><input type="checkbox" name="checkExample" value="1">checkbox1</label>

                <label><input type="checkbox" name="checkExample" value="2">checkbox2</label>

                <label><input type="checkbox" name="checkExample" value="3">checkbox3</label>

            </fieldset>

</form>

 

 

 

위 예제를 보면 checkbox 속성을 사용할 경우 두 개 이상의 항목이 선택 가능 하다는 것을 알 수 있습니다.

 

 

 

 

 

 

radio button(라디오 버튼) - 중복 선택 불가

 

체크박스와는 다르게 항목 중 한 개만 선택하도록 할 경우, 라디오 버튼을 사용합니다.

두 개 이상 라디오 버튼에서는 하나의 항목만 선택할 수 있으므로 이미 선택된 항목이 있을 경우, 다른 항목을 선택하면 기존 선택한 항목은 취소됩니다.

 

 

 

        <form>

            <fieldset>

                <legend>radio button Example</legend>

                <p>radio 예제(복수 선택 x)</p>

                <label><input type="radio" name="radioExample" value="1">radio1</label>

                <label><input type="radio" name="radioExample" value="2">radio2</label>

                <label><input type="radio" name="radioExample" value="3">radio3</label>

            </fieldset>

        </form>

 

 

 

 

위 코드를 실행하면 세 개의 동그란 라디오 버튼이 생성 됩니다. radio1 항목을 선택한 후 radio2 항목을 다시 선택해 보도록 하겠습니다.

 

 

 

체크박스 버튼과는 달리 선택한 항목이 취소 됩니다.