The future of forms in CMSMS

[nils73]

Hi everybody,

when I started working with CMSMS I really liked the idea of having {formstart} and other form-elements to make form-building much more simple. But then I started digging deeper into webstandards and accessibility and found some other guys who shared their knowledge with me. One example is the use of l elements in association with input-elements. There are various ways of implementing this, for example:

Code: Select all

<label for="newsletter">Newsletter: 
  <input type="text" id="newsletter" name="newsletter" />
</label>

but it might be as well

Code: Select all

<div class="inputText"
  <label for="newsletter">Newsletter: </label>
  <input type="text" id="newsletter" name="newsletter">
</div>

There are lots of differences:

• first example is XHTML
• second example is HTML
• first example wraps label around input
• second example has label before input, both wrapped in a div

I left input-type "checkbox" unmentioned because it is special. Same applies to other types, such as submit or textareas. What I am trying to explain: We need some major changes in handling forms in templates - maybe it would be better to abandon proprietary CMSMS-form-tags and get back to templates made of pure HTML along with some smarty-syntax.

This post was on my mind for quite a long time and I wanted to share it with you to get to know what you are thinking. Maybe someone has made up his mind about this as well and has come up with a better idea or a solution to this.

Regards,
Nils

[pgoneill]

I would argue that the first example is semantically incorrect.  It's technically valid, yes, but semantically it doesn't make sense.  I do something closer to option 2 with my forms, typically, which gives a range of styling options and good accessiblity:

Code: Select all

<fieldset>
  <legend>Form Fields</legend>
  <div class="text clearfix">
    <label for="1">Label</label> <input id="1" name="1" type="text" />
  </div>
  <div class="radios clearfix">
    <label for="r1">Radio 1</label> <input id="r1" name="radio" type="radio" />
    <label for="r2">Radio 2</label> <input id="r2" name="radio" type="radio" />
    <label for="r3">Radio 3</label> <input id="r3" name="radio" type="radio" />
  </div>
  <div class="text clearfix">
    <label for="block">Label</label> <textarea id="block" name="textblock"></textarea>
  </div>
</fieldset>

Remember to use fieldsets to help users as well.

[nils73]

I would argue that the first example is semantically incorrect.  It's technically valid, yes, but semantically it doesn't make sense.  I do something closer to option 2 with my forms, typically, which gives a range of styling options and good accessiblity:

That is why I chose two completely different examples. And there are cases where example 1 might be more appropriate (in fact we did a website for a mission for the blind as an intranet where users of assistive technologies told us to use this example). It is all about how CMSMS deals with forms. Right now you have no choice.

Remember to use fieldsets to help users as well.

Thank you for pointing that out. You are absolutely right! But only where fieldsets and legends make sense ... and never mark up a single search-form with fieldset!

I wonder if this topic is being read by other developers ...

Regards
Nils