form

<form id="submitForm" action="/form">
  <input id="name"/>
  <button type="submit"/>
</form>

• 폼태그는 input 등의 담긴 정보들을 제출 동작을 통해 어떤일을 벌일 것인가에 관여한다
• 폼태그로 감싸진 input 정보들을 폼태그의 정해진 액션 attribute를 동작해 전송하게 된다

문제점

<form id="submitForm" action="/form">
  <div>
    <span>여기에 입력해볼까요?</span>
  </div>
  <input id="name"/>
  <div>
    <span>잘입력됐을까요?</span>
  </div>
  <button type="submit"/>
  <div>
    <span>중간 광고 어쩌구</span>
  </div>
  <div>
    <span>우리는 어떤 일을 어쩌구</span>
  </div>
  <input id="age"/>
</form>

• 전송하고자 하는 input이 멀리 떨어져 있고 그 정보 또한 전송을 원할 경우 form태그를 멀리서 닫아야 한다
• 위와 같은 이유로 뜬금없는 장소에서 form 태그가 닫히게 되고 전체적으로 마크업이 지저분해진다

form태그의 아이디 활용하기

<form id="submitForm" action="/form">
  <div>
    <span>여기에 입력해볼까요?</span>
  </div>
  <input id="name"/>
  <div>
    <span>잘입력됐을까요?</span>
  </div>
  <button type="submit"/>
</form>
<div>
  <span>중간 광고 어쩌구</span>
</div>
<div>
  <span>우리는 어떤 일을 어쩌구</span>
</div>
<input id="age" form="submitForm"/>

• 하단에 input의 form attribute를 활용해 묶이고자 하는 폼의아이디 값을 넣어주면 그 아이디를 가진form의 액션이 일어날 때 해당하는 input의 정보도 같이 전송된다
• 이러한 점은 마크업을 갈끔하게 정리할 수 있다는 장점이 있다.
• 하지만 별도 장소에 있는 input이 유지보수 관점에서 이로울지는 저울질 해봐야 겠다.