본문 바로가기

Javascript/DOM과 HTML 제어

폼 요소(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(); //폼 전송



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


속성

사용 가능 값 

method 

GET, POST 사용 가능.

폼 데이터를 전송하는 전송 방식을 결정 

action 

경로및 폼 데이터를 수신할 페이지 

enctype 

text/plain : 인코딩 없이 텍스트 그대로 전송.

application/www-form-urlencoded : 기본값. 폼 데이터를 인코딩해서 전송.

multipart/form-data : 첨부 파일이 있을 경우 사용

target

_self : 현재 탭(창)으로 폼 데이터를 전송함.

_blank : 새창/탭을 띄워 폼 데이터를 전송함.

아이프레임명 : 아이프레임으로 폼 데이터를 전송함.

_parent: 부모 프레임으로 폼 데이터를 전송함.



반응형

닫기