eYou.com에 들어간 후 즉시 이메일 인터페이스의 새 버전을 XHTML+CSS로 변환해야 했습니다. 다행히 아직 기본 기술이 충분히 탄탄해서 질서정연하게 작업을 수행했습니다. 물론, 새로운 문제에 직면하게 됩니다. 예를 들어, 일반적으로 웹 페이지를 만들 때 프로그램에 대한 경험이 없기 때문에 양식을 거의 사용하지 않습니다. 다행스럽게도 세상에는 여전히 Google이 있어 새로운 도전에 쉽게 대처할 수 있습니다. 몇 가지 경험을 적어서 모든 사람과 공유하세요.
접근성 고려 사항에 따라 양식을 작성하는 표준 방법은 사용자가 양식 필드의 요약을 이해할 수 있도록 <form> 및 </form>에 필드 세트 및 범례(설명)를 포함해야 합니다. 간단한 구조는 다음과 같습니다.
| 인용된 내용은 다음과 같습니다. <양식> <필드셋> <전설></전설> ... </fieldset> </form> |
어떤 경우에는 필드 세트와 범례가 디자인의 미학에 영향을 주지 않도록 할 수 있습니다. CSS에서 필드 세트의 테두리를 0으로 설정하고 범례 표시를 없음으로 설정하기만 하면 됩니다.
대부분의 경우 양식의 레이아웃은 왼쪽에 레이블이 있고 오른쪽에 입력 상자(입력 유형="텍스트"...)가 있는 두 개의 열로 나뉩니다. 이렇게 단순한 2열 레이아웃에서는 테이블을 사용하지 않는 것이 좋습니다. http://stylephreak.frogrun.com/uploads/source/cssform.php 및 http://www.aplus.co.yu/css/forms/?css=1을 참조하세요(확실히 중요한 두 가지 참조 자료가 있지만 이미 알고 계시지 않습니다. 더 이상 읽을 필요 없음) 웹 표준에 대한 일반적인 솔루션은 레이블 주위에 div를 추가하고 type="text"...를 입력하고 div 표시를 차단으로 설정하는 것임을 알았습니다. 레이블을 float: left;로 설정하면(div가 display: block;으로 설정된 이유이기도 함) 레이블을 입력 상자와 같은 줄에 배치할 수 있습니다. 레이블을 정렬하는 간단한 방법은 레이블의 너비를 고정한 다음 text-align을 사용하여 필요에 따라 왼쪽이나 오른쪽으로 정렬하는 것입니다. 너비 설정에 대한 팁은 힘들게 px를 테스트할 필요 없이 em 단위를 사용하여 태그의 최대 단어 수를 기준으로 너비를 설정하는 것입니다.
설명을 더 쉽게 이해할 수 있도록 몇 가지 코드를 작성하겠습니다.
| 인용된 내용은 다음과 같습니다. XHTML: (일부) <양식> body {/*양식과는 무관하며, 페이지 표시 효과를 설정합니다*/ |