[Javascript] 폼 프로퍼티와 메서드

폼과 요소 탐색하기 

✔️ document.forms 로 접근할 수 있는 기명 컬렉션이다.

document.forms.my //이름이 'my'인 폼
document.forms[0] //문서 내의 첫 번째 폼

✔️ 폼을 조작하는데 쓰이는 요소들은 모두 form.elements 로 접근할 수 있다.

<form>
    <input type="radio" name="age" value="10">
    <input type="radio" name="age" value="20">
</form>

<script>
let form = document.forms[0]; 

let ageElems = form.elements.age;

console.log(ageElems[0]); //[object HTMLInputElement]

</script>

 

element.form으로 역참조 하기

✔️ element.form으로 역으로 폼에 접근돈 가능하다.

<form id="form">
    <input type="text" name="login">
</form>

<script>
	let login = form.login;
    
    console.log(login.form); //HTMLFormElement
</script>

 

폼 요소

✔️ input 과 textarea

✔️ select 와 option

• select.options : <option> 하위 요소를 담고 있음
• select.value : 현재 선택된 <option>값
• select.selectedIndex : 현새 선택된 <option>의 번호

//select 기본 값 설정하기

<select id="select">
    <option value="apple">Apple</option>
    <option value="pear">Pear</option>
    <option value="banana">Banana</option>
</select>

<script>
//첫번째 방법
select.options[2].selected = true;

//두번째
select.selectIndex = 2;

//세번째
select.value = 'banana';

</sciprt>

 

 

요약

• 폼을 탐색할때는 document.forms로 접근할 수 있다.
• 폼 요소는 form.elements로 접근할 수 있다.
• 각 요소의 값 접근
  • input.value
  • textarea.value
  • select.value
  • input.checked(체크박스, 라디오 버튼)

 

Reference

• https://ko.javascript.info/form-elements