How to make a form that div+css keep the XHTML semantic structure

Css|xhtml

In the form form, we can group the information in the form, such as form of the registration form, and we can make the registration information divided into
Basic information (usually required)
More information (generally optional)
So how do we make it better? We can consider adding the following two tags to the form form:
FieldSet: To group forms, a form can have multiple fieldset.
Legend: Describes the content description for each group.

Let's look at the following code:

basic register

first Name:

...


detailed register

interest:

...

...

FieldSet default is a border, and legend default is generally displayed in the upper-left corner. But in some pages we don't want the default style or default layout of fieldset and legend to affect the beauty of the design. The workaround is to set FieldSet's border to 0,legend display in CSS to none.

Label label

Label label We should all be familiar, we give a label label to the text label in form forms and use the For property 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.

Let's look at the following code:

basic register

first name:

...


detailed register

Interest:

...

...

In addition to the above methods we can also use label tags to embed the entire form components and text labels, look at the following code:

Name:

According to the specification, text is automatically associated with adjacent form components, but unfortunately the mainstream browser IE6 does not support this feature.

accesskey Properties, TabIndex properties

Site to take into account the normal use of more browsing environment, such as without a cursor device (such as mouse) in the case, to allow the use of keyboard can also complete form form filling, this time click for them, has no meaning. This time we choose the label of the accesskey (shortcut key, ie under the Alt+accesskey attribute value, FF under the Alt+shift+accesskey property values) and TabIndex Properties (Tab key, TabIndex property values are added to the form label, such as Label,input.
Let's look at the following code:

The name:

Optgroup Label

The function of the Optgroup label is to define a set of options in the select list. We can use the optgroup tag to categorize the options for the Select element, and using the Label property, the property value is displayed as an optional, indented caption in the Drop-down list (select). Please note that nesting is not supported by Optgroup.

Let's look at the following code:

NanjingSuzhouHangzhouWenzhou

There is a small bug in the IE6 (Firefox is not a problem): When using the keyboard key to choose, in IE, the selected items from a optgroup option to another optgroup option, does not trigger the onchange. The solution is to increase the number of onkeydown or onkeyup events to help resolve them.

Button Label

We define it as a submit button. Within the button element you can place content, such as text or a picture (images). This is the difference between this element and the INPUT element button.

click

Button tags provide more functionality and richer content than input. button to separate the buttons text, and you can add pictures within the button, giving text and pictures more choice of style, so that the blunt button to become more vivid and flexible. and using the button tag will be more semantic than the input button, and the simple literal meaning is understandable.