Accessible form: how to position items and render it attractive?

We were left in great suspense, curious to see how our ugly duck, difficult to understand, is transformed into a beautiful swan… and now are you ready to follow me in this transformation process through the CSS code?

(x)HTML for completing our form

Before starting we have to add some more mark-up to our .html document:

thus take the example file we created two weeks ago, and start inserting the tag span inside each tag label which is direct child of the first <fieldset>, so that each tag span contains only the text and not the input field as follows.


<label for="nick"><span>Nickname:</span><input id="nick" type="text" /> </label>

Entering in tag fieldsets children of the main fieldset (which we have used for the radio-buttons and the check-boxes) instead you still have to add the tag span and enclose the text contained by the tag legend, and group together the various choices (all labels) inside a paragraph tag <p>: let’s see an example.


<fieldset>

<legend><span>Sex:</span></legend>

<p>

<label for="sex_m"><input type="radio" value="m" checked="checked" tabindex="3" />Male</label>

<label for="sex_f"><input type="radio" value="f" tabindex="3" />Female</label>

</p>

</fieldset>

In the end you should obtain the code of this page: step by step you will understand the why of this additional mark-up. From now on, we will not touch the file html anymore: additional classes, id or other mark-up are not needed.

CSS: positioning the items

You must have noticed, in top of the page, the various recalls (through the import method) to the CSS style sheets, let’s see in what they consist in.

Reset

Usually, the first thing I do when I develop any new project, is recall a reset style sheet. This style sheet has the mission to eliminate any pre-set rule by the browser style sheet (for example the left edge and the “dots” of the item list <li> or, to remain within the topic, removes the border from the fieldset) having the priority on the latter.

These files are available for free and it’s possible to find many without major differences: search on Google. I use those of Yahoo, so I have brought some modifications (for example the font size of 62,5%, in order to have an easy correspondence between pixel measure and em: 12px = 1.2em).

It is important to remember that this file must be recalled first, since otherwise it would overwrite the previous rules.

Widths

The form is an item which should not contain a lot of text: the labels are usually brief, even wanting to insert brief descriptions that help the user for the compilation, the majority of times it is a length which varies from a single word to a brief phrase.

For this reason it is not necessary to set an excessive width, which could instead be counterproductive from the moment that the items would be positioned inside it almost by chance. For the same reasons, it is advisable to set a fixed width rather than leave to various items the freedom to re-size in accordance with the character size or the browser window.

Personally, if it is a form or a single column I avoid going beyond the 400px, and in this case I set a width of 380px directly to the fieldset, in a new .css file.


fieldset{ width:380px;}

Going deeper into our form, we find as direct children of the fieldset the various labels and other fieldsets and now you will take care of them, giving them the same style.

We can give to these tags a width of 370px, and a margin of 5px on each side, as follows.


label, fieldset fieldset{width:370px; margin:5px;}

Like this however the rule of the 5px of margins is not respected by the browsers, so it is  necessary to float the items through adding the following code.


float:left;

The labels

We have inserted the texts of our labels inside the tag spans, children of label, we know therefore that such texts are selectable like this: “label span”.

We also know that the tag legend inside the fieldset should have the same look of other labels and therefore we will give it the same style.

These labels should be floated on the left, have a width of 150px but align the text on the right, so that the text is not too distant from the input field, generating confusion.

Etichette a ridosso del campo input, allineate in alto

Vertically, the text is aligned automatically up top inside the item, so it’s better to add a padding-top which can align the text better compared to its input field.

In order to avoid that the input fields are so close to the text, we add a right margin to separate them.


label span, fieldset fieldset legend{float:left; width:150px; text-align:right; padding-top:5px;  margin-right:5px;}

It might be that in the general chaos, you were not aware: but if you use Firefox as a browser, you will encounter a problem with the tag legends, since some Firefox versions  refuse to recognize the width we have assigned.

If we continued in this direction, we’ll see also that, once we assign the style to the input fields and the paragraph tags, the latter would not align the same way as the former, because the tag legend would push them towards a new paragraph.

No fear: it is exactly this the reason why we have arranged the tag span inside the tag legend, in order to give it the style we desire.

Thus we modify the previous code as follows, by adding the tag span in the CSS.


label span, fieldset fieldset legend span{float:left; width:150px; text-align:right; padding-top:5px; margin-right:5px;}

Like this, Firefox works properly, but it’s Safari the tedious one: in fact the tag legend has, mysteriously, a height equal to zero (or however is not displayed properly), so the labels are not visible.

In order to find a remedy to this problem enough make a mix between the last two rows of code presented, that is give the style both to the tag fieldset legend, and the tag fieldset legend span.


