form 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="target" action="result.html" method="post">
<label> name :
<input id="name" name="name" type="text">
</label>
<input type="submit">
</form>
<script>
let t = document.getElementById('target');
t.addEventListener('submit', function(event){
let name = document.getElementById('name');
if(name.value.length == 0) {
alert("name필드에 값을 입력해주세요!");
event.preventDefault();
}
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
이름 : <input type="text" name="user_name" id="user_name"/>
<input type="button" value="전송" onclick="validation()"/>
</form>
<script>
function validation(){
// id 값에 의한 획득 방법
let input = document.getElementById('user_name');
// form태그에 지정되는 name 속성을 통하여 객체 획득
let form = document.form1;
let user_name = form.user_name;
if( !user_name.value ){
// 이름이 입력되지 않았을 경우에 처리
alert("이름을 입력해 주세요!!");
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
<select name="sel">
<option>----- 선택하세요 -----</option>
<option value="item1">항목1</option>
<option value="item2">항목2</option>
</select>
</form>
</body>
</html>1. <select> </select>
<select>태그 안에 포함된<option>태그 중에서 몇 번 째 항목이 선택되었는지를 파악하기 위해서는<selecet>태그 객체의 selectedIndex를 사용- 선택 위치는 0부터 시작 (가장 첫 번째
<option>태그가 0이다) <select>태그 객체의 selectedIndex 속성에 임의의 숫자값을 대입하면 대입한 위치에 해당하는<option>태그가 강제로 선택됨
document.form1.sel.selectedIndex = 2<select>태그의 객체는 하위<option>태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성 값으로 사용하면 선택한<option>태그의 객체를 획득할 수 있음- 선택한
<option>태그를 의미하는 객체의 value 속성은 사용자가 선택한 항목의 값을 의미
document.form1.sel[document.form1.sel.selectedIndex].value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="form1">
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</form>
</body>
</html>2. 라디오 버튼
- name 속성의 값을 동일하게 지정하기 때문에 javascript에서 name 속성을 통하여 접근할 경우 배열로 처리된다는 공통점을 가지고 있음
document.form1.gender[0].value로 값 획득 - 체크 박스의 체크 상태를 검사
document.form1.gender[0].value.checked - 첫 번째 항목을 강제로 체크하는 경우
document.form1.gender[0].value.checked = true;
3. 작성된 내용을 전송하기
- form 객체의 submit() 함수는
<form>태그의 action 속성에 명시된 파일로 사용자의 작성 내용을 전송 - submit() 함수는
<input type = "submit">버튼을 클릭한 것과 동일한 효과를 얻을 수 있음
document.form1.submit();
4. 작성된 애용을 리셋하기
- form 객체는 작성된 내용을 리셋하기 위한 reset() 함수를 찾는다
- 이 함수를 호출하게 되면
<input type = "reset">버튼을 클릭한 것과 동일한 효과를 얻을 수 있음
document.form1.reset();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/** 하나의 입력 영역을 정의하는 <div>태그 */
.input_group {
height: 42px;
border-bottom: 1px dotted #ccc;
font: 1em/40px '돋움', 'Helvetica';
}
/** 입력양식의 제목을 볼 수 있게 하는 태그 */
.input_group > label {
width: 80px; display: inline-block;
}
</style>
</head>
<body>
<form name="form1" onsubmit="doSubmit(); return false;">
<fieldset>
<legend>회원가입</legend>
<div class="input_group first">
<label>이름</label>
<input type="text" name="user_name"/>
</div>
<div class="input_group">
<label>성별</label>
<label><input type="radio" name="gender" value="M"> 남자</label>
<label><input type="radio" name="gender" value="F"> 여자</label>
</div>
<div class="input_group">
<label>직업</label>
<select name="job">
<option>----- 선택하세요 -----</option>
<option value="dev">프로그래머</option>
<option value="pub">퍼블리셔</option>
</select>
</div>
<div class="input_group">
<label>취미</label>
<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
</div>
<div class="input_group">
<label> </label>
<input type="submit" name="button" value="제출" />
<input type="button" name="button2" value="리셋" />
</div>
</fieldset>
</form>
<script>
function doSubmit() {
// 폼 객체
let frm = document.form1;
// text 요소의 입력여부 검사
if (!frm.user_name.value) {
alert('이름을 입력해주세요');
frm.user_name.fouse();
return false; // 경고창 하나씩 나오게 함
}
// 라디오 버튼 입력 여부 검사
if (!frm.gender[0].checked && !frm.gender[1].checked) {
alert('성별을 선택해주세요');
return false;
}
// select 요소에 대한 선택 위치 검사
if (frm.job.selectedIndex < 1) {
alert("직업을 선택해주세요");
frm.job.fouse();
return false;
}
// 체크 박스 선택 여부 검사
let chk = false;
for (let i=0; i<frm.hobby.length; i++) {
if(frm.hobby[i].checked) {
chk = true;
break;
}
}
if(!chk) {
alert("취미를 선택해주세요");
return false;
}
// 입력 확인하기
if (confirm("입력하신 내용이 맞습니까?")) {
frm.submit();
}
}
</script>
</body>
</html>