겨미♡웹

HTML5 form attribute (from Web Form 2.0) 본문

HTML

HTML5 form attribute (from Web Form 2.0)

겨미겨미 2007. 7. 26. 14:46

요즘 HTML5에 흥미가 생겨서 보고 있는데, 그 중에 Web Form 2.0에서 재미있는 내용들이 많이 있어서 정리해보고자 합니다. 앞으로 간간히 재미있는 내용을 정리해놓을 생각입니다. 많이 봐주세요! ^^

HTML5에 대해 더 알고 싶으면 channy님의 포스팅이나 WHATWG HTML5 spec을 방문해보세요!

오늘 소개 할 내용은 form attribute 입니다.

폼을 사용하면서 불가피하게 자바스크립트를 쓸 수 밖에 없는 경우가 꽤 있습니다. 예를 들어, 서브밋 버튼을 여러개 두어 action을 여러군데로 하는 경우라든지, 받은 편지함을 HTML화 할 때 여러 편지를 선택하여 삭제 혹은 이동하는 경우라든지 하는 경우가 자바스크립트나 DOM 스크립트 없이 HTML만으로는 폼을 완전히 구성할 수 없는데요. HTML5에서 선보일 form attribute가 이 불편함을 해소해 줄 것 같습니다.

다음의 예는 HTML4.x / XHTML 1.x 에서 서브밋 버튼을 여러개로 하고 싶을 때 만드는 HTML 예제입니다.

<form action="search.cgi">
    <input type="text" name="q">
    <input type="submit" value="이 사이트에서 검색">
    <input type="submit" value="구글에서 검색" onclick="this.form.action='google.cgi';">
    <input type="submit" value="야후에서 검색" onclick="this.form.action='yahoo.cgi';">
</form>

예제는 자바스크립트가 비활성화 되어 있다면 이 사이트에서 검색의 역할 밖에 하지 못하는 코드가 되어 버렸습니다. 다음은 HTML5 예제입니다.

<form action="search.cgi">
    <input type="text" name="q" form="fg fy">
    <input type="submit" value="이 사이트에서 검색">
</form>
<form id="fg" action="google.cgi"><input type="submit" value="구글에서 검색"></form>
<form id="fy" action="yahoo.cgi"><input type="submit" value="야후에서 검색"></form>

여기서 form="fg fy" 의 의미는 q라는 text 박스를 fg와 fy라는 ID를 가진 form에서도 사용하겠다는 뜻입니다. 따라서 아래 구글과 야후 검색 폼이 서브밋 될 때 q라는 text box의 값도 같이 전송되게 됩니다. 아래와 같은 코드가 되면 한 폼을 여러 서브밋 버튼이 공유할 수도 있습니다. 또, 서브밋 버튼에 action attribute를 통해 한 폼을 여러 action으로 서브밋할 수가 있습니다.

<form action="search.cgi">
    <input type="text" name="q">
    <input type="submit" value="이 사이트에서 검색">
    <input type="submit" value="구글에서 검색" action="google.cgi">
    <input type="submit" value="야후에서 검색" action="yahoo.cgi">
</form>

아래 예제는 다들 구현에 많이 고생을 하는 table의 각 행(tr)마다 폼 넣기 예제입니다.

<table>
 <thead>
  <tr>
   <th>번호</th>
   <th>이름</th>
   <th>기능</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>
    <form id="edit1" action="/edit" method="post">
     <input type="hidden" name="id" value="1"/>
     <input type="text" name="number" value="199901"/>
    </form>
   </td>
   <td>
    <input form="edit1" type="text" name="value"/>
   </td>
   <td>
    <input form="edit1" type="submit" name="수정"/>
   </td>
  </tr>
  <tr>
   <td>
    <form id="edit2" action="/edit" method="post">
     <input type="hidden" name="id" value="2"/>
     <input type="text" name="name" value="199902"/>
    </form>
   </td>
   <td>
    <input form="edit2" type="text" name="value"/>
   </td>
   <td>
    <input form="edit2" type="submit" name="수정"/>
   </td>
  </tr>
 </tbody>
</table>

text 박스와 submit 버튼에 각각 form attribute를 선언하므로 표준을 어기지 않고 form을 사용할 수 있게 되었습니다.

attribute를 통해 컨트롤과 폼을 위치에 구애받지 않고 묶어줄 수 있는 form attribute의 예제를 두가지 소개 해 보았습니다. form 태그 안에 묶여 있는 컨트롤의 경우에는 form attribute가 작동하지 않는다고 하니 이로 인해 소스코드의 가독성이 떨어지거나 구조가 심하게 꼬이지는 않을 것 같습니다. 폼의 응용을 위해 불가피하게 삽입되었던 찝찝한 자바스크립트가 빨리 필요없게 되었으면 좋겠습니다.

Comments