📝 JavaScript
🖥️ 1. form 태그
1-1. id값과 name값을 활용해 객체 / 값 획득하기
- id값 사용
✔️ id값을 활용해 객체 얻기
let id = document.getElementById("id값");✔️ id값을 활용해 입력값 획득하기
document.getElementById("id값").value;
- name값 사용
✔️ name값을 활용해 객체 얻기
let name = document.name값;✔️ name값을 활용해 입력값 획득하기
document.name값.value;
EX)
<form name="form1">
id : <input type="text" name="user_name" id="user_name"/>
</form>
<script>
// id로 접근
let id = document.getElementById('user_name');
// form 태그에 지정되는 name 속성을 통하여 접근 가능
let myform = document.form1;
let id2 = myform.user_name;
let id3 = document.form1.user_name;
if( !id.value ){ // 값이 없을 경우 : true, 값이 있을 경우 : false
alert("아이디를 입력해주세요");
}
</script>1-2. select 태그
EX)
<body>
<form name="form1">
<select name="sel">
<option>---선택하세요---</option>
<option value="item1">항목1</option>
<option value="item2">항목2</option>
</select>
</form>
<script>
let myform = document.form1;
let select = myform.sel.selectedIndex;
console.log( select );
console.log( myform.sel );
console.log( myform.sel[myform.sel.selectedIndex].value );
if( myform.sel.selectedIndex < 1 ){
alert("셀렉트박스 항목을 선택해주세요!");
}
</script>
</body>1-3. 체크박스 / 라디오 버튼
EX)
<body>
<form name="form1">
<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자
</form>
<script>
if( !document.form1.gender[0].checked ){
alert("라디오버튼을 체크해주세요")
}
// 하나라도 체크되어있다면 이 값을 true로 변경
let is_check = false;
for( let i = 0; i < document.form1.gender.length; i++ ){
if( document.form1.gender[i].checked ){
is_check = true;
break;
}
}
if( !is_check ){
// 하나도 체크가 안 되어 있을 경우 처리
}
</script>
</body>1-4. focus
- focus는 커서가 지정된 상태를 말한다.
EX)
<body>
<form name="form1">
<input type="text" name="userid" id="userid" />
</form>
<script>
document.form1.userid.focus();
</script>
</body>1-5. reset
document.form1.reset()=<input type='reset'/>과 동일한 효과
1-6. submit
- 작성된 내용 전송 :
document.form1.submit();
📝 예제
EX)
<head>
...
<style type="text/css">
/** 하나의 입력 영역을 정의하는 <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>
// validaion check
function doSubmit(){
// 폼 객체
let frm = document.form1;
// 이름 요소 입력여부 검사
if( !frm.user_name.value ){
alert("이름을 입력해 주세요!");
frm.user_name.foucus();
return false;
}
// 라디오 버튼
if( !frm.gender[0].checked && !frm.gender[1].cehcked ){
alert("성별을 선택해 주세요");
frm.gender[0].foucus();
return false;
}
// select
if( frm.job.selectedIndex < 1 ){
alert("직업을 선택해 주세요");
frm.job.foucus();
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>