양식으로 모프/복잡한 열을 다루는 표준 및 모범 사례

Question

내부에서 양식이있는 여러 및 복잡한 열을 다루는 데있어 모범 사례 또는 접근 방식이 무엇인지 알고 싶습니다.

다음은 내가 다루고있는 양식의 예입니다.

이를 위해 HTML 마크 업을 올바르게 작성하는 방법은 무엇입니까? 모든 열마다 모든 형태의 요소를 'div'로 래핑하면 많은 'divs'와 스타일이 필요합니다. 그리고 반복되지 않는 모든 열의 너비.

그래서 내가 한 것은 모든 형태의 요소를 테이블에 넣는 것입니다. 그리고 나는 그것이 표준적인 방법이 아니라고 생각합니다.

내 신발에 있다면

비 반복 너비가있는 열을 어떻게 처리 하시겠습니까?

Answer 1

복잡한 형태에는 표준이 없지만이 문제에 접근하는 완벽한 방법을 파악했다고 주장하는 블로그 게시물이 많이 있습니다. 그들 대부분은 잘 생각되지만 궁극적으로 당신은 가장 편안한 것을 선택해야합니다. 그래도 몇 가지 제안이 있습니다.

• 주소 양식의 미국 우편 서비스 변경을 확인하십시오. 놀랍게도 잘 했어요

• 당신이 가지고 있다면 많이 960.gs, blueprint.css 또는 yui 그리드 (Shudder)와 같은 그리드 시스템을 사용하는 양식을 구현하는 쉬운 방법입니다. 하지만 그리드 시스템은 그것이 당신이 사용할 유일한 곳이라면 분명히 부풀어 오른 것으로 간주됩니다.

  • Google에서 "Tableless Forms"를 검색하십시오. 여러 가지 구현이 많이 표시됩니다. 좋아하는 것을 선택하십시오.

Answer 2

아마도 각 양식 요소를 목록 항목에 정렬되지 않은 목록 내에 넣을 것입니다 (의미 적으로, 채워야 할 입력 요소 목록이라고 생각합니다.)

그런 다음 포지셔닝과 너비 등을 위해 클래스를 추가 할 것입니다. - 콜링 된 것들에게 너비가 주어져서 왼쪽으로 떠야합니다 ...

그래서:

<ul>
   <li class="iName"><label for="name">Full name:</label><input name="name"/></li>
   <li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
   etc etc...
</ul>

나는 이것이 의미 적으로 정확하고 가장 접근하기 쉬운 방법 일 것이라고 믿는다.