[Web] form태그에서 아이디 활용
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이 유지보수 관점에서 이로울지는 저울질 해봐야 겠다.
Author And Source
이 문제에 관하여([Web] form태그에서 아이디 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@peterpictor/Web-form태그에서-아이디-활용
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<form id="submitForm" action="/form">
<input id="name"/>
<button type="submit"/>
</form>
<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>
<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"/>
Author And Source
이 문제에 관하여([Web] form태그에서 아이디 활용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peterpictor/Web-form태그에서-아이디-활용저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)