Example of simple form standardization - semantic structure_form special effects

1. Use fieldset and legend tags

In forms, we often group the information in the form. For example, in a registration form, we may group the registration information into basic information (generally required), details Information (generally optional), so how can we achieve it better? We can consider adding the following two tags to the form:

Copy the code The code is as follows:

fieldset: Group the form. A form can have multiple fieldsets
legend: Description of the content of each group

<form id="demoform" class="democss" action=""> <fieldset> <legend>Basic Register</legend> <p>First name: <input type="text" name="fname" value=""></p> ... </fieldset> <fieldset> <legend>Detailed Register</legend> <p>Interest: <input type="text" name="interest" value=""></p> ... </fieldset> ... </form>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Fieldset is bordered by default , and legend is generally displayed in the upper left corner by default. But in some cases, you may not want to let the default styles or default layouts of fieldsets and legends affect the aesthetics of the design.

Solution: Set the fieldset's border to 0 and the legend's display to none in CSS.
2. Use label label
We give a label label to the text label in the form, and use the for attribute to associate it with the form component. The effect is that when you click the text label, the cursor Displayed in the corresponding form component.

Copy code The code is as follows:

Basic Register

First name:

...

Detailed Register

Interest:

...

...

In addition to the above methods, we can also use label to nest the entire form component and text label, such as:
< label for="fname">First name:
According to the specification, the text will automatically Associated with adjacent form components, but unfortunately - the current mainstream browser IE6 does not support this feature.
3. Use the accesskey and tabindex attributes
The website should take into account more situations. For example, when there is no cursor device (such as a mouse), the form can also be completed using keyboard operations. Filling in, clicking at this time has no meaning for them. At this time, we choose label's accesskey (shortcut key, alt accesskey attribute value under IE, alt shift accesskey attribute value under FF) and tabindex attribute (Tab key, tabindex attribute value is sequence) to add to the form label, such as label, input etc.

Copy code The code is as follows:

First name:

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!

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

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