폼 요소(Element) 선택과 제어

폼과 폼 요소 기초

폼과 폼 요소는 HTML 요소중에서 사용자와 인터렉션을 하는 유일한 방법입니다.

때문에 사용자의 입력이나 선택을 받는데 필요한 다양한 속성들이 존재합니다.

자바스크립트는 이런 폼 요소와 속성들을 완전히 제어할 수 있는 방법을 제공합니다.

폼과 폼 요소들은 기본적으로 이름(name) 속성을 가지고 있습니다. 이름을 통해 개별 폼 및 폼 요소에 접근할 수 있으며, 요소의 속성과 값 또한 접근할 수 있게 됩니다.

폼과 폼 요소에는 HTML 페이지 안에서 고유한 ID 값 또한 사용할 수 있습니다.

ID 값을 사용하면 폼 요소에 빠르게 접근할 수 있지만, ID 를 너무 남발하게 되면, 폼 요소를 식별하는데 오히려 방해가 될 수 있습니다.

ID 값은 선택적으로 사용하는 것이 좋으며, ID 값은 충분히 식별 가능한 이름으로 정해야 합니다.

폼 요소의 이름과 ID는 대소문자를 구분합니다.

자바스크립트 네이밍 규칙에 따라 단어를 조합할 때는 2번째 단어부터는 시작 문자를 대문자로 사용해 정하는 것을 추천합니다.

HTML 페이지 안에 폼이 여러개인 경우 폼 이름 외에 폼 인덱스로 폼을 순서대로 접근할 수 있습니다.

document.forms[1] 은 HTML 페이지 안의 2번째 폼이라는 뜻입니다.

물론 2번째 폼이 있을 때만 접근할 수 있습니다.

전체 폼의 갯순은 document.forms.length 로 접근할 수 있습니다.

따라서 반복문으로 전체 폼을 순환하면서 폼이나 폼 요소에 반복되는 처리를 할 수도 있습니다.

document.forms는 배열 이며, HTML 페이지 안의 각 폼에 대한 참조를 담고 있습니다.

폼에 들어있는 폼 요소들도 폼과 동일하게 배열 참조를 가지고 있습니다.

예를 들어 아래 구문은 문서의 첫번째 폼에 있는 첫번째 요소라는 뜻입니다.

document.forms[0].elements[0];

실제로는 요소까지는 이런 방법으로 접근해서 값을 얻거나 하지는 않습니다.

document.forms.myform.elements.ordername;

과 같은 식으로 요소 이름을 속성으로 해서 접근을 합니다.

폼 요소에는 개별 이름이나 ID 가 있고, 이름 기반으로 값이나 속성에 접근을 하게 됩니다.

폼 요소에 접근하는 방법은 여러가지가 있습니다.

document.form1.getElementById('ID값');document.form1.getElementByName('요소이름');document.form1.getElementByClassName('클래스명');document.form1.querySelector('쿼리선택자');document.form1.querySelectorAll('쿼리선택자');

모두 요소(Element) 를 반환합니다.

getElementByClassName(), querySelectorAll() 두 메서드는 여러개의 요소 선택이 가능하며, HTML 엘리먼트 컬렉션을 반환합니다.

예를 들어 아래와 같은 폼으로 폼 요소의 선택과 제어를 해보겠습니다.

<form name="myform" id="myform" method="post" action="order">  <input type="hidden" name="key" value=""/>  <input type="text" name="name" value="">  <input type="tel" name="tel" size="13" maxlength="13" value="">  <fieldset name="options">    <legend>상품옵션</legend>    <input type="radio" name="size" value="대과"/>    <input type="radio" name="size" value="중과" checked />    <input type="checkbox" name="giftpack" value="선물상자"/>    <input type="checkbox" name="giftpack" value="보자기포장"/>    <select name="weight">      <option value="1" selected>1Kg</option>      <option value="5">5Kg</option>      <option value="10">10Kg</option>    </select>  </fieldset>  <fieldset name="buttons">    <button type="button" name="order">주문</button>    <button type="button" name="wishlist">찜해놓기</button>  </fieldset></form>

폼 요소 선택과 요소 값 얻기

폼 요소 선택하는 방법은 다음처럼 여러가지 방법으로 가능합니다.

const myform = document.forms.myform;
myform.elements.name.value = '주문자명';
console.log(document.forms[0].elements[1].value);console.log(myform.elements.name.value);let ordername = myform.querySelector('input[name="name"]');console.log(ordername.value);

위의 폼 예제에서 요소들을 선택해 값을 얻는 방법을 알아보겠습니다.

const myform = document.forms.myform;
myform.elements.name.value = '주문자명';console.log(myform.elements.name.value);
//라디오박스myform.elements.size[0].checked = true;console.log(myform.elements.size.value);
//체크박스myform.elements.giftpack[1].checked = true;console.log(myform.elements.giftpack.length);let giftpack = []; myform.elements.giftpack.forEach(function(check){  if(check.checked){giftpack.push(check.value);}});console.log(giftpack);
//이벤트 델리게이션으로 버튼 이벤트 처리let buttons = myform.buttons;buttons.addEventListener('click', function(e){  switch(e.target.name){    case 'order':      console.log('주문폼 주문 저장!');      //주문폼 전송 처리      break;    case 'wishlist':      console.log('찜해놓기에 저장!');      //찜해놓기 저장 처리      break;  }});

폼 속성 제어

폼 속성은 폼 이름이나 값을 얻는 것과 같은 방법을 사용합니다.

이름(Name)과 값(Value) 또한 하나의 속성이기 때문에 기본적인 폼 속성에 접근하는 방법은 이미 알고 있습니다.

라디오, 체크박스, 콤보리스트의 특징적인 속성들에 접근하는 방법을 알아보겠습니다.

const myform = document.forms.myform;
console.log(document.forms[0].size.length);console.log(myform.elements.giftpack[0].checked);
let weight = myform.querySelector('select[name="weight"]');console.log(weight[0].label);console.log(weight.selectedIndex);

폼 전송

폼 전송은 버튼 타입을 "submit" 으로한 버튼을 클릭하거나, 엘리먼트에 이벤트 리스너를 등록해 클릭 콜백 함수로 폼을 전송하는 등 다양한 방법을 사용할 수 있습니다.

폼 객체를 얻은 후 "submit()" 메서드를 호출하면 폼은 폼 속성에서 지정해놓은 페이지로 전송됩니다.

폼 태그에는 폼 전송에 필요한 여러가지 속성들이 있습니다. 이 속성들 또한 자바스크립트로 설정을 할 수 있습니다.

const myform = document.forms.myform;
form.action = "save.html"; // 폼을 전송할 페이지form.enctype = "multipart/form-data"; // 폼의 인코딩 타입 지정. 첨부파일이 있을 경우 등의 바이너리 데이터에 대한 대응 속성form.onsubmit = "return checkForm()"; //폼 전송전 폼 체크와 같은 전처리 함수를 호출한 후 폼 전송form.submit(); //폼 전송

폼 태그에 사용 가능한 속성들은 다음과 같습니다.