How can I group form elements

Asked
Active3 hr before
Viewed126 times

8 Answers

elements
90%

The <fieldset> tag is used to group related elements in a form.,The <fieldset> tag draws a box around the related elements.,Group related elements in a form:,Tip: The <legend> tag is used to define a caption for the <fieldset> element.

Definition and Usage

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

<fieldset>
load more v
88%

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 <legend> 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.,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.,The <fieldset> element provides a container for related form controls, and the <legend> element acts as a heading to identify the group.,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 <fieldset>.

<fieldset>
   <legend>Output format</legend>
   <div>
      <input type="radio" name="format" id="txt" value="txt" checked>
      <label for="txt">Text file</label>
   </div>
   <div>
      <input type="radio" name="format" id="csv" value="csv">
      <label for="csv">CSV file</label>
   </div>
   […]
</fieldset>
load more v
72%

What i want to accomplish is to check if inside or outside is checked, if outside i checked the multiply points for the given text input by 1,5. BTW this needs to be calculated in PHP., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,I'm expanding on this answer because it took me a while to track down the PHP code that would parse the data from the form., Definitely don't use label to label groups of fields. A label is associated with a single field (which either needs to be a child of the label, or referenced with a for attribute) – Quentin Apr 27 '11 at 9:45

As it turns out, you can group fields using HTML forms. Check out this code here: (specifically note the name attributes)

<form method="post" action="" accept-charset="utf-8">
   <p>
      <label>first_field</label><br />
      <input type="text" id="first_field" name="field[1][points]" /><br />
      <input type="radio" value="inside" name="field[1][group]" checked /><br />
      <input type="radio" value="outside" name="field[1][group]"><br />
   </p>
   <p>
      <label>second_field</label><br />
      <input type="text" id="second_field" name="field[2][points]" /><br />
      <input type="radio" value="inside" name="field[2][group]" checked /><br />
      <input type="radio" value="outside" name="field[2][group]"><br />
   </p>
</form>

Without filling anything in, this will yield a POST array like this:

Array
   (
      [field] => Array(
         [1] => Array(
            [points] => [group] => inside
         )

         [2] => Array(
            [points] => [group] => inside
         )

      )
   )
load more v
65%

The <fieldset> tag in HTML5 is used to make a group of related elements in the form and it creates the box over the elements. The <fieldset> tag is new in HTML5.,disabled: It specify that the group of related form elements should be disabled.,Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.,How to fetch data from JSON file and display in HTML table using jQuery ?

Syntax:

<fieldset> Contents... </fieldset>
load more v
75%

HTML elements reference,<fieldset>: The Field Set element,The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.,Learn Web Development

<form action="#">
   <fieldset>
      <legend>Simple fieldset</legend>
      <input type="radio" id="radio">
      <label for="radio">Spirit of radio</label>
   </fieldset>
</form>
load more v
40%

Imagine this scenario: You have a group of fields that represent a person. Maybe the form you're building allows you to create a company, but you also want to be able to add employees of the company.,Here's the more common suggestion: use the field name array syntax:,This seems like a great idea, and it is—but when you parse the input on the other end, you're probably expecting something like this:,Parsing that together is not awful, but it can get really clumsy—especially as you add more fields.

You probably know this is the wrong way:

Person 1:
<label>First name</label>
<input name="first_name1">

<label>Last name</label>
<input name="last_name1">

<label>Email</label>
<input name="email1">
load more v
22%

In the case of forms, you can break down areas of the form into specific sets of fields using the fieldset element. If you have a form with three contextual sections, such as Contact Information, Favorite Activities, and Reset or Submit, you can create fields around each of those. Then you can use the legend element to add a header for each of those sections, further providing context (see Example 5-14).,If you check your work in a browser, you'll see that each fieldset is separated by a line around the field, and the legend text appears within the top of that line.,With fieldset and legend, you can provide far more assistance to individuals who might not otherwise be able to understand the form as explicitly (see Figure 5-15).,Remember, the default appearance of any HTML in a browser is just thata default. You can modify any presentation that HTML itself causes using CSS. So, in the previous example, you can style the fieldset sections to have different colors, use a different border style, and have more space between each section.

<form method="get" action="http://www.myserver.com/cgi-bin/mailscript/">

   <fieldset>
      <legend>Contact Information</legend>
      First Name: <input type="text" name="firstname" id="firstname" size="25" maxlength="40" /><br />
      Last Name: <input type="text" name="lastname" id="lastname" size="25" maxlength="40" /><br />
      Phone: <input type="text" name="phone" id="phone" size="15" maxlength="0" />
   </fieldset>

   <fieldset>
      <legend>Favorite activities</legend>
      <input type="checkbox" value="reading" name="reading" id="reading" />Reading<br />
      <input type="checkbox" value="sports" name="sports" id="sports" checked="checked" />Sports<br />
      <input type="checkbox" value="games" name="games" id="games" />Computer Games
   </fieldset>

   <fieldset>
      <legend>Reset or Submit Your Answers</legend>
      <input type="reset" value="reset" />
      <input type="submit" value="submit" />
   </fieldset>

</form>
60%

While designing a form, you might like to group a few input fields into a group to help organise the form layout. This can be done by using the tag . Here is an example for using it., Grouping a few input fields , Grouping a few input fields ,For each fieldset, you can set a legend for the set using the tag LEGEND TEXT

Example

<form>
   <fieldset>
      <legend>1st field set:</legend>
      Field one:<br>
      <input type="text"><br>
      Field two:<br>
      <input type="text"><br>
   </fieldset><br>
   <fieldset>
      <legend>2nd field set:</legend>
      Field three:<br>
      <input type="text"><br>
      Field four:<br>
      <input type="text"><br>
   </fieldset><br>
   <input type="submit" value="Submit">
</form>

Other "elements-undefined" queries related to "How can I group form elements"