[Javascript] Form 요소

---

 

#1. Form요소

1. form 요소의 객체 가져오기

<form name="form_name" id="form_id">
  <input type="text" name="input_name" id="input_id" />
</form>

1)  <form> 요소에 접근

• id 속성값으로 접근하는 경우

const myForm = document.getElementById("form_id");

또는

const myForm = document.querySelector("#form_id");

• name 속성값으로 접근하는 경우

const myForm = document.form_name;

 

2) <form> 요소 안의 <input> 요소에 접근

• id 속성값으로 접근하는 경우

const myInput = document.getElementById("input_id");

또는

const myInput = document.querySelector("#input_id");

• name 속성값으로 접근하는 경우 (보통은 id 속성값으로 접근하기 때문에 자주 쓰이지는 않는다)

const myForm = document.form_name;
const myInput = myForm.input_name;

// name 속성값을 사용하는 경우 아래와 같이 축약도 가능하다.
const myInput = document.form_name.input_name;

 

3) 가져온 <input> 요소의 입력값 처리

• <input> 요소의 value 속성을 사용하여 입력값을 조회하거나 설정할 수 있다.

// input 요소에 접근
const myInput = document.getElementById("input_id");

// 값의 설정
myInput.value = "예시입니다.";

// 값의 조회
const msg = myInput.value;

console.log(msg);  // 예시입니다.

• name 속성값을 사용하는 경우 아래와 같이 사용할 수 있다.

const msg = document.form_name.input_name.value = "예시입니다.";

console.log(msg);  // 예시입니다.

• 가져온 <input> 요소에 대한 값의 입력여부 확인

    // <input>의 아이디값 가져오기
    const myInput = document.getElementById("input_id");

    // 입력값이 없을 경우
    if(!myInput.value) {
      // 알림창으로 알린다.
      alert("내용을 입력하세요.");
	  
      // 입력되지 않는 <input> 으로 자동클릭
      myInput.focus();
    }

 

2. 선택 가능한 요소의 제어

1) 드롭다운 제어

• <select> 태그로 표현되는 드롭다운 요소는 그 자체가 배열이고, <option> 태그들이 배열의 요소가 된다.
• <option> 태그는 0부터 시작하여 배열과 같이 순서대로 나열된다.
• 드롭다운 객체에 대한 selectIndex는 선택된 요소의 배열 인덱스를 의미한다.

<form id="myform">
  <div>
    <label for="subject">과목</label>
    <select name="subject" id="subject">
      <option value="">선택하세요</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JAVASCRIPT</option>
    </select>
  </div>
</form>

// <select> 태그 요소에 접근
const dropdown = document.querySelector("#subject");

// 특정 위치값을 강제로 지정
dropdown.selectedIndex = 2;  // JAVASCRIPT

// 현재 선택된 요소의 위치
const choiceIndex = dropdown.selectedIndex;  // 2

// 현재 선택된 요소의 value 값
const choiseValue = dropdown[choiceIndex].value;  // javascript

 

※ 주로 첫 번째 <option> 요소는 선택을 요구하기 위한 안내문이 표시되는 경우가 많기 때문에 selectIndex 값이 0인 경우 선택하지 않은 것으로 간주한다.

if(dropdown.selectedIndex == 0) {
  alert("선택된 항목이 없습니다.");
  return;
}

 

2) checkbox, radio 제어

• 배열과 특성은 동일하지만, forEach( ) 이외의 탐색을 위한 메서드는 포함하고 있지 않다.
• checked 프로퍼티를 사용하여 선택 여부를 조회하거나 선택 상태를 강제로 설정 할 수 있다.

<form id="myform">
  <label>
    <input type="radio(또는 checkbox)" name="subject" class="subject" value="html"/>HTML
  </label>
  <label>
    <input type="radio(또는 checkbox)" name="subject" class="subject" value="css"/>CSS
  </label>
  <label>
    <input type="radio(또는 checkbox)" name="subject" class="subject" value="javascript"/>Javascript
  </label>
</form>

<p id="console"></p>

// 리턴 타입이 배열과 비슷한 NodeList 타입의 객체
// -> 배열과 특성은 동일하지만, forEach 이외의 탐색을 위한 메서드는 포함하고 있지 않다.
const radio = document.querySelectorAll(".subject");

