day10
📌 기본 동작의 취소
- 폼에서 submit 버튼을 누르면 데이터가 전송,
a태그를 클릭하면 href 속성의 url로 이동한다. - 이러한 기본적인 동작들을 기본 이벤트라고 하는데
사용자가 만든 이벤트를 이용해서 이러한 기본
동작을 취소할 수 있다.
📌form태그
- id값에 의한 객체 획득 방법
let input
= document.getElementByID("user_name")
name 값에 의한 객체 획득 방법
let myform = document.form1;
let user_name = myform.user_name;let user_name = document. form1.user_name;
입력값의 획득
- id
document.getElementById("user_name").value;
- name
document.form1.user.name.value;
<form name="form1">
<input type="text" name="user_name" id="user_name"/>
</form>
<!--
- id값에 의한 객체 획득 방법
let input
= document.getElementByID("user_name")
- name 값에 의한 객체 획득 방법
let myform = document.form1;
let user_name = myform.user_name;
let user_name = document. form1.user_name;
- 입력값의 획득
- id
document.getElementById("user_name").value;
- name
document.form1.user.name.value;
-->📢 form (2)
- selectedIdex : 사용자가 선택한 위치
document.form1.sel.selectedIndex;
- 세 번째 항목 선택하기()
document.form1.sel.selectedIndex = 2;
- 선택 항목의 값 조회하기
- <select> 태그의 객체는 하위<option> 태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성값으로 사용하면, 선택한 <option>태그의 객체를 획득할 수 있다. document.form1.sel[document.form1.sel.selectedIndex].value;
- 선택 여부 검사하기
let myform = document.form1;
if ( myform. sel.selectdeIndex < 1 ){
.. 선택하지 않았을 경우 처리 ..
}
<form name="form1">
<select name="sel">
<option>---선택하세요---</option>
<option value="item1">항목1</option>
<option value="item2">항목2</option>
</select>
</form>
<!--
- selectedIdex : 사용자가 선택한 위치
document.form1.sel.selectedIndex;
- 세 번째 항목 선택하기()
document.form1.sel.selectedIndex = 2;
- 선택 항목의 값 조회하기
- <select> 태그의 객체는 하위<option> 태그 객체를
배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을
selectedIndex 속성값으로 사용하면, 선택한
<option>태그의 객체를 획득할 수 있다.
document.form1.sel[document.form1.sel.selectedIndex].value;
- 선택 여부 검사하기
let myform = document.form1;
if ( myform. sel.selectdeIndex < 1 ){
.. 선택하지 않았을 경우 처리 ..
}
-->📢 form (3)
- 체크박스, 라디오버튼 동일
let gender =
document.form1.gender[0].value;
- 체크상태 검사
if(!document.form1.gender[0].checked){
.. 체크 되지 않았을 경우 처리..
}
- 첫 번째 항목을 강제로 체크하는 경우
(반대의 경우 false)
document.form1.gender[0].checked = true;
<form name="form1">
<input type="radio" name="gender" value="M"/>남자
<input type="radio" name="gender" value="F"/>여자
</form>
<!--
- 체크박스, 라디오버튼 동일
let gender =
document.form1.gender[0].value;
- 체크상태 검사
if(!document.form1.gender[0].checked){
.. 체크 되지 않았을 경우 처리..
}
- 첫 번째 항목을 강제로 체크하는 경우
(반대의 경우 false)
document.form1.gender[0].checked = true;
-->📢 form (4)
<!--
- 포커스 지정(focus)
- 포커스는 입력컨포넌트에 입력을 위한 커서가
지정된 상태
document.form1.user.focus();
- 작성된 내용을 리셋하기
- <input type = "reset" />
document.form1.user.reset();
- 작성된 내용을 전송
- Form 객체의 submit 버튼을 클릭한 것과 동일한 효과
- <input type="submit" />
document.form1.submit();
-->📌 form 예시
<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>
function doSubmit(){
let frm = document.form1;
// validation check
// text 요소의 입력 여부 검사
// !document.form1.user_name.value = 빈값이면 true
if( !frm.user_name.value ){
// 값이 없을 때
alert("이름을 입력해 주세요");
frm.user_name.focus();
return false; 이것만 alert창이 뜨게함
}
// 라디오버튼 입력 여부 검사
// 개발자 도구에서 console에서
//document.form1.gender[0].checked 검사하면
// 체크 안돼있는 상태에서 false 돼있으면 true
if( !frm.gender[0].checked
&& !frm.gender[1].checked ){
alert("성별을 선택해 주세요");
frm.gender[0].focus();
return false;
}
// select 요소에 대한 선택 위치 검사
if(frm.job.selectedIndex < 1){ // 0 = --- 선택하세요 ---
alert("직업을 선택해 주세요");
frm.job.focus();
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("취미를 선택해 주세요");
frm.hobby[0].focus();
return false;
}
// 제출 확인
if(confirm("입력하신 내용이 맞습니까?")){
frm.submit();
}
}
</script>결과값
- 이름 칸이 빈 칸 일떄
- 성별이 빈 칸 일때
- 직업이 --- 선택하세요 --- 일때 // 포커스로 인해 진한표시로 표시됨
- 취미가 빈 칸 일때
- 양식 확인컨펌
📢 form 예시
<body>
<form id="target" action="result.html">
<label>
name <input type="text" id="name"/>
</label>
<input type="submit"/>
</form>
<script>
let t = document.getElementById("target");
t.addEventListener('submit', function(event){
if( document.getElementById("name")
.value.length == 0 ){
alert("name 필드의 값이 누락되었습니다.");
event.preventDefault();
}
});
</script>
</body>결과값
빈 칸 일시 출력
⭐️내가만든쿠키⭐️