Form 객체

const $orderForm = document.forms.order;

const $userInfo = $orderForm.elements.userInfo;

const $productInfo = $orderForm.elements.productInfo;

console.log($orderForm);

console.log($userInfo);

console.log($productInfo);

document.getElementById('btn1')

.addEventListener('click', e=>{

  const { name, tel } = $userInfo.elements;

  console.log($userInfo.elements);

  console.log(`${name.value}사용자 ${tel.value}로 주문합니다.`);

});

$orderForm.addEventListener('submit',e=>{

  e.preventDefault();

  const {productName, color} = $productInfo.elements;

  console.log(`상품명 : ${productName.value}\n색상:${color.value}`);

  $orderForm.method = 'GET';

  $orderForm.submit();

});

Form은 자바스크립트에서 워낙 중요하고 자주 쓰이니 따로 저렇게 document.forms로 조회할 수 있음.

document.forms.폼네임

<form name="order">

 

$폼및폼요소.elements

하면 input, textarea, select 등 폼요소의 자손들이 나옴.

 

$태그.elements.자손이름

해서 딱 그 자손을 찝을 수도 있음.

저거 elements 찍어보면 0,1 해서 form관련 요소의 자손들이 인덱스로 있음.