// radio의 모든 원소를 스캔하면서 원소(v)와 인덱스(i)를 콜백함수에게 전달하는 탐색
radio.forEach((v,i) => {
  v.addEventListener("change", e => {
  
  	// 선택하는 요소가 <p> 태그에 입력된다.
    document.querySelector("#console").innerHTML = e.currentTarget.value;
  });
});

 

3. focus, reset, submit

<form action="도메인주소" id="myform">
  <h3>회원가입</h3>
  <input type="text" name="id" id="id" class="join" /> -
  <input type="password" name="password" id="password" class="join" />
</form>

<button type="button" id="reset">reset</button>

1) focus

• focus( ) 함수는 특정 항목에 입력 커서를 할당하는 기능을 한다.
• focus 이벤트는 특정 항목에 입력 커서가 할당되었을 때 동작하는 이벤트이다.
  • blur 이벤트는 특정 항목에서 입력커서가 빠져 나왔을 때 동작하는 이벤트 (focus의 반대)

// 클래스값이 join인 값을 모두 가져온다.
const join = document.querySelectorAll(".join");

// forEach 반복문을 사용하여
join.forEach((v,i) => {

  // focus 이벤트가 발생하면
  v.addEventListener("focus", e => {
  
    // 해당하는 요소의 스타일을 정의
    e.currentTarget.style.backgroundColor = "#06f";
    e.currentTarget.style.color = "#fff";
  });
  
  // blur 이벤트가 발생하면 (focus에서 빠져나오면)
  v.addEventListener("blur", e => {
  
    // 해당하는 요소의 스타일을 정의
    e.currentTarget.style.backgroundColor = "#fff";
    e.currentTarget.style.color = "#000";
  });
});

 

2) reset

• 가져온 <form> 태그의 아이디 값에 해당하는 내용을 리셋한다.

// 아이디 값이 reset인 버튼을 클릭하면
document.querySelector("#reset").addEventListener("click", e => {

  // myform을 아이디 값으로 가지고 있는 form 태그의 값이 리셋된다.
  document.querySelector("#myform").reset();
});

 

3) sumit

• <form> 요소의 action 속성에 지정된 페이지로 사용자의 입력내용을 전송하는 기능

// form 태그의 아이디 값에 대한 submit 이벤트
document.querySelector("#myform").addEventListener("submit", e => {

  // form 태그의 본래 기능을 사용하지 않도록 하게 한다.
  e.preventDefault();
  
  // 중단시켜 놓은 form의 원래 기능을 무시하고 강제 전송
  e.currentTarget.submit();
});

 

※ preventDefault()

• 이벤트 리스너에 전달된 콜백함수 안에 에러가 있을 경우 그 이후 부분은 실행되지 않기 때문에 submit이 동작하게 되어 페이지가 새로고침되는 현상이 발생한다. 이 경우 에러가 발생하는 위치를 찾기 힘들기 때문에 이를 방지하기 위해 사용한다.

 

4. 정규표현식

1) 기본적인 정규표현식

• 숫자 모양에 대한 정규표현식

/^[0-9]*$/

• 영문 대,소문자에 대한 정규표현식

/^[a-zA-Z]*$/

• 한글에 대한 정규표현식

/^[ㄱ-ㅎ가-힣]*$/

• 영문 대,소문자와 숫자에 대한 정규표현식

/^[a-zA-Z0-9]*$/

• 한글과 숫자에 대한 정규표현식

/^[ㄱ-ㅎ가-힣0-9]*$/

 

2) 회원가입에 쓰이는 정규표현식

• 아이디 체크 (5~20자 사이의 영문 또는 숫자)

/^[a-z0-9]{5,20}$/

• 비밀번호 체크 (8~20자 사이의 영문과 숫자 조합)

/^(?=.*[a-zA-Z])(?=.*[0-9]).{8,20}$/

• 비밀번호 체크 (8~20자 사이의 영문과 숫자, 특수문자 조합)

/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*_+]).{8,20}$/

• 이름 체크 (2~20자 사이의 영문 또는 한글)

/^[a-z가-힣]{2,20}$/

• 이메일 체크

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i

• 핸드폰 번호 체크

/^01([0|1|6|7|8|9])-?([0-9]{3,4})-?([0-9]{4})$/