Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why Use Bracket Notation in HTML5?

This is a "best practices" question. I was perusing the Code Review StackExchage site, and I saw this thread. In it, Joseph Silber makes the suggestion of using bracket notation and eschewing IDs entirely for a form with multiple identically-structured rows of form inputs.

In the books I've read on web design/development, I've never seen this strategy used. Is using bracket notation and wrapping input elements within label tags, as well as not using id tags in form inputs a good idea? Perhaps there something about Javascript/JQuery that makes this approach advantageous?

I wanted to ask Joseph about it directly, but I don't have any reputation on the site yet so I couldn't even comment. However, I'm interested in seeing the community-wide perspective on this, because searching for things like "HTML5 bracket notation" and "HTML5 arraylike notation" isn't turning up anything definitive for me so far.

Here's a summary of the above question with some example code borrowed from the linked question:

Why use this:

<label>Comment:
  <input type="text" name="comment[]" width="50" />
</label>

instead of this:

<label for="comment-0">Comment: </label>
<input type="text" id="comment-0" name="comment-0" width="50" />

in a form with multiple rows of the same inputs?

like image 869
DeeDee Avatar asked Jan 07 '13 02:01

DeeDee


1 Answers

Sticking [] on the end of an input name will cause some server side form processing libraries to present the data as an array. Some other form processors don't need the special syntax. Your choice will largely depend on your desire to be compatible with the former kind vs having more complicated names and not being able to access the elements via dot-notation in JS.

Using child elements instead of for attributes will:

  • Save you from having to generate unique ids (especially useful if similar forms can appear on a single page)
  • Limit your styling choices
  • Be compatible with fewer browsers (I think the only loss is old versions of IE, which is no big loss).

So there are pros and cons there and you have to decide what it right for you.

like image 139
Quentin Avatar answered Oct 28 '22 08:10

Quentin