Web Basic/HTML
HTML form type - radio / type - checkbox
Hoplin
2022. 3. 8. 01:01
반응형
input 태그
input 태그에는 'type'이라는 속성이 존재한다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input#%3Cinput%3E_%EC%9C%A0%ED%98%95
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다.
developer.mozilla.org
이 타입은 여러가지 속성이 있지만, 그 중 항목을 선택하는 'radio'와 'checkbox'를 비교해 보고자 한다. 우선 이 두개 다 어떻게 출력되는지 보자.
type = "radio"
<fieldset>
<legend>Radio Field</legend>
<p><b>Radio Field Test</b></p>
<label><input type="radio" value="yes" name="check"> Yes</label>
<label><input type="radio" value="no" name="check"> No</label>
<button type="submit" value="sbmt" onclick="getRadioValue()">Submit</button>
</fieldset>
type="checkbox"
<fieldset>
<legend>Product select</legend>
<p><b>주문할 상품을 선택하세요</b></p>
<label><input type="checkbox" value="gift-3kg"> gift 3kg</label>
<label><input type="checkbox" value="gift-5kg"> gift 5kg</label>
<label><input type="checkbox" value="home-3kg"> home 3kg</label>
</fieldset>
두 타입 모두 '항목을 선택한다' 라는 공통적인 특성을 띄고 있다. 하지만 차이점이 있다.
- radio : 하나의 항목만 선택할 경우에 사용. 하나를 선택한 상태에서 다른 항목을 선택하면 기존 항목 선택이 취소된다.
- checkbox : 두개 이상의 항목을 선택할 경우에 사용
이 두 타입의 form에서 대표적으로 중요한 속성은 아래 세가지가 존재한다.
- value : 선택한 체크 박스, 라디오 버튼을 서버에 알려줄 때 넘겨줄 값을 지정한다. 이 값은 영문, 숫자여야 하며, 필수 속성이다.
- checked : 기본으로 선택해 놓고 싶은 항목에 사용된다.
- name : 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용된다. 라디오 버튼에서 '하나의 버튼만 선택'할 수 있게 하기 위해서는 이 name값을 모두 동일하게 지정해야한다.
이를 응용하여 아래와 같이 선택한 값을 자바스크립트로 불러오는 간단한 코드를 작성해 보자.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="app.js"></script>
</head>
<body>
<div id="container">
<form autocomplete="off">
<fieldset>
<legend>Radio Field</legend>
<p><b>Radio Field Test</b></p>
<label><input type="radio" value="yes" name="check"> Yes</label>
<label><input type="radio" value="no" name="check"> No</label>
<input type="button" value="Submit" onclick="select_radio()">
</fieldset>
<div>
Selected Value of Radio : <span id="selectedvalue"></span>
</div>
<br>
<fieldset>
<legend>Product select</legend>
<p><b>주문할 상품을 선택하세요</b></p>
<label><input type="checkbox" value="gift-3kg" name="gift"> gift 3kg</label>
<label><input type="checkbox" value="gift-5kg" name="gift"> gift 5kg</label>
<label><input type="checkbox" value="home-3kg" name="gift"> home 3kg</label>
<input type="button" value="Submit" onclick="select_checkbox()">
</fieldset>
<div>
Selected Value of Checkbox : <span id="checkboxselect"></span>
</div>
</form>
</div>
</body>
</html>JS(app.js)
function select_radio(){
let selected = document.querySelector('input[name="check"]:checked').value;
let innerhtml = document.getElementById("selectedvalue")
innerhtml.innerHTML = selected;
}
function select_checkbox(){
let innerhtml = document.getElementById("checkboxselect")
let selected = document.getElementsByName("gift");
let filtered = [];
let statement = "";
for(let i = 0;i < selected.length;i++){
if(selected[i].checked === true){
filtered.push(selected[i].value);
}
}
for(let i in filtered){
if(i < filtered.length - 1){
statement += filtered[i] + " / ";
}
else{
statement += filtered[i]
}
}
innerhtml.innerHTML = statement;
}반응형