Simple Form standardization example (2): Semantic Structure

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

<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 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.

<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:

<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. In this case, select the label accesskey (shortcut key, ALT + accesskey attribute value under IE, ALT + Shift + accesskey attribute value under Firefox) and the tabindex attribute (Tab key, tabindex attribute value in order) add to form labels, such as label and input.

<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.

<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

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 buttom element, such as text or images ). This is the difference between this element and the input element button.

<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.