fieldset 태그, 범례 태그

양식 양식에서는 양식에 있는 정보를 그룹화하고 분류할 수 있습니다. 예를 들어 등록 양식에서는 등록 정보를
　　 기본 정보(일반적으로 필수)
　 세부 정보(일반적으로 선택 사항)
로 그룹화할 수 있습니다. 그렇다면 어떻게 하면 더 나은 결과를 얻을 수 있을까요? form에 다음 두 개의 태그를 추가하는 것을 고려할 수 있습니다.
　Fieldset: 양식을 그룹화하면 여러 필드 세트가 있을 수 있습니다.
　　범례: 각 그룹의 콘텐츠 설명을 설명합니다.

　다음 코드를 살펴보겠습니다.

예제 소스 코드 [www.52css.com]

기본 레지스터

이름:
...

상세 등록

Interest: 그러나 일부 페이지에서는 필드 세트 및 범례의 기본 스타일이나 기본 레이아웃이 디자인의 미학에 영향을 미치는 것을 원하지 않습니다. 해결 방법은 CSS에서 필드 세트의 테두리를 0으로 설정하고 범례 표시를 없음으로 설정하는 것입니다.


◆ 라벨 라벨

양식의 텍스트 라벨에 라벨 라벨을 부여하고 for 속성을 사용하여
양식 구성 요소
와 연결하면 효과는 다음과 같습니다. 텍스트 레이블을 클릭하면 해당 양식 구성 요소에 커서가 표시됩니다.
　다음 코드를 살펴보겠습니다.



예제 소스 코드
[www.52css.com]

기본 레지스터

이름:

...

상세 등록 legend> ;

Interest:

...

...



라벨 태그를 사용하여 전체 양식 구성 요소를 중첩할 수도 있습니다. 텍스트 레이블은 다음 코드를 참조하세요.

예제 소스 코드
[www.52css.com]

이름:

　 사양에 따르면 텍스트는 자동으로 인접한 양식 구성 요소와 연결되지만 안타깝게도 주류 브라우저 IE6은 그렇지 않습니다. 이 기능을 지원합니다.

◆ accesskey 속성, tabindex 속성

웹사이트는 더 많은 브라우징 환경에서 일반적인 사용을 고려해야 합니다. 예를 들어 커서 장치(예: 마우스)가 없는 경우 키보드를 사용하여 양식을 채울 수도 있습니다. 이 클릭은 이제 그들에게 아무 의미가 없습니다. 이때, 레이블의 accesskey(IE에서는 단축키, alt+accesskey 속성값, FF에서는 alt+shift+accesskey 속성값)와 tabindex 속성(Tab 키, tabindex 속성값은 순서대로)을 선택하여 폼 레이블에 추가합니다. . 라벨, 입력 등.
　다음 코드를 살펴보겠습니다.




예제 소스 코드
[www.52css.com]

이름:

◆ optgroup 태그

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

　다음 코드를 살펴보겠습니다.

예제 소스 코드 [www.52css.com]

난징
쑤저우


항저우
원저우

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

◆버튼 태그

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

예제 소스 코드 [www.52css.com]

　버튼 태그는 입력보다 더 많은 기능과 풍부한 콘텐츠를 제공합니다. 버튼은 버튼 텍스트를 분리하고 버튼 안에 그림을 추가하여 텍스트와 그림에 더 많은 스타일을 선택할 수 있도록 하여 단단한 버튼을 더욱 생생하고 유연하게 만듭니다. 그리고 버튼 태그를 사용하는 것은 입력 버튼보다 더 의미적이며, 문자 그대로의 의미만으로 간단히 이해할 수 있습니다.

위 내용은 fieldset 태그, 범례 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!