头图

If the form contains only one group, don't use the group title - use the form title instead.
See a specific example:

If the form is the only element on the page and it has multiple groups, you can use the group header to identify each group.

If the form is one of several elements on the page, such as tables and lists, use the form title as its title.

One Page, Many Forms

If you want to emphasize that some groups are very different, use multiple forms on one page instead of one form with multiple groups. Visually, this looks more separated than using a single form with multiple groups. Give each table a meaningful title. If necessary, you can also use groups to build each form. In this case, also give the group a title.

The following figure is an example of having several forms on a page:

Here is an example of a form with several groups:

Form layout under different size types

Size S (Smartphones and Dialogs)

Keep the default behavior (single-column layout with a label field ratio of 12:12:0).

Size M (Tablet) – Full Screen

If placing the form in the details section of a split screen, use a single-column layout with a 4:7:1 ratio for the label fields (4 grid columns for labels, 7 grid columns for fields, and 1 grid for empty columns List).

If placing the form in a fullscreen application, use a single-column layout with a 3:5:4 ratio of label fields (3 grid columns for labels, 5 grid columns for fields, and 4 grid columns consisting of empty columns use).

As already explained in the Responsiveness (Breakpoints) section, the size M drops to 601 pixels. At this size, the 3:5:4 approach may not be wide enough to accommodate longer labels and fields. So if you expect long labels or input values, use a label field ratio of 4:8:0 (4 grid columns for labels, 8 grid columns for fields, and 0 grid columns for empty columns).

Here is an effect:


注销
1k 声望1.6k 粉丝

invalid