Html form element grouping

: The Field Set element

The HTML element is used to group several controls as well as labels ( ) within a web form.

Try it

Attributes

This element includes the global attributes.

The name associated with the group.

Note: The caption for the fieldset is given by the first element nested inside it.

Styling with CSS

There are several special styling considerations for .

Its display value is block by default, and it establishes a block formatting context. If the is styled with an inline-level display value, it will behave as inline-block , otherwise it will behave as block . By default there is a 2px groove border surrounding the contents, and a small amount of default padding. The element has min-inline-size: min-content by default.

There will be an anonymous box holding the contents of the , which inherits certain properties from the . If the is styled with display: grid or display: inline-grid , then the anonymous box will be a grid formatting context. If the is styled with display: flex or display: inline-flex , then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.

You can feel free to style the and in any way you want to suit your page design.

Examples

Simple fieldset

This example shows a really simple example, with a , and a single control inside it.

form action="#"> fieldset> legend>Do you agree?legend> input type="checkbox" id="chbx" name="agree" value="Yes!" /> label for="chbx">I agreelabel> fieldset> form> 

Result

Disabled fieldset

This example shows a disabled with two controls inside it. Note how both the controls are disabled due to being inside a disabled .

form action="#"> fieldset disabled> legend>Disabled login fieldsetlegend> div> label for="name">Name: label> input type="text" id="name" value="Chris" /> div> div> label for="pwd">Archetype: label> input type="password" id="pwd" value="Wookie" /> div> fieldset> form> 

Result

Technical summary

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Grouping Controls

Grouping related form controls makes forms more understandable for all users, as related controls are easier to identify. It also makes it easier for people to focus on smaller and more manageable groups rather than try to grasp the entire form at once.

Grouping needs to be carried out visually and in the code, for example, by using the and elements to associate related form controls. Also, related entries of a element can be grouped using .

Associating related controls with fieldset

The element provides a container for related form controls, and the element acts as a heading to identify the group.

The legend for a group of controls can also highlight common attributes of all controls, for example, to advise that all fields in the group are required.

Radio buttons

In the example below, there are three radio buttons that allow the user to choose an output format. Radio button groups should always be grouped using .

  Output format  type="radio" name="format" id="txt" value="txt" checked>  for="txt">Text file   type="radio" name="format" id="csv" value="csv">  for="csv">CSV file  […] 

Checkboxes

In the example below, three checkboxes are part of an opt-in function for receiving different types of information.

  I want to receive  type="checkbox" name="newsletter" id="check_1">  for="check_1">The weekly newsletter  […] 

Related fields

This example shows form fields to enter shipping and billing addresses. As the labels in both groups have the same text, the fieldset element also helps to distinguish the form fields by their groups. In case the is not read by screen readers (see note below), labels for the first form control in each group should include the group’s name. This name can be hidden visually.

  Shipping Address:  for="shipping_name">  class="visuallyhidden">Shipping Name:  type="text" name="shipping_name" id="shipping_name">   for="shipping_street">Street:  type="text" name="shipping_street" id="shipping_street">  […]  Billing Address:  for="billing_name">  class="visuallyhidden">Billing Name:  type="text" name="billing_name" id="billing_name">   for="billing_street">Street:  type="text" name="billing_street" id="billing_street">  […] 

Note: Depending on the configuration, some screen readers read out the legend either with every form element, once, or, rarely, not at all. To accommodate this consider the following:

• Make the legend as short as possible for situations in which it is read together with the label each time.
• Make the individual labels sufficiently self-explanatory for situations in which legends are not read aloud, without repeating the legend in every label.

Associating related controls with WAI-ARIA

WAI-ARIA provides a grouping role that functions similarly to fieldset and legend . In this example, the div element has role=group to indicate that the contained elements are members of a group and the aria-labelledby attribute references the id for text that will serve as the label for the group.

This technique provides additional styling possibilities.

