from 객체
- document객체의 하위 객체 중 하나
- form 유효성 검사 등 여러가지 form요소에 관련된 작업 수행
01. form요소의 객체 획득하기
1-1. id속성값으로 접근하는 경우
var myform = document.getElementById("form의 id값");
1-2. name속성값으로 접근하는 경우
var myform = document.form의 name값;
02. 획득한 <form> 안의 <input> 요소 접근
2-1. id속성값으로 접근하는 경우
var inputEle = document.getElementById(input의 id값");
2-2. name속성값으로 접근하는 경우
var myform = document.form의 name값;
var inputEle = myfrom.input의 name값;
2-3. name속성값을 아래와 같이 축약 가능
var inputEle = document.form의 name값.input의 name값;
03. 획득한 <input> 요소의 입력값 처리 : value
3-1. name속성값으로 접근하는 경우
form객체 접근
var myform = document.form의 name값;
form객체의 하위 input요소 접근
var inputEle = myform.input의 name값;
input요소의 value 할당
inputEle.value = "input태그에 값 할당하기 텍스트"
input요소의 value 조회
var msg = inputEle.value;
3-2. name속성값을 아래와 같이 축약 가능
form객체 접근.하위 input요소 접근.value 할당
document.form의 name값.input의 name값.value="input태그에 값 할당하기 텍스트"
form객체 접근.하위 input요소 접근.value 조회
var msg = document.form의 name값.input의 name값.value
04. 획득한 <input> 요소에 대한 값의 입력 여부 조회
4-1. if문 return 으로 조회
if(!document.form의 name값.input의 name값.value) {
//값이 입력되지 않은 경우의 처리
alert("내용을 입력하세요");
//focus() : 해당요소에 선택효과 주기 (=커서 클릭 효과)
document.form의 name값.input의 namer값.focus();
return;
}05. 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- action속성은 form내의 input요소에 입력된 내용을 전송받을 backend의 URL -->
<form action="https://www.naver.com" id="myform">
<div>
<label for="username">사용자이름</label>
<input type="text" name="username" id="username" />
</div>
<div>
<label for="userpass">비밀번호</label>
<input type="password" name="userpass" id="userpass" />
</div>
<!-- backend에 입력값을 전송하는 버튼 -->
<button type="submit" id="btn">입력값 확인</button>
<hr />
<!-- 선택결과를 표시할 div -->
<div id="result"></div>
</form>
<script>
/* form요소 안에서 <button type="submit">을 누른 경우 */
//이 이벤트가 실행된다고해서 <form>자체의 전송기능이 사라지지는 않으므로, 이벤트 처리 후 전송을 방지하기위한 코드를 적용해야 한다.-> e.prventDefault();
/* 1.form태그의 id로 접근하여 객체 생성 */
const myform = document.querySelector('#myform');
/* 2. myform의 'submit'이벤트발생시 이벤트핸들러함수 연결 */
myform.addEventListener('submit', e => {
/* 3.form태그의 submit이벤트 적용시 반드시 첫페이지에 정의한다. */
//-> 안해놓을 시 submit에 기본동작인 '새로고침'이 되어 form 태그의 action url로 이동한다
e.preventDefault();
/* 4. input#username 과 input#userpass를 객체로 가져온다 */
const username = document.querySelector("#username");
const userpass = document.querySelector("#userpass");
/* 5.if문으로 value속성값이 없을 때 기능 정의내용 */
if (!username.value) {
//alert() : 메시지 팝업 표시하기
alert("사용자 이름을 입력하세요.");
//객체.focus() : 강제로 입력커서를 위치시킴
username.focus();
//입력값이 완전하지 않으므로 이후 처리과정이 무의미하기 때문에 처리과정 중단을 위한 return 사용
return;
}
if (!userpass.value) {
alert("비밀번호를 입력하세요.");
userpass.focus();
return;
}
/* 6.모든 if문을 통과했다면 입력내용을 #result에 출력 */
document.querySelector("#result").innerHTML = "사용자이름 :" + username.value + "<br/>비밀번호" + userpass.value;
//중단시켜놓은 <form>의 원래 기능을 무시하고 강제 전송
// e.currentTarget.submit();
});
</script>
</body>
</html>06. 짤막 TIL
input
input 태그는 form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
<input> 태그는 다양한 종류가 있는데 type속성에 의해 구분된다.
form 태그 내에 존재하여야 입력 데이터를 전송할 수 있으나 ajax를 사용할 시에는 form 태그 내에 존재하지 않아도 된다.
서버에 전송되는 데이터는 name 속성을 키로, value 속성을 값으로하여 key=value의 형태로 전송된다.
submit 이벤트와 기본 동작 방지
폼 요소의 이벤트는 내부 <button> 또는 <input>의 type 속성에 따릅니다. 폼은 서버에 작성된 데이터를 보내기 위함이므로 submit 이벤트가 거의 사용되며, type="submit"의 인터페이스를 클릭하면 폼 내부에 입력된 모든 내용(value)을 서버에 제출하는 동작이 일어납니다. 이는 submit의 기본(default) 이벤트입니다.
이때, 이벤트를 등록하는 객체는 버튼이 아닌 폼 요소에 지정해야 합니다. 이렇게 하면 인터페이스를 감싼 <form>은 submit 이벤트 함수가 바인딩 된 대상(this) - event.currentTarget(=이벤트핸들러가 부착된것)이 되며, submit 버튼은 실제 이벤트가 발생하는 대상 - event.target이 됩니다.
참고: 이벤트 위임(Event Delegation)
하지만 데이터를 서버로 전송하지 않고 다른 목적으로 사용하려면, 이 기본 이벤트를 취소해줘야 합니다. 이를 위해서 리스너 함수에 매개 변수로 들어오는 event 객체에 다음의 API 메소드를 사용합니다.
event.preventDefault()
단, 해당 이벤트가 취소 가능한 이벤트여야 하며, 이는 event.cancelable로 확인 가능합니다.
https://nykim.work/96 (버튼태그와 인풋타입버튼에 관한 이야기)
