How to Group Form Elements

How can I group form elements

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
                )

        )
)

I hope this answered your question, it's a neat little trick I haven't really seen many others discuss. One thing to note is that you'll need to manually specify an ID number in that any set of brackets. You can only use [] as the last set of brackets.

What is the most correct way to group form elements?

There is no single correct way to semantically mark up a form. Some methods are more flexible than others, but that doesn't mean you should choose them all the time. Sometimes a bit of quick markup is best.

For flexibility, I typically use a structure as follows:

<form>
    <fieldset>
        <legend></legend> <!-- optional -->
        <label>
            <span>Label Text</span>
            <input type="..." />
        </label>
        <!-- repeat -->
        <input type="submit" ... />
    </fieldset>
</form>

Alternatively to help style with CSS I might use multiple labels:

<form>
    <fieldset>
        <label for="some-id-0">Label Text</label>
        <label class="text-label">
            <input type="text" id="some-id-0" />
        </label>
        <label for="some-id-1">Label Text</label>
        <label class="password-label">
            <input type="password" id="some-id-1" />
        </label>
    </fieldset>
</form>

But then I could separate this out into a list:

<form>
    <fieldset>
        <dl>
            <dt>
                <label for="some-id-0">Label Text</label>
            </dt>
            <dd>
                <label class="text-label">
                    <input type="text" id="some-id-0" />
                </label>
            </dd>
            <dt>
                <label for="some-id-1">Label Text</label>
            </dt>
            <dd>
                <label class="password-label">
                    <input type="password" id="some-id-1" />
                </label>
            </dd>
        </dl>
    </fieldset>
</form>

I find that adding more generic structural elements and classes tends to add flexibility to a certain degree, however you wont need any of that structure if you simply want a mad-lib form:

<form>
    <p>
        Hi, my
        <label for="fullName">name</label>
        is
        <input type="text" id="fullName" name="fullName" placeholder="Full name" />
        and I would like to request a copy of
        <select id="publication" name="publication">
            <option>Super Awesome Newsletter</option>
            <option>Even more awesome-er newsletter</option>
            <option>Lorem Ipsum weekly</option>
        </select>
        please send it to
        <input type="temail" id="email" name="email" placeholder="email@example.com" />
    </p>
    <input type="submit" value="Thank you!" />
</form>

In the end the semantics revolve around how you want the form read. Unfortunately that means restructuring the form if significant changes are made.

Is there a way to POST a group of form input fields as an object array?

If you want to sort them by question, then you need to put the [] in the name in the correct order:

name="questions[0][clue]"

… and so on.

How to group form inputs accessibly without a fieldset?

Basically you have already answered your question in the Possible Solution section (btw, as a blind person, I'm just impressed how you styled your question with headings!). You missed one tiny and simple thing, the aria-label attribute:

<div role="group" class="control" aria-label="Type">

Note: this will be invisible on screen, it is a screen-reader only solution. If however you want to make it visible, do the following using the aria-labelledby attribute instead:

<div role="group" class="control" aria-labelledby="pseudolegend">
<div id="pseudolegend" class="style-it-like-a-legend">Type</div>
[...]
</div>

The pseudolegend may be a span or even a p, of course, if you find it more appropriate.

A quick and dirty local test I made showed that, at least with JAWS and Chrome, there is no difference between a fieldset and a div with aria-label.

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

The tag you are looking for is <fieldset>

<fieldset style="width:270px">
<legend>Contact details</legend> 
<label>Name:<br /></label>
<input type="text" name="name"><br />
<label>Email:<br />
<input type="text" name="email"></label><br /> 
<label>Mobile:<br />
<input type="text" name="mobile"></label><br /> 
</fieldset>

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.

How to make a group form with two fields inline?

I saw you're using bootstrap...its pretty easy to format with bootstrap

.giveMargins {  margin-top: 50px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">  <div class="row giveMargins">    <div class="col-sm-7">      <div class="row">        <div class="col-sm-8 offset-sm-2">          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus, ante pretium posuere vestibulum, quam magna sodales velit, in suscipit tellus dolor ut elit.          </div>      </div>      <div class="row giveMargins">        <div class="col-sm-10 offset-sm-2">          <img src="http://www.nationalgeographic.it/images/2016/12/06/164441083-abc66e5b-8d1b-46d7-a0aa-024b9dea5edb.jpg"                   height="200px" width="80%">        </div>      </div>    </div>    <div class="col-sm-5">      <div class="row giveMargins">        <div class="col-sm-12">          <div class="form-group">            <select class="form-control" id="destination-picker">              <option>1</option>              <option>2</option>              <option>3</option>              <option>4</option>            </select>          </div>        </div>      </div>       <div class="row">        <div class="col-sm-6">          <div class="form-group">           <input onfocus="(this.type='date')" class="form-control" placeholder="Arrival">          </div>        </div>         <div class="col-sm-6">          <div class="form-group">           <input onfocus="(this.type='date')" class="form-control" placeholder="Arrival">          </div>        </div>      </div>      <div class="row">        <div class="col-sm-6">          <div class="form-group">           <select class="form-control" id="adult">                  <option value="" disabled selected>Adult</option>                  <option>1</option>                  <option>2</option>                  <option>3</option>                  <option>4</option>                  <option>More</option>               </select>          </div>        </div>         <div class="col-sm-6">          <div class="form-group">           <select class="form-control" id="child">                  <option value="" disabled selected>Child</option>                  <option>1</option>                  <option>2</option>                  <option>3</option>                  <option>4</option>                  <option>More</option>               </select>          </div>        </div>      </div>      <div class="row">        <div class="col-sm-12">          <button type="button" class="btn btn-block btn-search">START SEARCHING</button>        </div>      </div>    </div>  </div></div>

---

Related Topics