웹 표준화는 점점 더 많은 관심과 관심을 받고 있습니다. 웹 표준을 준수하는 웹 페이지를 만들 때 종종 양식 문제에 직면하게 됩니다. 오늘의 기사에서는 몇 가지 양식 의미 구조를 소개합니다. 모든 사람의 CSS 레이아웃에 도움이 되기를 바랍니다.
1. fieldset 및 legend 태그 사용
예를 들어 등록 양식에서는 등록 정보를 기본 정보(일반적으로 필수)와 세부 정보(일반적으로 선택 사항)로 그룹화할 수 있습니다. 그것? 양식에 다음 두 태그를 추가하는 것을 고려할 수 있습니다.
fieldset: 그룹 양식에는 여러 필드 세트가 있을 수 있습니다.
범례: 각 그룹의 내용을 설명합니다.
| 인용된 내용은 다음과 같습니다. <form id="demoform" class="democss" action=""> <필드셋> <legend>기본 레지스터</legend> <p>이름: <input type="text" name="fname" value="" /></p> ... </fieldset> <필드셋> <legend>상세등록</legend> <p>관심사: <input type="text" name="interest" value="" /></p> ... </fieldset> ... </form> |
필드 세트는 기본적으로 테두리가 있으며 일반적으로 범례는 기본적으로 왼쪽 상단에 표시됩니다. 그러나 어떤 경우에는 필드 세트 및 범례의 기본 스타일이나 기본 레이아웃이 디자인의 미학에 영향을 미치도록 하고 싶지 않을 수도 있습니다.
해결책: CSS에서 필드 세트의 테두리를 0으로 설정하고 범례 표시를 없음으로 설정하십시오.
2. 라벨 태그 사용
양식의 텍스트 라벨에 라벨 라벨을 지정하고 for 속성을 사용하여 이를 양식 구성 요소와 연결합니다. 그 결과 텍스트 라벨을 클릭하면 해당 양식 구성 요소에 커서가 표시됩니다.
| 인용된 내용은 다음과 같습니다. <form id="demoform" class="democss" action=""> <필드셋> <legend>기본 레지스터</legend> <p> <label for="fname">이름:</label> <input type="text" id="fname" name="fname" value="" /> </p> ... </fieldset> <필드셋> <legend>상세등록</legend> <p> <label for="interest">관심사:</label> <input type="text" id="interest" name="interest" value="" /> </p> ... </fieldset> ... </form> |
위의 방법 외에도 label을 사용하여 다음과 같이 전체 양식 구성 요소와 텍스트 레이블을 중첩할 수 있습니다.
| 인용된 내용은 다음과 같습니다. <레이블:="fname"> 이름: <input type="text" id="fname" name="fname" value="" /> </label> |
사양에 따르면 텍스트는 인접한 양식 구성 요소와 자동으로 연결되지만 불행하게도 현재 주류 브라우저 IE6은 이 기능을 지원하지 않습니다.
3. accesskey 및 tabindex 속성을 사용하세요.
웹사이트는 더 많은 사용 상황을 고려해야 합니다. 예를 들어 커서 장치(예: 마우스)가 없는 경우 키보드 조작을 사용하여 양식을 작성할 수 있습니다. 이때, 폼 라벨에 추가할 라벨의 accesskey(IE에서는 단축키, alt+accesskey 속성값, FF에서는 alt+shift+accesskey 속성값)와 tabindex 속성(Tab 키, tabindex 속성값은 순서대로)을 선택하고, 라벨, 입력 등
| 인용된 내용은 다음과 같습니다. <label for="fname" accesskey="f" tabindex="1" >이름:</label> <input type="text" id="fname" name="fname" value="" /> |
4. optgroup 태그를 사용하세요
optgroup 태그의 역할은 선택 목록에서 옵션 세트를 정의하는 것입니다. optgroup 태그를 사용하여 select 요소의 옵션을 분류하고 label 속성을 사용할 수 있습니다. 속성 값은 드롭다운 목록(select)에서 선택할 수 없는 들여쓰기 제목으로 표시됩니다. 참고: optgroup은 중첩을 지원하지 않습니다.
| 인용된 내용은 다음과 같습니다. <select name="중국"> <optgroup label="장쑤성"> <option value="nj">난징</option> <option value="sz">쑤저우</option> </optgroup> <optgroup label="절강"> <option value="hz">항저우</option> <옵션 값="wz">웬 저우</option> </optgroup> </select> |
IE6.0에는 작은 버그가 있습니다(FireFox에는 없음): 키보드 화살표 키를 사용하여 선택할 때 IE에서 선택한 항목이 한 optgroup의 옵션에서 다른 optgroup의 옵션으로 변경되면 onchange가 작동하지 않습니다. 트리거됩니다. 해결책은 문제 해결에 도움이 되도록 onkeydown 또는 onkeyup 이벤트를 추가하는 것입니다.
5. 버튼 태그 사용
정의 및 사용법
제출 버튼으로 정의됩니다. 버튼 요소 내에 텍스트나 이미지와 같은 콘텐츠를 배치할 수 있습니다. 이것이 이 요소와 입력 요소 버튼의 차이점입니다.
<button><img src="images/click.gif" alt="나를 클릭하세요!" />나를 클릭하세요!</button>
버튼은 입력보다 더 많은 기능과 풍부한 콘텐츠를 제공합니다. 버튼은 버튼 텍스트를 분리하고 버튼 안에 그림을 추가하여 텍스트와 그림에 선택할 수 있는 스타일을 더 많이 부여하여 딱딱한 버튼을 더욱 생생하게 만들 수 있습니다.
그리고 버튼 태그를 사용하는 것은 입력 버튼보다 더 의미론적이며 문자 그대로의 의미만으로 간단히 이해할 수 있습니다.