이전 글에서는 input과 button에 대해 알아보았습니다.
이번 글에서는 checkbox와 radio 타입에 대해 알아보겠습니다.
포괄적인 옵션을 선택할때, checkbox
checkbox는 하나의 틀에서 여러 옵션을 자유롭게 선택하고 싶을 때 사용합니다.
보통은 사각 버튼의 ui로 나타내며,
input 태그에서 type = checkbox를 사용하여 만들 수 있습니다.
checkbox의 속성
- checked
체크박스의 기본값이 체크되어 있기를 원할 경우 선택합니다. 속성만 추가하여 적용합니다. - value
텍스트에서 사용하는 것처럼 값을 지정해주지만, 사용방식은 조금 다릅니다.
checkbox의 value
checkbox를 체크한 뒤 submit을 수행하면 [name] = [value] 의 형태가 됩니다.
만약 value 값을 지정하지 않는다면, on이 기본값으로 지정됩니다.
하지만 checkbox를 체크하지 않았다면, [name] = null 이 됩니다.
<body>
<div>
<form method="get" action="./subindex.html">
<input type="checkbox" name="checked1" checked/>
</form>
</div>
</body>위 예시코드는 value값이 지정되지 않았습니다.
이 경우 vaule 값은 on으로 적용합니다.(체크되어있을경우)
만약 체크되지 않았다면 null값을 반환합니다.
method = "get"이기 때문에 subindex.html?checked1=on 의 url로 표시될겁니다.
여기서 하나의 값에 여러 옵션을 따져야 할 경우 value를 활용하게 됩니다.
<body>
<div>
<form method="get" action="./subindex.html">
<input type="checkbox" name="checked1" value="option1" />
<input type="checkbox" name="checked1" value="option2" />
</form>
</div>
</body>checked1 이라는 name을 가진 체크박스가 2개 있습니다.
근데 따져봐야할 옵션이 2개일 경우라면, value 값을 적용합니다.
위의 예시코드를 예를 들자면, option1 과 option2 는 url 상에서 각각 checked1=option1, checked1=option2 로 표현됩니다.
option1을 체크한다면 subindex.html?checked1=option1 이,
option2를 체크한다면 subindex.html?checked1=option2 가,
둘 다 체크한다면 subindex.html?checked1=option1&checked1=option2 로 표현됩니다.
또한 이 경우 하나의 key값에 여러 value를 가지기 때문에,
하나의 value를 반환하는 get() 보다는 value의 배열을 반환하는 getAll()을 사용합니다.
<script>
const url = new URL(window.location.href);
const urlParams = url.searchParams;
console.log(urlParams.getAll("checked1"));
</script>
여러 옵션 중에서 하나만 고를때, radio
라디오 버튼은 체크박스와는 다르게 사용합니다.
하나의 큰 틀에 여러개의 옵션이 존재하지만, 그 중 하나만 골라야 할 경우 선택합니다.
input 태그에서 type="radio" 를 선택하여 만들 수 있으며,
원형의 버튼 ui 가 생성됩니다.
radio의 속성
- checked
checked 옵션은 선택된 버튼임을 알리는 속성입니다.
하나의 라디오 그룹에서는 하나의 라디오 버튼만이 checked 속성을 사용할 수 있으며,
중복된 경우 가장 밑의 라디오 버튼이 체크됩니다. - name
name 속성은 radio 버튼의 그룹을 부여합니다.
따라서 name 속성이 없는 라디오 버튼은 독립적으로 작동합니다.
라디오 버튼의 목적이 여러 옵션중 하나를 선택하는 것이기 때문에,
이를 위해 라디오 버튼은 name 속성을 사용하여 그룹을 만들어 묶는 작업을 수행해야합니다.
name을 사용하지 않았을 때와 사용했을 때의 차이를 알아보겠습니다.
name을 사용하지 않은 라디오 버튼입니다.<body> <input type="radio" /> <input type="radio" /> <input type="radio" /> <input type="radio" /> <input type="radio" /> </body>
각각의 라디오 버튼이 다른 그룹취급되어 독립적으로 작동합니다.
위의 라디오버튼들에 name을 적용해보겠습니다.
5개의 라디오 버튼 모두 group1 이라는 하나의 그룹으로 묶입니다.<body> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> </body>
위와 같이 name="group1"으로 지정해준다면,이제부터는 group1의 5개 버튼 중 하나만 고를 수 있게 되었습니다.
이번에는 두개의 그룹으로 나눠보겠습니다.
3개의 버튼은 group1으로, 2개는 group2로 지정하였습니다.<body> <div> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> </div> <div> <input type="radio" name="group2"/> <input type="radio" name="group2"/> </div> </body>
2개의 그룹은 독립적으로 작동하며, group1에서 1개, group2에서 1개의 옵션을 고를수 있습니다 - value
radio 버튼의 값 또한 [name] = [value]로 지정됩니다.
이때 value가 없다면, url 뒤에는 [name]=on 이 됩니다.
문제는, 그룹내의 어떤 버튼을 골라도 on이 된다는 것입니다.
따라서 어떤 옵션을 골랐는지 알고 싶다면, value를 반드시 지정해줘야 합니다.
위의 submit 버튼을 누른다면, 어떤 버튼을 누르더라도 "group1=on" 이란 값이 전송됩니다.결국, 어떤 옵션을 골랐는지 알 수 없게됩니다.<body> <form method="get"> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="radio" name="group1"/> <input type="submit" value="submit"/> </form> </body>
따라서, 어떤 옵션을 골랐는지 확인하고 싶다면,<body> <form method="get"> <input type="radio" name="group1" value="opt1"/> <input type="radio" name="group1" value="opt2"/> <input type="radio" name="group1" value="opt3"/> <input type="radio" name="group1" value="opt4"/> <input type="radio" name="group1" value="opt5"/> <input type="submit" value="submit"/> </form> </body>
위와 같이 만들어야 어떤 옵션을 골랐는지가 반환됩니다.
아래 예시코드는 위의 속성을 활용한 간단한 폼 입니다.
<body>
<form method="get">
<h2>디저트 고르기</h2>
<p> 어떤 디저트를 좋아하나요?</p>
<div>
<p> 간식 </p>
<label>
<input type="radio" name="food" value="떡"/> 쫀득쫀득한 떡
</label>
<label>
<input type="radio" name="food" value="cookie" checked/> 바삭바삭한 쿠키
</label>
<label>
<input type="radio" name="food" value="bread"/> 부드러운 빵
</label>
<label>
<input type="radio" name="food" value="noThanks"/> 간식은 괜찮아요
</label>
</div>
<div>
<p> 음료 </p>
<label>
<input type="radio" name="drink" value="coffie" checked/> 쌉사름한 커피
</label>
<label>
<input type="radio" name="drink" value="juice"/> 달콤한 주스
</label>
<label>
<input type="radio" name="drink" value="coke"/> 톡 쏘는 콜라
</label>
<label>
<input type="radio" name="drink" value="water"/> 간단하게 물 한잔
</label>
<label>
<input type="radio" name="drink" value="noThanks"/> 음료수는 괜찮아요
</label>
</div>
<label>
<input type="checkbox" name="check1" checked/> 이 체크박스는 아무 의미도 없는 값으로 그냥 체크해보세요
</label>
<br/>
<label>
<input type="checkbox" name="i" value="know"/> 이글을 다 읽고 이해했으면 체크해보세요. 사실 그냥 있는 버튼이에요.
</label>
<br/>
<input type="submit" value="submit"/>
</form>
</body>
submit 버튼을 누르고 새로고침된 뒤 url을 보면 선택한 값이 나오는것을 알 수 있습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면 구성하기 : 폼(form) - 라벨(label) (0) | 2024.11.07 |
|---|---|
| 화면 구성하기 : 폼(form) - input과 button (0) | 2024.10.31 |
| 화면 구성하기 - 박스모델의 구조 (0) | 2024.10.21 |
| 화면 구성하기 - grid 의 정렬 : content와 items (0) | 2024.10.18 |
| 화면구성하기 - grid template : rows,columns,areas (0) | 2024.10.16 |
