폼태그
name="" 데이터 전송할 때, 변수명
<form><fieldset>...</fieldset></form>
textbox
<label for="userid">아이디</label>
<input type="text" id="userid">
<label>비밀번호</label>
<input type="password">
checkbox
<label>스포츠</label>
<input type="checkbox" value="sport">
<label>게임</label>
<input type="checkbox" value="cook">
radio
<label>UI/UX 디자이너</label>
<input type="radio" value="design" name="job">
<label>프런트엔드 개발자</label>
<input type="radio" value="front-end dev" name="job">
<label>백엔드 개발자</label>
<input type="radio" value="back-end dev" name="job">
파일/색상선택/날짜선택
<label>첨부파일</label>
<input type="file">
<label>색상 선택</label>
<input type="color">
<label>날짜</label>
<input type="date">
전송/취소
<label>전송</label>
<input type="submit">
<label>취소</label>
<input type="reset">
드롭다운
<select>
<option>HTML</option>
<option>CSS</option>
<option>JAVASCRIPT</option>
</select>
텍스트영역 (긴글)
<textarea></textarea>
폼
<form action="/" method="post">
<label>아이디</label><input type="text">
<label>비밀번호</label><input type="password">
<label>전송</label><input type="submit">
</form>
폼 데이터 가져오기
전통 방식으로 폼 데이터 가져오기 (checkbox)
const form = document.querySelector('form');
const colors = form.querySelectorAll('input[type=checkbox]:checked');
form.addEventListener('submit', e => {
e.preventDefault();
const colors = form.querySelectorAll('input[type=checkbox]:checked');
if (colors.length === 0) {
console.error('체크된 요소가 없습니다.');
return;
}
colors.forEach(data => {
console.log(data.value);
});
});
내장 함수로 폼 데이터 가져오기 (radio, checkbox)
// FormData 클래스를 활용한 효율적인 폼 요소값 가져오기
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
// form안의 모든 정보 가져오기
const formData = new FormData(form);
// 단일 요소는 get(name)
console.log(formData.get('gender'));
// 복수 요소는 getAll(name)
console.log(formData.getAll('myColor'));
});
e.preventDefault() (submit 기능을 정지한다.)
const form = document.querySelector('form');
form.addEventListener('submit', e => {
//이벤트문 연결시 파라미터를 통해 자동으로 이벤트 객체 전달됨 (e)
//자동 전달되는 이벤트 객체에 내장되어 있는 preventDefault()함수를 호출시 이벤트 기본 기능 막을 수 있음
//submit의 기본 이벤트 기능 : 폼 내용 서버에 전달
//아래 구문을 통해 인증전에 폼내용 서버 전달을 막기 가능
e.preventDefault();
const formData = new FormData(form);
console.log(formData.get('gender'));
console.log(formData.getAll('myColor'));
});