label span,  fieldset fieldset legend,fieldset fieldset legend span{float:left; width:150px; padding-top:5px; text-align:right; margin-right:5px;}

Now the labels will be arranged exactly one under the other, all with the text aligned on the right. Even the input tags will be more or less in position, with the exception of what is contained by the tag <p>, thus the check-boxes and the radio-buttons: now we will exactly take care of this.

The inputs

To the fields input, textarea, select and to the item paragraph we will give the same style: a width of 200px and the floating on the left.


label input, label textarea, label select, fieldset fieldset p{width:200px; float:left}

No problems on Safari, on Firefox instead, the same tag legend creates new paragraph on the left, removing it from the alignment of the rest of the form.

In order to resolve the problem on Firefox, we float the tag <p> on the right, contrary to the others: thus we add to the previous code what follows.

 fieldset fieldset p{float:right;}

On Safari the result is pleasant, but on Firefox the space on the right of the legend remains white, pushing down the content of the tag p.

The best thing to do would be adding another property to the tag <p>: a negative margin on top, so that the content rises up.

fieldset fieldset p{float:right; margin-top:-.5em;}

Perfect, the problem on Firefox is resolved and the result is good also on IE8 and 7.

To be honest on IE7 there is the need to increase the negative margin, so that even here the first choice is positioned in the same height as the label. But given that this doesn’t undermine the comprehension and usability of the form, we can skip it.

Unfortunately on IE6 the problem is slightly more severe, since the paragraph is forced into a new line, positioning thus the various choices under the title “Sign up” and making sure that the form loses in coherence.

Bug IE6

How to fix it? Conditional comments? A prayer?

No, the solution is much simpler and the result is perfect, moreover it even corrects the problem on IE7! Enough adding a left margin to the paragraph, equal to the width of the label, and thus increasing the margin up top, given that there will be a new paragraph in any browser and therefore we have to modify its position again, we change then the rule on paragraphs in the following way.

fieldset fieldset p{float:right; margin:-2em 0 0 150px;}

The width of Check-boxes and Radio-buttons

Having assigned a width to the input fields, even the radio-buttons and the check-boxes will be affected: even preserving their natural aspect (circle and square respectively), on Safari they occupy the same space of the other input fields, that is the 200px of width, pushing the text of their label on the right.

Larghezza delle scelte multiple su Safari

For this reason we have to declare that the input fields inside a label, inside a paragraph item don’t have a definite width, but automatic.

Besides it will be then necessary to add a right margin to the same fields to avoid that relative texts are placed against them.

fieldset fieldset p label input{width:auto; margin-right:5px;}

Remarks: we could have used various declarations to distinguish radio-buttons and check-boxes from the ‘input text, that is choosing based on the value of the attribute type of the item input (attribute selector or selector[attr]). For example assigning the rule of the width only to input[type=text]. But having to add rules even for the values password, radio and checkbox, it is expected they are consistently similar (two by two) inside the same form, I found such an approach superfluous, notwithstanding the fact that IE6 does not support it.

Buttons

Now that we have positioned everything, the view of buttons “Cancel” and “Send” there, on the left, I have the impression they upset the balance of the general picture, making it a lot heavier on the left without giving a valid support to the right column.

So I would add a float on the right, and so you will notice that the buttons are too attached to the overhanging textarea and a little bit too close between one another: for this reason we will also add a margin of 5px.

button{float:right; margin:5px;}

The appearance of text and legend

Until now we haven’t used any font property, and you will notice that all texts have the same look while probably we might be  interested in the possibility of distinguishing the title of the form “Sign up” from the rest.

You could enclose it in a tag heading (h2, h3… according to the organization of your page – remember that you have loaded the reset.css and you have to give a style to these items); or otherwise you could decide to give the style directly to the tag legend.

In this second case, you should distinguish the first tag legend from the following ones, what is the difference? That this tag legend is direct child of first level of the fieldset single direct child of first level of the form.

But how is this genealogical tree translated?

The selector which indicates the direct children of first level of an item is “>”, thus the CSS declaration would be:

 form>fieldset>legend {font-size:150%;}

This selector is not supported by IE6. Now, if your website has more serious problems with this browser, virtuosity is useless  for a similar situation. In the opposite case  it would be enough to eliminate the selector “>” from the previous rule and add a declaration font-size:100% to the rule legend written previously.


form fieldset legend {font-size:150%;}

label span,  fieldset fieldset legend,fieldset fieldset legend span{float:left; width:150px; padding-top:5px; text-align:right; margin-right:5px; font-size:100%;}

You have to be careful that this rule is written in CSS after that which sets the text “Sign up” at 150%, as it has to have the priority.

CSS: rendering the form attractive

