HTML - Radio, Checkbox

MJ·2023년 2월 3일
0

HTML 

목록 보기
24/27
post-thumbnail

1. Checkbox

  • 사용자가 선택할 수 있는 박스를 제공하는 요소
    여러 개를 선택할 수 있고, 선택하지 않아도 됩니다.

  • 어떤 내용의 체크박스인지 식별하기 어려우므로, label 요소와 함께 사용해야 합니다.

<h3> Anything Check! </h3>
    <form action="/root">
        <label for="agree_check"> Im Agree </label>
        <input ID="agree_check" type="checkbox" name="agree">
        <button>Submit</button>
    </form>


checkd 속성

체크박스를 선택하지 않아도 기본값으로 체크되어 있는 속성입니다.

<input ID="agree_check" type="checkbox" name="agree" checked>



2. Radio

  • Radio 요소는 체크박스와 거의 동일하나, 한 가지 차이점이 있습니다.
    그룹된 요소에서 1개의 라디오박스만 선택할 수 있습니다.

  • 그룹을 위해서는 같은 Name 속성명을 사용해야 연결됩니다.

<h3> Anything Check! </h3>
    <form action="/root">
        <p>
            <label for="child">Child</label>
            <input type="radio" name="Age" id="child">

            <label for="Teen">Teenager</label>
            <input type="radio" name="Age" id="Teen">

            <label for="Adult">Adult</label>
            <input type="radio" name="Age" id="Adult">
        </p>
        <button>Submit</button>
    </form>

서로 같은 Name 속성명으로 그룹핑 되어 하나만 선택할 수 있게 되었지만,
서버에 form을 제출하면, 서버는 사용자가 어떤 양식을 체크 했는지 알 수 없습니다.

value 라는 속성을 이용해서, 사용자가 어떤 값을 선택 했는지 전달할 수 있습니다.
사용자에게 보이지는 않지만, 서버에 제출할 때 name 속성 대신 제출 됩니다.


value 속성 적용

서버에 제출할 때 전송되는 값으로, 서로 다른 value 값을 가져야 합니다.

<h3> Anything Check! </h3>
    <form action="/root">

        <p>
            <label for="child">Child</label>
            <input type="radio" name="Age" id="child" value="child">

            <label for="Teen">Teenager</label>
            <input type="radio" name="Age" id="Teen" value="Teen">

            <label for="Adult">Adult</label>
            <input type="radio" name="Age" id="Adult" value="Adult">
        </p>
        <button>Submit</button>
    </form>

value 속성을 통해서 사용자가 어떤 값을 선택했는지 서버가 알 수 있습니다.



profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글