Because WAI-ARIA not fully supported in all web browser and screen reader combinations, a group identifier should be added to the first form control in the group.

 role="group" aria-labelledby="shipping_head">  id="shipping_head">Shipping Address:  for="shipping_name">  class="visuallyhidden">Shipping Name:  type="text" name="shipping_name" id="shipping_name">  […]  role="group" aria-labelledby="billing_head">  id="billing_head">Billing Address:  for="billing_name">  class="visuallyhidden">Billing Name:  type="text" name="billing_name" id="billing_name">  […] 

Grouping items in select elements

For select elements with groups of options, the optgroup element can be used to indicate such groups. The label attribute of the optgroup element is used to provide a label for the group. This is especially useful for lists with many related options. In the example below, users can choose from lectures in one of three courses.

  label="8.01 Physics I: Classical Mechanics">  value="8.01.1">Lecture 01: Powers of Ten  value="8.01.2">Lecture 02: 1D Kinematics  value="8.01.3">Lecture 03: Vectors   label="8.02 Physics II: Electricity and Magnestism">  value="8.02.1">Lecture 01: What holds our world together? […] […] 

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:

Success Criteria:

• 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
• 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

Help improve this page

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai-eo-editors@w3.org or via GitHub.

Developed by the Education and Outreach Working Group (EOWG). Developed with support from the WAI-ACT project, co-funded by the European Commission IST Programme.

Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.

Copyright © 2023 World Wide Web Consortium (W3C ® ). See Permission to Use WAI Material.

Источник

How to group elements in HTML forms? Get a border around them?

How to group elements in HTML forms? Get a border around them?

I am relatively new to HTML.

I want to get a border around form elements which are similar.

For example, for Sign Up form :

The tag you are looking for is

 
Contact details
 Name:
  
Email: 
 
Mobile: 
 
 

The result would be something like this :

And whatever is there in your legend tag is going to be displayed in the box as heading for the group.

The width determines the size of the box. If no width is mentioned, or you haven’t used any CSS, the size of the rectangle would be that of the browser window.

do you mean something like this?

    
 
Personalia:
 Name:  
Email:  
Date of birth:
   

Demo here: https://jsfiddle.net/991avcmv/

The way you can do this is:-

 
Contact details
 Email: 
 
Mobile: 
 
Telephone: 
 

Syntax and Various Examples of Combobox in HTML, In which users are able to select an option from the list as per their preference.Combobox in HTML is formed with select element and input …

HTML <fieldset> Tag

Example

Group related elements in a form:

More «Try it Yourself» examples below.

Definition and Usage

The tag is used to group related elements in a form.

The tag draws a box around the related elements.

Tips and Notes

Tip: The tag is used to define a caption for the element.

Browser Support

Attributes

Global Attributes

The tag also supports the Global Attributes in HTML.

Event Attributes

The tag also supports the Event Attributes in HTML.

More Examples

Example

legend <
background-color: gray;
color: white;
padding: 5px 10px;
>

Related Pages

HTML DOM reference: Fieldset Object

Default CSS Settings

Most browsers will display the element with the following default values:

fieldset <
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove ( internal value );
>

HTML Forms, The HTML

. The

// the selector will match all input controls of type :checkbox // and attach a click event handler $("input:checkbox").on('click', function() < // in the handler, 'this' refers to the box clicked on var $box = $(this); if ($box.is(":checked")) < // the name of the box is retrieved using the .attr() method // as it is assumed and expected to be immutable var group = "input:checkbox[name='" + $box.attr("name") + "']"; // the checked state of the group/box on the other hand will change // and the current value is retrieved using .prop() method $(group).prop("checked", false); $box.prop("checked", true); >else < $box.prop("checked", false); >>);

 
Fruits
 Kiwi Jackfruit Mango 
 
Animals
 Tiger Sloth Cheetah 

$('input[type="checkbox"]').on('change', function() < $('input[type="checkbox"]').not(this).prop('checked', false); >); 

$('input[type="checkbox"]').on('change', function() < $(this).siblings('input[type="checkbox"]').prop('checked', false); >); 

$('input[type="checkbox"]').on('change', function() < $('input[name="' + this.name + '"]').not(this).prop('checked', false); >);