Taking a look at the result reached, you will surely be aware of how our form changed: it has a form, a solid base on which now we can indulge in colors, images or graphics.

We can for example add an edge or even a double background to the form, exploiting the tag form and the tag fieldset (various CSS techniques require the adding of mark-up for this scope, but in this case we already have the advantage of two tags that describe the same space).

With these few lines of code to be added (or rather, to be implemented in the code written until now), the result is already different. See with your own eyes.

form{background:#EEE url(fieldsetbg.png) repeat-y; width:380px; padding:10px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; border:1px solid #333;}
form *{ color:#666;}
form>fieldset>legend {font-size:150%; color:#000; font-weight:bold;}
label,fieldset fieldset{border-bottom:1px solid #999; padding:1em 0; margin:0;}
fieldset fieldset p label{border:none; padding:0;}
label:hover, fieldset fieldset:hover{background-color:#CCC;}
label input, label textarea, label select{border:2px solid #aaa; background:#fefefe url(inputbg.png) repeat-x bottom;}
label input:focus, label textarea:focus{border-color:#333; color:#000; background:#fff;}
textarea{height:10em;}
fieldset fieldset p label input{ border:none; background:none}
button{background:#000 url(buttonbg.png) repeat-x center; color:#fff;text-transform:uppercase; font-weight:bold; padding:3px 5px; border:2px solid #000;}
button:hover{ cursor:pointer; background-image:url(buttonhover.png); border-color:#CCC;}
form{background:#EEE url(fieldsetbg.png) repeat-y; width:380px; padding:10px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; border:1px solid #333;}form *{ color:#666;}form>fieldset>legend {font-size:150%; color:#000; font-weight:bold;}label,fieldset fieldset{border-bottom:1px solid #999; padding:1em 0; margin:0;}fieldset fieldset p label{border:none; padding:0;}label:hover, fieldset fieldset:hover{background-color:#CCC;}label input, label textarea, label select{border:2px solid #aaa; background:#fefefe url(inputbg.png) repeat-x bottom;}label input:focus, label textarea:focus{border-color:#333; color:#000; background:#fff;}textarea{height:10em;}fieldset fieldset p label input{ border:none; background:none}button{background:#000 url(buttonbg.png) repeat-x center; color:#fff;text-transform:uppercase; font-weight:bold; padding:3px 5px; border:2px solid #000;}button:hover{ cursor:pointer; background-image:url(buttonhover.png); border-color:#CCC;}

If we want, we could add a line of CSS3 (not yet supported by all browsers) to round off angles. Without resorting to javascript libraries, many users will see however the “rough edge” form… but being only an aesthetic habit I don’t think it’s worth it to make the page heavier with superfluous code. If you have a browser that supports rounded angles CSS3 you can view the result here.

Remark on buttons: while modifying the properties of the item button remember to always add the declaration “cursor:pointer;” otherwise the standard pointer of the mouse will be visible, that is the usual “arrow”.

Remark on radio-buttons and check-boxes: there’s the possibility to give a style even to these two elements, through javascript libraries, changing the appearance in my opinion in a very radical way, rendering recognition difficult and thus mining the usability of the form. You have to keep in mind always to remove the edges associated with various inputs, because otherwise the edges will act as an unpleasant framework to the items in all the versions of IE.

Considerations and expectations

It took us longer to say it than to do it, don’t you think?

Our form, which was already accessible since the previous article, now has also its items positioned in a pleasant and balanced way. We also saw the possibilities we have thanks to CSS to give it a good overall appearance with decorative elements and outlines.

We encountered problems with all of the browsers but we resolved them (IE didn’t behave much worse than the rest); our code is standard, clean and optimized: we haven’t used a single class or id and we saw the power of CSS type selectors and descendants.

But it doesn’t all end here! Eh no… because all we have now is a nice statuette that does absolutely nothing. The next time we will see  how to implement the javascript field validation control, in an accessible and usable way.

Returning to today’s topic… how did your form come out? Would you ever have thought of being able to do all this without the help of div, class, id and the like?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Passionate and professional web-designer, she knows deeply (x)HTML/CSS, loves to experiment PHP & js scripts and is always ready to learn new practices and techniques. She prefers a sober design for web-sites, with particular attention on usability and accessibility, moreover on what is under the shell: the code, strictly standard.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

6 comments

  1. MUHAMMAD Junaid

Trackback e pingback

  1. Accessible form: how to position items and render it attractive? | Your Inspiration Web « MikyPedia
    [...] via Accessible form: how to position items and render it attractive? | Your Inspiration Web. [...]
  2. florystyka
    Check this out... Here are some of the sites we recommend for our visitors...

Leave a Reply

Current month ye@r day *