단순 형태 표준화의 예 - 의미 구조_형태 특수 효과

1. 필드셋 및 범례 태그 사용

양식에서는 정보를 양식으로 그룹화하는 경우가 많습니다. 예를 들어 등록 양식에서는 등록 정보를 기본 정보(일반적으로 필수), 세부 정보( 일반적으로 선택 사항) 그렇다면 어떻게 하면 이를 더 잘 달성할 수 있을까요? 양식에 다음 두 개의 태그를 추가하는 것을 고려할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

fieldset: 양식을 그룹화합니다.
legend: 각 그룹의 내용에 대한 설명

<form id="demoform" class="democss" action=""> <fieldset> <legend>기본등록</legend> <p>이름: <input type="text" name="fname" value=""></p> ... </fieldset> <fieldset> <legend>상세등록</legend> <p>관심사: <input type="text" name="interest" value=""></p> ... </fieldset> ... </form>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

Fieldset 기본적으로 테두리가 있으며 범례는 일반적으로 기본적으로 왼쪽 상단에 표시됩니다. 그러나 어떤 경우에는 필드 세트와 범례의 기본 스타일이나 기본 레이아웃이 디자인의 미학에 영향을 미치도록 하고 싶지 않을 수도 있습니다.

해결책: CSS에서 필드 세트의 테두리를 0으로 설정하고 범례 표시를 없음으로 설정합니다.
2. 라벨 라벨 사용
양식의 텍스트 라벨에 라벨 라벨을 부여하고 for 속성을 사용하여 양식 구성 요소와 연결하는 효과가 있습니다. 텍스트 라벨, 커서는 해당 양식 구성 요소에 표시됩니다.

코드 복사 코드는 다음과 같습니다.

이름:

상세 등록

label for="interest"> 라벨>

...
fieldset>
...

위의 방법 외에도 레이블을 사용하여 전체 양식 구성 요소와 텍스트 레이블을 중첩할 수도 있습니다. 예:
이름:
사양에 따르면 텍스트는 인접한 양식 구성 요소와 자동으로 연결되지만 안타깝게도 현재 주류 브라우저 IE6은 이 기능을 지원하지 않습니다.

3. accesskey 및 tabindex 속성을 사용하세요

웹사이트는 더 많은 상황을 고려해야 합니다. 예를 들어 마우스와 같은 커서 장치가 없는 경우에도 양식을 사용할 수 있습니다. 키보드 조작을 사용하여 완료합니다. 이때 클릭하는 것은 의미가 없습니다. 이때 라벨의 accesskey(IE에서는 단축키, alt accesskey 속성 값, FF에서는 alt Shift accesskey 속성 값)와 tabindex 속성(Tab 키, tabindex 속성 값은 순서대로)을 선택하여 label 등의 양식 라벨에 추가합니다. , 입력 등


코드 복사

코드는 다음과 같습니다.이름:

4. optgroup 태그 사용
optgroup 태그의 역할은 선택 목록에서 옵션 세트를 정의하는 것입니다. optgroup 태그를 사용하여 select 요소의 옵션을 분류하고 label 속성을 사용하도록 선택할 수 있습니다. 속성 값은 드롭다운 목록(select)에서 선택할 수 없는 들여쓰기 제목으로 표시됩니다. 참고: optgroup은 중첩을 지원하지 않습니다.

<select name="China"> <optgroup label="Jiangsu"> <option value="nj">난징</option> <option value="sz">쑤저우</option> </optgroup> <optgroup label="Zhejiang"> <option value="hz">항저우</option> <option value="wz">원저우</option> </optgroup> </select>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

여기 IE6.0의 하나입니다. 작은 버그(FireFox에는 없음): IE에서 키보드 화살표 키를 사용하여 선택할 때 선택한 항목이 한 optgroup의 옵션에서 다른 optgroup의 옵션으로 변경되면 onchange가 작동하지 않습니다. 트리거되었습니다. 해결책은 문제 해결에 도움이 되도록 onkeydown 또는 onkeyup 이벤트를 추가하는 것입니다.

5. 버튼 태그를 사용하세요

코드를 복사하세요 코드는 다음과 같습니다.

정의 및 사용법
버튼 요소 내부에 텍스트나 이미지와 같은 콘텐츠를 넣을 수 있습니다. 이것이 이 요소와 입력 요소로 생성된 버튼의 차이점입니다.

정의 및 사용법
은 제출 버튼으로 정의됩니다. 버튼 요소 내에 텍스트나 이미지와 같은 콘텐츠를 배치할 수 있습니다. 이것이 이 요소와 입력 요소 버튼의 차이점입니다.

코드 복사 코드는 다음과 같습니다.

Click Me!

버튼은 입력보다 더 많은 기능과 풍부한 콘텐츠를 제공합니다. 버튼은 버튼 텍스트를 분리하고 버튼 내에 그림을 추가하여 텍스트와 그림에 더 많은 스타일을 선택할 수 있도록 하여 딱딱한 버튼을 더욱 생생하게 만듭니다.

그리고 버튼 태그를 사용하는 것은 입력 버튼보다 의미가 더 강하고 문자 그대로 쉽게 이해할 수 있습니다.