Example of form semantic structure for Web standardization

Web standardization has been paid more and more attention and attention by everyone. To create webpages that comply with Web standards, we often encounter form problems. This part of knowledge is very lacking, this article introduces some form semantic structures and hopes to help you with CSS layout.
1. Use fieldset and legend tags
In form, we often group information in form. For example, if we register form, we may divide registration information into basic information (which is generally required ), details (usually optional), how can we achieve better? We can consider adding the following two tags to form:
Fieldset: groups forms. A form can have multiple fieldsets.
Legend: description of each group

The code is as follows:	Copy code
<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>

Fieldset has borders by default, while legend is usually displayed in the upper left corner by default. However, in some cases, you may not want to make the default styles or la s of fieldset and legend affect the appearance of the design scheme.
Solution: set the border of fieldset to 0 in CSS and the display of legend to none.

2. Use label labels

We give a label to the text label in form, and use the for attribute to associate it with the form component. The effect is to click the text label, and the cursor is displayed in the corresponding form component.

Sample code

The code is as follows:

Copy code

<Form id = "demoform" class = "democss" action = ""> <Fieldset> <Legend> Basic Register </legend> <P> <Label for = "fname"> First name: </label> <Input type = "text" id = "fname" name = "fname" value = ""/> </P> ... </Fieldset> <Fieldset> <Legend> Detailed Register </legend> <P> <Label for = "interest"> Interest: </label> <Input type = "text" id = "interest" name = "interest" value = ""/> </P> ... </Fieldset> ... </Form>

In addition to the above method, we can also use label to embed the entire form component and text label, such:

Sample code

The code is as follows:	Copy code
<Label for = "fname"> First name: <Input type = "text" id = "fname" name = "fname" value = ""/> </Label>

According to the specification, the text will be automatically associated with the form component of the adjacent, but unfortunately-the mainstream browser IE6 does not support this feature.

3. Use the accesskey and tabindex attributes

Websites must take into account the usage in more cases. For example, if there is no cursor device (such as a mouse), you can enter the form through the keyboard operation. At this time, click, it makes no sense. At this time, we select the label 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 in order) add to form labels, such as label and input.

Sample code

The code is as follows:	Copy code
<Label for = "fname" accesskey = "f" tabindex = "1"> First name: </label> <Input type = "text" id = "fname" name = "fname" value = ""/>

4. Use the optgroup label

The optgroup label defines a set of options in the selection list. We can use the optgroup label to classify the options of the select element and use the label attribute. The attribute value is displayed as an optional and indented title in the drop-down list (select. Note: optgroup does not support nesting.

Sample code

The code is as follows:	Copy code
<Select name = "China"> <Optgroup label = "Jiangsu"> <Option value = "nj"> Nanjing </option> <Option value = "sz"> Suzhou </option> </Optgroup> <Optgroup label = "Zhejiang"> <Option value = "hz"> Hangzhou </option> <Option value = "wz"> Wenzhou </option> </Optgroup> </Select>

IE6.0 has a small Bug (FireFox does not exist): When you use the keyboard arrow keys for selection, in IE, when the selected item is replaced by one optgroup option with another optgroup option, onchange is not triggered. Solution: add the onkeydown or onkeyup event to help solve the problem.

5. Use the button tag

Sample code

The code is as follows:	Copy code
Definition and Usage Defines a push button. Inside a button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.

Definition and usage
Is defined as a submit button. You can place content in a button element, such as text or images ). This is the difference between this element and the input element button.

Sample code

The code is as follows:	Copy code
<Button> Click Me! </Button>

Compared with input, a button provides more functions and more content. The button is used to separate the button text. You can add images to the button to add more styles to the text and image to make the stiff button more vivid.
In addition, the button tag is more semantic than the input button, which can be understood simply in the literal sense.