양식에서는 정보를 양식으로 그룹화하는 경우가 많습니다. 예를 들어 등록 양식에서는 등록 정보를 기본 정보(일반적으로 필수), 세부 정보( 일반적으로 선택 사항) 그렇다면 어떻게 하면 이를 더 잘 달성할 수 있을까요? 양식에 다음 두 개의 태그를 추가하는 것을 고려할 수 있습니다.
Fieldset 기본적으로 테두리가 있으며 범례는 일반적으로 기본적으로 왼쪽 상단에 표시됩니다. 그러나 어떤 경우에는 필드 세트와 범례의 기본 스타일이나 기본 레이아웃이 디자인의 미학에 영향을 미치도록 하고 싶지 않을 수도 있습니다.
해결책: CSS에서 필드 세트의 테두리를 0으로 설정하고 범례 표시를 없음으로 설정합니다. 2. 라벨 라벨 사용 양식의 텍스트 라벨에 라벨 라벨을 부여하고 for 속성을 사용하여 양식 구성 요소와 연결하는 효과가 있습니다. 텍스트 라벨, 커서는 해당 양식 구성 요소에 표시됩니다.
위의 방법 외에도 레이블을 사용하여 전체 양식 구성 요소와 텍스트 레이블을 중첩할 수도 있습니다. 예: < label for="fname">이름: 사양에 따르면 텍스트는 인접한 양식 구성 요소와 자동으로 연결되지만 안타깝게도 현재 주류 브라우저 IE6은 이 기능을 지원하지 않습니다.
3. accesskey 및 tabindex 속성을 사용하세요
웹사이트는 더 많은 상황을 고려해야 합니다. 예를 들어 마우스와 같은 커서 장치가 없는 경우에도 양식을 사용할 수 있습니다. 키보드 조작을 사용하여 완료합니다. 이때 클릭하는 것은 의미가 없습니다. 이때 라벨의 accesskey(IE에서는 단축키, alt accesskey 속성 값, FF에서는 alt Shift accesskey 속성 값)와 tabindex 속성(Tab 키, tabindex 속성 값은 순서대로)을 선택하여 label 등의 양식 라벨에 추가합니다. , 입력 등
4. optgroup 태그 사용 optgroup 태그의 역할은 선택 목록에서 옵션 세트를 정의하는 것입니다. optgroup 태그를 사용하여 select 요소의 옵션을 분류하고 label 속성을 사용하도록 선택할 수 있습니다. 속성 값은 드롭다운 목록(select)에서 선택할 수 없는 들여쓰기 제목으로 표시됩니다. 참고: optgroup은 중첩을 지원하지 않습니다.
여기 IE6.0의 하나입니다. 작은 버그(FireFox에는 없음): IE에서 키보드 화살표 키를 사용하여 선택할 때 선택한 항목이 한 optgroup의 옵션에서 다른 optgroup의 옵션으로 변경되면 onchange가 작동하지 않습니다. 트리거되었습니다. 해결책은 문제 해결에 도움이 되도록 onkeydown 또는 onkeyup 이벤트를 추가하는 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
