겨미♡웹

HTML5의 반복 모델(repetition model) - from Web Form 2.0 본문

HTML

HTML5의 반복 모델(repetition model) - from Web Form 2.0

겨미겨미 2007. 8. 1. 23:52

"파일을 원하는 갯수만큼 올릴 수 있는 폼으로 구성해주세요!"

웹을 업으로 하는 사람이라면 이 말 싫어하는 사람 참 많을게다. 몇 개의 파일 입력 상자를 고정해놓는다면 모를까? 입력 상자의 갯수를 동적으로 해달라는 요구는 그 처리의 귀찮음에 혀를 내두르지 않는 사람이 드물것이다. 귀찮고 오류가 일어날 소지가 많은 부분이다 보니, 관련 자바스크립트 라이브러리 라든지 Flash를 이용한 경우 라든지 심지어 ActiveX를 사용하는 경우(너무 많아서;;)까지 관련 라이브러리나 기술이 많이 생기게 되었다. 요즘은 오히려 훌륭한 공개 라이브러리가 많아서 - AJAX로 Progress Bar까지 구현해주는 라이브러리도 있다. - 불편함이 없다고 얘기해도 무방한 정도다.

하지만 HTML5는 자바스크립트라든지 외부 기술(Flash, ActiveX 등)에 구애없는 - 접근성을 보장하는 - 다중 입력폼을 지원한다! 바로 반복 모델이 그것이다. 말 보다는 코드로! 다음 html 코드를 보자.

<!DOCTYPE html>
<html>
 <head>
  <title>Sample Order Form</title>
 </head>
 <body>
  <form>
   <table>
    <thead>
     <tr>
      <th>Product</th>
      <th>Quantity</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td><input type="text" name="row0.product" value=""></td>
      <td><input type="text" name="row0.quantity" value="1"></td>
     </tr>
     <tr>
      <td><input type="text" name="row1.product" value=""></td>
      <td><input type="text" name="row1.quantity" value="1"></td>
     </tr>
     <tr>
      <td><input type="text" name="row2.product" value=""></td>
      <td><input type="text" name="row2.quantity" value="1"></td>
     </tr>
    </tbody>
   </table>
   <p><button type="submit">Submit</button></p>
  </form>
 </body>
</html>

3개의 반복 입력 블럭을 가진 페이지이다. 예전 같으면 여기서 사용자가 원할 때 블럭을 더 보여주거나 하는 동작을 하려면 위에 언급한 것처럼 외부 기술이 없다면 입력 페이지를 매번 리로드하지 않으면 불가능 할 것이다. 말이 리로드지 다른 파라미터들을 생각해보면 외부 기술 없이는 힘들고 생각하기도 싫어져 버린다. 다음 코드는 HTML5에서 이것을 어떻게 구현하는지를 보여준다.

<!DOCTYPE html>
<html>
 <head>
  <title>Sample Order Form</title>
 </head>
 <body>
  <form>
   <table>
    <thead>
     <tr>
      <th>Product</th>
      <th>Quantity</th>
     </tr>
    </thead>
    <tbody>
     <tr id="order" repeat="template">
      <td><input type="text" name="row[order].product" value=""></td>
      <td><input type="text" name="row[order].quantity" value="1"></td>
      <td><button type="remove">Remove This Row</button></td>
      <td><button type="move-up">Move This Row Up</button></td>
      <td><button type="move-down">Move This Row Down</button></td>
     </tr>
    </tbody>
   </table>
   <p><button type="add" template="order">Add Row</button></p>
   <p><button type="submit">Submit</button></p>
  </form>
 </body>
</html>

repeat="template" 선언이 되어있는 block - 여기서는 tr 태그 - 이 사용자의 요청에 따라 늘어나고 줄어들게 된다. 어떻게 늘리고 어떻게 줄이느냐? 바로 button type="add"와 button type="remove"가 그것이다. add 버튼에 반복 블럭의 id를 template 속성에 선언해주면 반복 블럭과 add 버튼이 연결되어 add 버튼이 눌릴 때 반복 블럭이 하나 생기게 된다. 여기서 새로 생긴 블럭에서 product에 해당하는 개체의 이름은 row[order].product를 따라 - 여기서 [order]가 블럭의 인덱스에 해당하는 숫자가 된다. - row1.product라는 이름을 갖게 된다(시작값이 0임). move-up, move-down 타입은 블럭의 표시 순서를 바꿔준다. 정말 꼭 필요하던 기능이라는 생각이 드는 예제인 것 같다!

반복의 시작값을 지정하는 repeat-start 속성, 최소·최대 반복값을 지정하는 repeat-min과 repeat-max반복 모델은 다중 입력에 필요한 기능을 충분하게 지원하도록 설계되었다.

HTML5의 반복 모델, 자바스크립트나 Flash 등의 외부 기술을 사용할 수 있는 사용자의 편의를 위한 기능이 충분히 덧붙여질 수 있겠지만, 누구나에게 접근성을 보장하는 다중 입력 폼을 설계가 참 쉽고 즐거운 작업이 될 듯 하다.

Comments