클라이언트 측 JavaScript에서 폼(Form)은 사용자의 입력을 받는 대표적인 수단이다.
📔 웹 페이지에서 사용할 수 있는 주요 폼 요소(입력 요소)
- text
- < textarea >
- number
- password
- range
- time
- color
- date
- datetime-local
- month
- week
- checkbox
- radio
- file
- < select > / < select multiple >
🔸 입력 상자/선택 상자의 값 취득하기 - value 프로퍼티
: value 프로퍼티에 액세스하기만 하면 된다.
<form>
<label for="name">이름:</label>
<input id="name" name="name" type="text" size="30" />
<input id="btn" type="button" value="송신" />
</form>
<div id="result"></div>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('btn').addEventListener('click', function() {
var name = document.getElementById('name');
console.log(name.value);
},false);
}, false);
* 값을 설정하는 경우 : value 프로퍼티에 값을 대입 *
name.value = '정시온';🔸 체크 상자의 값 취득하기
<form>
<div>
좋아하는 음식은?
<label><input type="checkbox" name="food" value="라면" /> 라면</label>
<label><input type="checkbox" name="food" value="만두" /> 만두</label>
<label><input type="checkbox" name="food" value="불고기" /> 불고기</label>
<input id="btn" type="button" value="송신" />
</div>
</form>
document.addEventListener('DOMContentLoaded', function() {
// 버튼 클릭 시에 체크 항목의 값을 다이얼로그 표시
document.getElementById('btn').addEventListener('click', function() {
// 선택값을 보관하기 위한 배열
var result = [];
var foods = document.getElementByName('food'); ⓐ
// 체크 박스를 검색하여 체크 상태에 있는지 확인
for(var i = 0, len = foods.length; i < len; i++) {
var food = foods.item(i);
// 체크되어 있는 항목의 값을 배열에 추가
if (food.checked) { ⓑ
result.push(food.value);
}
}
// 배열의 내용을 다이얼로그에 출력
window.alert(result.toString());
}, false);
}, false);
- getElementByName 메소드 (ⓐ)
체크 상자의 리스트를 NodeList 객체로 반환하기 때문에 for 블록에서 개별 요소를 순서대로 꺼낸다. - checked 프로퍼티 (ⓑ)
라디오 버튼이 체크되어 있는지의 여부를 나타내주는 프로퍼티
ture(체크가 되어 있는)라면 value 속성을 배열 result에 추가 한다.
🔸 라디오 버튼의 값 취득하기 - getRadioValue 함수
: 거의 체크 상자와 동일한 흐름이므로 더욱 범용성을 갖도록 라디오 버튼 액세스를 위한 코드를 getRadioValue함수로 외부화 하고 있다.
<form>
<div>
좋아하는 음식은?
<label><input type="checkbox" name="food" value="라면" /> 라면</label>
<label><input type="checkbox" name="food" value="만두" /> 만두</label>
<label><input type="checkbox" name="food" value="불고기" /> 불고기</label>
<input id="btn" type="button" value="송신" />
</div>
</form>
document.addEventListener('DOMContentLoaded', function() {
// 지정된 라디오 버튼(name)의 값을 취득
var getRadioValue = function(name) {
var result = '';
var elems = document.getElementByName('name');
// 라디오 버튼을 검색하여 체크 상태에 있는지 확인
for(var i = 0, len = elems.length; i < len; i++) {
var elem = elems.item(i);
// 체크되어 있는 항목의 값을 배열에 추가
if (elem.checked) {
result = elem.value;
break; // 라디오 버튼은 단일 선택이므로 체크 상태에 있는 것이 발견된 타이밍에 바로 루프를 빠져 나옴
}
}
return result;
};
// 버튼 클릭시에 선택 항목의 값을 다이얼로그 표시
document.getElementById('btn).addEventListener('click', function() {
window.alert(getRadioValue('food'));
}, false);
}, false);🔸 라디오 버튼/체크 상자의 값 설정하기
: 'NodeList 객체를 취득 -> for 루프에서 개별 요소에 액세스'는 동일하지만
설정하고자 하는 값과 동일한 value값을 가진 라디오 버튼/체크 상자를 찾아서 일치하는 요소의 checked 프로퍼티를 true로 설정한다.
❕ 라디오 버튼의 설정 ❕
: 동일 이름의 라디오 버튼에서는 그중 하나를 체크 상태로 하면 다른 버튼의 체크는 해제 된다.
<form>
<div>
좋아하는 음식은?
<label><input type="checkbox" name="food" value="라면" /> 라면</label>
<label><input type="checkbox" name="food" value="만두" /> 만두</label>
<label><input type="checkbox" name="food" value="불고기" /> 불고기</label>
<input id="btn" type="button" value="송신" />
</div>
</form>
document.addEventListener('DOMContentLoaded', function() {
// 지정된 라디오 버튼(name)의 값을 설정
var getRadioValue = function(name, value) {
var elems = document.getElementByName('name');
// 라디오 버튼을 검색하여 값이 동등한 것을 검출
for(var i = 0, len = elems.length; i < len; i++) {
var elem = elems.item(i);
// 인수 value와 동등한 값을 갖는 항목을 선택 상태로
if (elem.value === value) {
elem.checked = true;
break;
}
}
};
// 라디오 버튼 food의 초기값을 '만두'에
setRadioValue('food', '만두');
}, false);❕ 체크 상자의 설정 ❕
<form>
<div>
좋아하는 음식은?
<label><input type="checkbox" name="food" value="라면" /> 라면</label>
<label><input type="checkbox" name="food" value="만두" /> 만두</label>
<label><input type="checkbox" name="food" value="불고기" /> 불고기</label>
<input id="btn" type="button" value="송신" />
</div>
</form>
document.addEventListener('DOMContentLoaded', function() {
// 지정된 체크 상자(배열name)의 값을 설정
var setCheckValue = function(name, value) {
var elems = document.getElementByName('name');
// 체크 상자를 탐색하여 해당하는 값을 갖는 것을 검출
for(var i = 0, len = elems.length; i < len; i++) {
var elem = elems.item(i);
// 배열 value에 value속성과 동등한 값이 포함되는 경우는 선택 상태로
if (value.indexOf(elam.value > -1) {
elem.checked = true;
}
}
};
// 체크 상자 food 초기값을 '만두, 불고기'
setCheckValue('food', ['만두', '불고기']);
}, false);- setCheckValue 함수
체크 상자의 값을 설정 하며 인수 value에 배열을 전달한다. (체크 상자 = 여러 값) - Array.indexOf 메소드
배열 value 요소의 value 속성과 동일한 것이 있는지 확인
배열에 지정된 요소가 존재하지 않은 경우에 -1 반환 하므로 -1보다 큰지 판정하는 코드를 짰다. - break; ❌
라디오 버튼과 달리 하나가 일치한 후에도 루프를 끝내지 않고 탐색을 계속
🔸 복수 선택할 수 있는 리스트 상자의 값 취득하기
<form>
<div>
<label for="food">좋아하는 음식은?</label>
<select id="food" multiple>
<option value="라면">라면</option>
<option value="만두">만두</option>
<option value="불고기">불고기</option>
</select>
<input id="btn" type="button" value="송신" />
</div>
</form>
document.addEventListener('DOMContentLoaded', function() {
var getSelectValue = function(name) {
var result = [];
var opts = document. getElementById(name).options;
for(var i = 0; len = opts.length; i < len; i++;) {
var opt = opts.ltem(i);
if(opt.selected) {
result.push(opt.value);
}
}
return result;
};
document.getElementById('btn').addEventListener('click', function() {
window.alert(getSelectValue('food'));
}, false);
}, false);
