Skip to content

22 Group Input Fields with Field sets

Jump to bottom
M. Fares edited this page Apr 21, 2018 · 4 revisions

Fields sets tags that allow grouping of related inputs fields.

  1. Enclose related inputs into a fieldset HTML tag and add at the beginning a legend tag. Note that CSS classes are added to the fieldset and legend tags.
<fieldset class="fieldset-border">
  <legend class="legend-border">Login Information</legend>
  ...
</fieldset>
  1. Use the following CSS style for the fieldsets and the legends. The CSS style should be added to the /Content/Site.css file.
fieldset.fieldset-border {
    border: 1px solid #e5e5e5;
    padding: 0 1em 1em 1em;
    margin: 0 0 1.5em 0;
}

legend.legend-border {
    width: inherit;
    padding: 5px 10px;
    border-bottom: none;
}

Error: It should be legend.legend-border instead of legend.fieldset-border

  1. Example: /Views/Faculty/Create.cshtml

Clone this wiki locally