[javascript] 폼(form) 요소 속성 및 메서드

<form 요소 속성>

해당form.elements

• form 안에 있는 모든 폼 컨트롤 요소(input, select, textarea, button 등)를 HTMLFormControlsCollection 형태로 제공하는 유사배열 객체
  * HTMLFormControlsCollection : <form> 태그 내부에 있는 모든 폼 컨트롤 요소들 (<input>, <select>, <textarea>, <button> 등)을 배열처럼 접근 가능한 컬렉션 형태로 제공하는 읽기 전용 객체입니다
• 인덱스 또는 name 속성으로 접근 가능

접근 방법

1. 인덱스로 접근

• 인덱스를 사용하여 폼 안의 요소를 가져옴

// [문법]
해당form.elements[인덱스]

const form = document.querySelector('form');
console.log(form.elements[0].value);

2. name 속성으로 접근

• 각 요소의 name명을 통해 요소에 접근

// [문법]
해당form.elements['네임명']

const form = document.querySelector('form');
console.log(form.elements["email"].value);

3. name 점 표기법 접근

• 각 요소의 name명을 통해.(점)으로 해당 요소에 접근
• 유효한 식별자여야 함 : 이름이 숫자로 시작하거나, 공백 포함, 특수문자포함, js예약어는 안 됨
• 점 표기법 대신 대괄호 사용을 권장

// [문법]
해당form.elements.네임명

const form = document.querySelector('form');
console.log(form.elements.email.value);

4. 전체 순회

• 반복문을 통해 각 요소 접근

// [문법]
// 각 반복문의 기본 형태에 따름

// for
for(let i=0; 해당form.elements; i++) {}

// for...of
for(const val of 해명 form.element) {}

...

5. 배열 변환

• 배열 변환 후 접근
• Array.from을 사용하여 배열로 변환 후 접근
• forEach, map, filter 등 고차 함수 사용 가능

// [문법]

// 인덱스 사용
Array.form(해당form.elements[인덱스]

// forEach 함수 사용
Array.form(해당form.elements).forEach(...)

const form = document.querySelector('form');
const values = Array.from(form.elements)
  .filter(el => el.name && el.type !== "submit")
  .map(el => `${el.name}: ${el.value}`);
console.log(values);

예시

<form action="" class="form">
	<input type="text" value="ID">
	<input type="password" name="userpw">
	<button type="button">제출</button>
</form>

const form = document.querySelector('.form');
console.log(form.elements); // HTMLFormControlsCollection 객체
console.log(form.elements[0]); // ⇒ <input type="text" name="username">
console.log(form.elements['userpw']); // ⇒ <input type="password" name="userpw">
console.log(form.elements.username); // ⇒ <input type="text" name="username">

for (let i = 0; i < form.length; i++) {
  console.log(form.elements[i]);
}

console.log(Array.from(form.elements)[1]); // ⇒ <input type="password" name="userpw">

---

해당form.length

• form 안에 있는 요소 개수를 반환
• form.elements.length와 같음

// [문법]
해당form.length

---

해당form.name

• form의 name 속성값을 반환
• 브라우저에 따라 document.forms["네임명"] 으로 접근 가능

// [문법]
해당form.name

document.해당forms["네임명"]

console.log(form.name); // ⇒ myForm
console.log(document.forms['myForm']); // ⇒ <form name="myForm"> ...</form> 해당 폼태그 전체를 반환

// HTML

<form name="myForm">...</form>

---

해당form.method

• form의 HTTP 전송 방식: "get" 또는 "post" 값을 반환 또는 수정 가능

// [문법 - 값 반환]
해당form.method

// [문법 - 값 설정]
해당form.method = '설정값'

console.log(form.method); // ⇒ post

// HTML

<form method="post">...</form>

---

해당form.action

• form의 데이터를 전송할 서버 주소(URL) 설정/조회

// [문법 - 값 반환]
해당form.action

// [문법 - 값 설정]
해당form.action = '설정값'

---

해당form.target

• form의 전송 결과를 표시할 대상을 설정하는 속성

값	설명
_self	현재 탭 (기본값)
_blank	새 탭/창
_parent, _top	프레임/전체 윈도우 등 특수한 경우 사용

// [문법 - 값 반환]
해당form.target

// [문법 - 값 설정]
해당form.target = '속성값'

form.target = '_blank'; // 전송 결과를 새 탭에 표시

---

해당form.enctype

• form의 데이터 인코딩 방식 설정/조회
• 파일 전송 등에서 중요

값	설명
application/x-www-form-urlencoded	기본값 (URL에 데이터를 포함)
multipart/form-data	파일 전송 시 사용
text/plain	디버깅용 등 특수 목적

// [문법 - 값 반환]
해당form.enctype

// [문법 - 값 설정]
해당form.enctyp = '속성값'

form.enctype = 'multipart/form-data'; // 파일 업로드용

---

documents.forms

• 현재 문서에 있는 모든 <form>을 배열처럼 가져올 수 있는 HTMLCollection

console.log(document.forms.length); // 문서 내 form 개수
console.log(document.forms[0]);     // 첫 번째 form
console.log(document.forms["loginForm"]); // name="loginForm"인 form

---

<form 요소 메서드>

해당form.submit()

• 자바스크립트로 강제로 폼 전송
• 유효성 검사는 생략됨 (주의!)
• input required 무시됨
• HTML의 <button type="submit"> 클릭으로 전송되는 방식과는 달리,  JS로 직접 전송하는 방식.

// [문법]
해당form.submit()

---

해당form.reset()

• 폼의 모든 입력값을 초기 상태로 되돌림
• <form> 태그 안의 <input> 요소들이 원래 값으로 복원

// [문법]
해당form.reset()

---

해당form.checkValidity()

• 폼 안의 모든 컨트롤의 유효성을 검사하고 true/false를 반환
• 필수 입력 여부, 패턴, 타입 등 HTML 속성을 기반으로 판단
• 기본적인 유효성 검사들은 브라우저가 지원하기 때문에, 해당 스크립트를 타지 않아도 미리 유효성 검사가 가능하나, 조건 추가 검사, 에러 메시지 커스터마이지, 서버 통신 전 제어, 폼 데이터 수동 전송 등 더 많은 걸 제어하기 위해 사용됨

// [문법]
if (해당form.checkValidity()) {
  // 유효한 경우
} else {
  // 유효하지 않음
}

---

해당form.reportValidity()

• checkValidity()처럼 유효성 검사도 하면서, 유효하지 않다면 브라우저가 경고 메시지를 자동으로 보여
• 기본적인 유효성 검사들은 브라우저가 지원하기 때문에, 해당 스크립트를 타지 않아도 미리 유효성 검사가 가능하나, 조건 추가 검사, 에러 메시지 커스터마이지, 서버 통신 전 제어, 폼 데이터 수동 전송 등 더 많은 걸 제어하기 위해 사용됨
  

// [문법]
해당form.reportValidity(); // 메시지가 직접 표시됨

유효성 검사 활용 예

const form = document.forms['loginForm'];

form.addEventListener('submit', function (e) {
  e.preventDefault(); // 기본 제출 막기

  if (form.checkValidity()) {
    // 유효하면 전송 (주의: submit 호출은 유효성 검사를 생략하므로 직접 검사한 후 호출)
    form.submit();
  } else {
    // 유효하지 않으면 경고 표시
    form.reportValidity();
  }
});