1 year ago, davidrapson said:

It’s probably a matter of preference but why do you prefer an ol for forms? I’ve always found that style redundant. The label + input combo makes sense on its own most of the time for me.

I’d love to hear the thinking behind it, especially if there is some benefit I’m missing.

1 year ago, albert.shala said:

A little off topic, but recently I’ve re-discovered ol and stopped using ul for menus and elsewhere I needed lists, I just made so much more sense to use ordered lists rather then unordered lists. Just my two cents on the matter.

1 year ago, davidrapson said:

Thanks for the detailed reply Aaron. I can definitely see the cases where a list would give you more flexibility with layout, and I agree I can see it making semantic sense to use a list for larger forms.

I doubt I’d want to use a p for simpler forms though, in those cases I’ll happily keep my markup as lean as possible — I can see your thinking though.

As an aside, from your presentation I’ve learnt the trick of using label:after { content: “:”}  to add a colon to label elements. Very nice.

1 year ago, planet71 said:

You are totally right about it semantically meaning of ol, ul. I’ve never thought about using it (I’ve used divs rather) in forms, but it seems pretty logical.

1 year ago, Paul Bedwell said:

Personally when markup up forms I always use fieldset and legend to give context to the content of the form.

I often add instruction to form fields where applicable using the title attribute on the form field in addition to the label for the field.

For example on a password input field I’ll add text to a title attribute such as “Enter a password that contains at least one number”. This way the form is easily scanned through visually and also by screen readers but has the additional title attribute information read to inform the user.

I also use JavaScript to give visual hints and live client-side error handling too (with server-side error handling also present on submission) lifted from the information in the title attribute.

Where required to ‘hide’ the label I prefer to position the label off screen using position:absolute; left:-9999px; and with javascript add the label as a placeholder value in text input and textarea fields.

1 year ago, panoramica said:

I often add instruction to form fields where applicable using the title attribute on the form field in addition to the label for the field.

I’ve always been uneasy with using the title attribute as my understanding is that (a) browser support is/was sketchy (although now it’s recommended by the WCAG, for form elements at least) and (b) there’s the risk that where it is supported the title attribute is announced instead of whatever other information is present.

As a result I generally dealt with ‘tip’ text by incorporating it into the label and then repositioned it with CSS, to look like a separate element. Often this required more time spent on form layout than was realistic given budgetary constraints, and it also made the code harder to update in the future.

So I was excited to recently discover the aria-describedby attribute, which takes the ID of an element that you wish to associate with that input, eg:

<label for="phone-number">Phone number</label>
<input type="text" name="phone-number" id="phone-number" aria-describedby="phone-number-tip" />
<p id="phone-number-tip">Please include your area code</p>

I know that as a new technology, ARIA isn’t supported by all screenreaders, but going forward it seems like a good bet, as it’s fairly painless to implement and frees me from CSS hoop jumping. I’d also tend to use it in conjunction with semantic markup, as another ‘layer’ of accessibility (you could also author your form in divs and add ARIA attributes to make it ‘accessible’, but that seems highly foolish to me).

1 year ago, www.towerofjade.com said:

It is certainly a matter of preference, but I find lists make sense because, semantically, that’s what a form is. In simple forms (e.g. search) a paragraph will suffice, but for longer forms, lists are an awesome tool. In addition to providing a nice wrapper (li) for each label/form control pair, the additional list element (ol or ul) gives you even more flexibility from a design standpoint. The added element makes it dead simple to lay out forms consistently and fine tune margins and the like.

Well, with that logic, perhaps you should look at using a Definition List (DL/DT/DD). That provides even more HTML elements, and they’re still semantically related. (A DT is the label of the DD.)

12 months ago, Anna Nowak said:

I always use fieldset, legend, and label for forms. I usually use div for grouping but I really like the idea of using lists. I think I am going to use them from now on. By the way, it’s surprising how few people know about label element and it’s for attribute and what it does for all users. Great article, thanks.