[JavaScript] form 프로퍼티 & 메서드

form 요소 탐색하기

form은 document.forms의 구성원으로 이름이나 순서를 지정해 탐색할 수 있다.

document.forms[0] // 문서 내 첫 번째 폼
document.forms.[name속성] // 해당 name을 속성으로 가진 form

 

폼의 요소도 forms.elements로 탐색할 수 있다.

const form = document.forms[0] // 문서의 첫번째 폼 탐색
const input = form.elements.[요소name] // 해당 name 속성을 가진 요소 탐색

 

radio 버튼은 name이 같아야하기 때문에 여러 개를 제어해야하는 상황이 생긴다.

탐색할 요소가 여러 개인 경우 유사 배열로 반환하는 성격을 이용해 작성할 수 있다.

    <form>
      <input type="radio" name="choice" id="choice1">
      <input type="radio" name="choice" id="choice2">
      <input type="radio" name="choice" id="choice3">
    </form>

      const form = document.forms[0];
      const radio = form.elements.choice; // radio 요소들을 유사 배열로 반환

      console.log(radio[0].id); // choice1
      console.log(radio[1].id); // choice2
      console.log(radio[2].id); // choice3

 

---

 

해당 폼 내에 있는 요소들도 name 속성으로 탐색할 수 있다.

name=wrapper인 폼 요소의 자식 요소 탐색하기.

document.forms.wrapper.userId.placeholder = '아이디를 입력하세요'

// <document 생략 가능>
forms.wrapper.userId.placeholder
// <forms 생략 가능>
wrapper.userId.placeholder

수정 전 / 수정 후

 

---

 

 

폼 요소를 탐색해 없는 속성을 추가하거나 수정하는 것도 가능.

wrapper.userId.value = 'sciprt로 value 추가'

value 속성 추가

 

---

 

input에 입력된 value 값을 textContent로 출력하기

form 요소를 탐색하는 방법을 활용해 input의 텍스트필드에 입력되는 값을 p에 전달 후 출력.

단, button type="submit" 의 기본 성격을 제거해주지 않으면 전송 버튼을 누르자마자 페이지가 새로고침 된다.

 

---