fieldset tag, legend tag

In the form form, we can group and classify the information in the form. For example, in the form of the registration form, we can group the registration information into
Basic information (generally required)
Detailed information ( Generally optional)
So how can we achieve it better? We can consider adding the following two tags to the form:
Fieldset: Group the forms. A form can have multiple fieldsets.
　Legend: Describe the content description of each group.

Let’s look at the following code:

##Example Source Code

[www.52css.com]

Basic Register

First name:

...

Detailed Register

Interest:
...

...

Fieldset defaults to a border, while legend defaults to normal Displayed in the upper left corner. But on some pages, we don't want the default styles or default layouts of fieldsets and legends to affect the aesthetics of the design. The solution is to set the fieldset's border to 0 and the legend's display to none in CSS.


◆ label label
Everyone should be familiar with label labels. We give a label label to the text label in the form form, and use the for attribute to make it consistent with
Form componentAssociated, the effect is that when you click the text label, the cursor is displayed in the corresponding form component.
Let’s look at the following code:

##Example Source Code

[www.52css.com]

Basic Register

First name:

...

Detailed Register

Interest:

...

...

In addition to the above methods In addition, we can also use label tags to nest the entire form component and text label, see the following code:

##Example Source Code
[ www.52css.com]

First name:

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

◆ accesskey attribute, tabindex attribute

The website should take into account normal use in more browsing environments. For example, when there is no cursor device (such as a mouse), the website should have You can also use keyboard operations to complete the form filling. 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. Let’s look at the following code:

Example Source Code
[www.52css.com]

First name:

##◆ optgroup label
The function of the optgroup label is defined in the selection list A set of options. We can choose to 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). Please note that optgroups do not support nesting.
Let’s look at the following code:

##Example Source Code

[www.52css.com]

Nanjing
< ;option value="sz">Suzhou


Hangzhou< /option>
Wenzhou

　There is one in IE6 Small bug (no problem 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 to add

onkeydown
or onkeyup events to help solve the problem.
◆ button tag
We define it 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.

##Example Source Code
[www.52css.com]

Click Me!

The button tag provides more More functions and richer content. button separates the button text, and can

add pictures

inside the button, giving the text and pictures more styles to choose from, making the rigid button more vivid and flexible. And using button tags will be more
semantic than input buttons, and can be understood simply from the literal meaning.

The above is the detailed content of fieldset tag, legend tag. For more information, please follow other related articles on the PHP Chinese website!