Web standardization has received more and more attention and attention from everyone. When making web pages that comply with Web standards, we often encounter form problems. There is a lack of knowledge in this area. Today's article introduces some form semantic structures to you. I hope It will help everyone’s CSS layout.
1. Use fieldset and legend tags
In the form, we often group the information in the form. For example, in the registration form, we may group the registration information into basic information (generally required) and detailed information (generally optional). So how can we do better To achieve it? We can consider adding the following two tags to the form:
fieldset: Group forms. A form can have multiple fieldsets.
legend: describe the content of each group
| The following is the quoted content: <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> |
The fieldset is bordered by default, and the 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 borders of the fieldset to 0 and the display of the legend to none in CSS.
2. Use label tags
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 the text label is clicked, the cursor is displayed in the corresponding form component.
| The following is the quoted content: <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 methods, we can also use label to nest the entire form component and text label, such as:
| The following is the quoted content: <label for="fname"> First name: <input type="text" id="fname" name="fname" value="" /> </label> |
According to the specification, text will be automatically associated with adjacent form components, but unfortunately - the current mainstream browser IE6 does not support this feature.
3. Use accesskey and tabindex attributes
Websites need to take into account more situations of use. For example, when there is no cursor device (such as a mouse), the form can be filled in using keyboard operations. At this time, clicking has no meaning for them. At this time, we choose the 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.
| The following is the quoted content: <label for="fname" accesskey="f" tabindex="1" >First name:</label> <input type="text" id="fname" name="fname" value="" /> |
4. Use the optgroup tag
The role of the optgroup tag is to define a set of options in a selection list. We can use the optgroup tag to classify the options of the select element and use the label attribute. The attribute value will be displayed as a non-selectable, indented title in the drop-down list (select). Note: optgroups do not support nesting.
| The following is the quoted content: <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">Wen zhou</option> </optgroup> </select> |
There is a small bug in IE6.0 (not present in FireFox): when using the keyboard arrow keys to select, in IE, when the selected item is changed from an option of one optgroup to an option of another optgroup, onchange will not be triggered. The solution is: add onkeydown or onkeyup events to help solve the problem.
5. Use button tags
Definition and usage
Defined as a submit button. Within the button element you can place content, such as text or images. This is the difference between this element and the input element button.
<button><img src="images/click.gif" alt="Click Me!" />Click Me!</button>
Button provides more functions and richer content than input. button separates the button text, and you can add pictures inside the button, giving the text and pictures more styles to choose from, making the stiff button more vivid.
And using button tags will be more semantic than input buttons, and can be understood simply from the literal meaning.