웹 디자인_HTML/Xhtml_웹 페이지 제작을 위한 5가지 간단한 XHTML 웹 양식

Web Design 5의 간단한 XHTML 웹 양식.                   ​ 기술 1: 라벨 샌드위치 입력 상자, 선택 상자 및 텍스트 상자를 레이블 요소에 포함하고 모두 블록 수준 요소로 설정합니다. 라디오 버튼과 체크박스 표시 모드를 인라인으로 설정하여 같은 줄에 표시되도록 합니다. 라벨을 선호한다면
​                   ​ ​ ​ 웹 디자인의 5가지 간단한 XHTML 웹 양식.                   ​ 기법 1: 라벨 샌드위치
모든 입력 상자, 선택 상자 및 텍스트 상자를 라벨 요소에 포함시키고 모두 블록 수준 요소로 설정합니다. 라디오 버튼과 체크박스 표시 모드를 인라인으로 설정하여 같은 줄에 표시되도록 합니다. 레이블과 라디오 버튼/다중 선택 상자가 다른 줄에 표시되도록 하려면 레이블에 포함하지 않도록 선택하거나 하드 줄 바꿈을 사용할 수 있습니다.
각 시나리오는 아래에 설명되어 있습니다.

이것들이 유행하는 것처럼 보일 수도 있지만 실제로 W3C는 암시적으로 그들의 라벨 예시를 보여주었습니다.
주요 이점: 단순
코드:
label, input, select, textarea {display: block;} 라벨 {margin-bottom: 10px;} 입력[type="radio"], 입력[type="checkbox"] {디스플레이: 인라인;} <양식>

문의 양식

이름 이메일 선택 항목(라디오) — 래핑된 라벨 선택 항목(확인란) — 줄바꿈되지 않은 라벨, 여백 재설정

선택 항목(체크박스) — 줄 바꿈 질문 옵션 1옵션 2 ;옵션 3 메시지
실행 결과:
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin- Bottom: 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
기술 2: 게으른 사람
많은 개발자가 이것을 채택합니다. 정통적이지는 않지만 빠르고 쉬운 방법(개행 문자로 태그를 분리하는 것)이 사용됩니다. 작동하지만 구현하는 데 CSS가 필요하지 않기 때문에 CSS 기능에 해롭습니다.
주요 장점: 빠름
코드:
<양식> <필드세트>

문의 양식

이름 이메일 선택사항(라디오) 선택 1 선택 2 선택 3 선택사항(체크박스) <입력 이름="Choice3" type="checkbox" /> 선택 1 <입력 이름="Choice3" type="checkbox" /> 선택 2 <입력 이름="Choice3" type="checkbox" /> 선택 3 질문 옵션 1 옵션 2 옵션 3 메시지
运行结果：                                                #p#
                       网页设计之5中简单的XHTML网页表单.             技术3：语义先生
web 标准的信条之一就是考虑数据类型 and与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就不常贴切。
主要好处： 结构化
代码：
ol { 목록 스타일: 없음; 왼쪽 패딩: 0; } <양식> <필드세트>

문의 양식

<올>

이름

이메일

선택사항(라디오) 선택 1 선택 2 선택 3

선택사항(체크박스) <입력 이름="Choice3" type="checkbox" /> 선택 1 <입력 이름="Choice3" type="checkbox" /> 선택 2 <입력 이름="Choice3" type="checkbox" /> 선택 3

질문 옵션 1 옵션 2 옵션 3

메시지

运行结果：
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4：分而治之
가로 형태를 사용하는 경우 어떤 형태가 필요합니까? 많은 상황(클라이언트)에는 수평 형태가 필요합니다. 우리는 오랜 친구인 p를 의지하여 양식을 열로 나눌 수 있습니다. 라벨 샌드위치 방법을 사용하면 쉽게 이를 달성할 수 있습니다.
주요 장점: 공간 활용
코드:
label, input, select, textarea {display: block;} 라벨 {margin-bottom: 10px;} 입력[type="radio"], 입력[type="checkbox"] {디스플레이: 인라인;} .form-열 { 너비: 150px; 높이: 250px; 왼쪽 패딩: 20px; 테두리 왼쪽: 1px 단색 #ccc; 플로트: 왼쪽; } <양식>

문의 양식

이름 <="이메일" 라벨> 이메일 선택사항(라디오) 선택 3

선택사항(라디오) 선택사항(체크박스) 질문 옵션 1옵션 2 ;옵션 3

실행 결과:
#Example4 label, #Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {margin- 하단: 10px;}
#Example4 입력[type="radio"], #Example4 입력[type="checkbox"] {display: inline;}
#Example4 .form-column {
너비: 150px;
높이: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
기술 5: 예전과 같다 학자 게으른 사람
CSS를 엉망으로 만들고 싶지 않고, 서두르고, 브라우저 테스트를 할 계획이 없다면, 새로운 직업을 찾아야 합니다. 농담이에요. 이건 당신을 위한 거예요.
주요 이점: 직관적
코드:
<양식> <필드세트>

문의 양식

<테이블 테두리="0"> <본문> 이름 이메일 선택사항(라디오) 선택 1 선택 2 선택 3 선택사항(체크박스) <입력 이름="Choice3" type="checkbox" /> 선택 1 <입력 이름="Choice3" type="checkbox" /> 선택 2 <입력 이름="Choice3" type="checkbox" /> 선택 3 질문 옵션 1 옵션 2 옵션 3 메시지
运行结果：