form 태그 선택하기
forms 속성 사용하기
document 객체의 forms 속성은 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아서 반환
<body>
<form>
<input type="text">
</form>
<form>
<input type="text">
</form>
<form>
<input type="text">
</form>
</body>
document.forms[ 1 ]처럼 HTMLCollection은 유사배열이라서 인덱스를 사용해 요소 노드에 접근 가능
-> forms 태그의 위치가 바뀌면 잘못 참조하게 되어 얘기치 않은 오류 발생
name 속성 사용하기
<body>
<form name="frm1">
<input type="text">
</form>
<form name="frm2">
<input type="text">
</form>
<form name="frm3">
<input type="text">
</form>
</body>위와 같이 name 속성 추가 시 name 속성값으로 form 요소 노드에 접근 가능
document.frm1;
document.frm2;
document.frm3;위와 같이 접근 시 form 태그의 순서가 바뀌어도 에러 X
폼 요소 선택하기
input 태그를 비롯해 select 태그, button 태그 등이 있음
-> 이러한 폼 요소를 선택할 때는 elements 속성이나 name 속성 사용
<body>
<form name="frm1">
<label for="uname">이름 </label>
<input type="text" id="uname" name="uname">
<label for = "age"> 나이 </label>
<input type="text" id="age" name="age">
<label for ="gender"> 성별 </label>
<select id="gender" name="gender">
<option value="male">male</option>
<option value="female">female</option>
</select>
<button type="submit">전송 </button>
</form>
</body>위 코드에 name 속성들은 서버에서 입력 필드를 식별할 때 사용하는 이름
HTML 폼을 전송할 때, 입력 필드의 값은 "name=value" 형태의 형식으로 전송
-> 예를 들어 이름을 입력한 입력 필드의 경우, "uname=John" 과 같은 형식으로 전송됨. 서버에서는 이 값을 수신하고, "uname"이라는 이름으로 식별
id 속성은 HTML 문서 내에서 요소를 식별하기 위해 사용하는 속성
elements 속성은 form 요소 노드의 하위 노드 중 폼 요소 노드만 반환하는 속성
-> elements 속성은 HTMLFormControlsCollection 객체에 여러개의 노드를 담아 반환
document.frm1.elements[0]; // 0번 인덱스 노드
document.frm1.elements['uname']; // form 요소 노드의 하위 노드 중 name 속성 값이 uname인 노드
elements 속성을 생략하고 name 속성값으로 바로 접근해도됨
폼 요소의 입력값 다루기
폼 요소는 사용자에게 값을 입력받아 이를 서버에 전달
-> 이때 백엔드 영역에서 전달 받은 값을 처리하는데, 서버에 전달하기까지 폼 요소에 입력된 값이 유효한지는 검증할 수 있어야 함
한 줄 입력 요소 다루기
input 태그의 type 속성값을 text,password,number,url,search,email 등으로 지정했을 때 표시되는 폼 요소
ex)
<form name="frm">
<input type="text" name="id">
<input type="password" name="pw">
</form>document.frm.id.value;
document.frm.pw.value;
value 속성을 통해 웹 브라우저에 입력한 값을 그대로 가져올 수 있음
<form name="frm">
<input type="text" name="id">
<input type="passwrod" name="pw">
</form>
<script>
document.frm.id.value = 'jscoding';
document.frm.pw.value = 'aaaccc';
</script>
여러 줄 입력 요소 다루기
textarea 태그를 사용하면 표시되는 폼 요소
<form name="frm">
<textarea name="desc"></textarea>
</form>
<form name="frm">
<textarea name="desc"></textarea>
</form>
<script>
document.frm.desc.value = "setting!";
</script>
체크 박스 다루기
체크박스 또한 value 속성으로 값을 가져올 수 있지만, 한줄 입력 요소와 다르게 체크 박스에 체크 표시가 있는 것만 가져와야 하는 경우가 많음
<form>
<label><input type="checkbox" value="apple">사과</label>
<label><input type="checkbox" value="banana">바나나</label>
<label><input type="checkbox" value="orange">오렌지</label>
<label><input type="checkbox" value="melon">멜론</label>
</form>체크박스에 체크 표시가 있는지는 checked 속성으로 확인 가능
-> 반복문을 통해 체크박스 노드에 하나씩 접근한 뒤 checked 속성이 있는지 확인, 만약 있으면 value 속성으로 값을 가져오면 됨
체크박스를 모두 체크한 상태로 바꾸고 싶은 경우
<script>
const checkBoxEls = document.querySelectAll("[type = 'checkbox']");
checkBoxEls.forEach((e1) =>{
e1.checked=true;
}
</script>라디오 버튼 다루기
라디오 버튼은 여러 개의 항목 중 하나만 선택하게 할 때 사용하는 폼 요소
<form>
<label><input type="radio" name="fruits" value="apple">사과</label>
<label><input type="radio" name="fruits" value="banana">바나나</label>
<label><input type="radio" name="fruits" value="orange">오렌지</label>
<label><input type="radio" name="fruits" value="melon">멜론</label>
</form>
melon을 체크하게 하고 싶은 경우
콤보 박스 다루기
select 태그로 만듬, 여러 항목 중 하나 선택하는 폼 요소
selected 속성으로 선택 항목 확인 가능
<form>
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="orange">오렌지</option>
<option value="melon">멜론</option>
</select>
</form>오렌지를 선택한 경우
combo.forEach( (e1) => {
if(e1.selected == true) console.log(e1.value);
});파일 업로드 요소 다루기
type 속성값을 file로 할시, 파일 업로드시 주로 사용
<form name="frm">
<input type="file" name="upload">
</form>
files 속성으로 반환되는 것은 FileList 객체
const files = document.frm.upload.files;
files[0].name; // 파일 이름
files[0].size; // 파일 크기
files[0].type; // 파일 타입
files[0].lastModifiedDate; // 파일 마지막 수정일폼 요소 관련 기타 메서드
submit() : 폼 요소의 값을 전송 함
focus() : 폼 요소에 포커스(커서)를 이동함
