<form action="/foo" method="post">
    <!-- other form fields -->
    <input type="submit" value="Send data" />
</form>

…and…

<form action="/foo" method="post">
    <!-- other form fields -->
    <button type="submit">
        Send data
    </button>
</form>

Apparently none. Both snippets look and act exactly the same way. And yet, there is a more subtle difference. The difference lies in the semantics and in the meaning of the two types of buttons. A <button> tag displays a button, that you can click with your mouse and can be placed almost anywhere on a page. That’s all. It doesn’t have a purpose.

An <input type=”submit” > on the other hand does a lot more. It’s a form element – can only appear in a form – and it has meaning attached to it. When you submit a form by clicking on such an button, the value of the button is being sent along with the values of all the other form elements to the server.

<form action="/foo" method="post">
    <input type="checkbox" name="item[]" value="1" id="item_1" /> <label for="item_1">First item</label>
    <input type="checkbox" name="item[]" value="2" id="item_2" /> <label for="item_2">Second item</label>
    <input type="checkbox" name="item[]" value="3" id="item_3" /> <label for="item_3">Third item</label>
    With selected: <input type="submit" name="delete" value="Delete" /> <input type="submit" name="archive" value="Move to archive" />
</form>

In this case it matters on which button the user clicks, so an input type=”submit” tag is the best choice. But when you have something like:

<form action="/foo" method="post">
    <input type="text" name="email" />
    <button type="submit">
        Subscribe to newsletter
    </button>
</form>

…it doesn’t! So here the button tag is best suited.

Usually, people use tables or other types of markup for setting up the FAQ page, but the proper way to code it is the long forgotten definition list. When it comes to semantics, this is the perfect choice. The questions in the FAQ represent the definition terms and their answers the definition data.

The proper xhtml code for the FAQ page should look like this…

<dl>
    <dt>How do I...?</dt>
    <dd>Just click the ... button!</dd>
    <dt>Are your sure?</dt>
    <dd>Positive!</dd>
</dl>

…of course, with more relevant data.

Improved FAQ

If you have a lot of questions, displaying them all to the user at once isn’t always such a good idea. If you have many items in your list, you can hide all the answers an only display them when the user clicks on the associated question. The proper way to do this is to hide the dds with Javascript, because if you hide them using CSS and display:none and the user turns off js in the browser, he will only be able to stare with increasing frustration at a list of questions with no visible answers.

Here are two javascript implementations, with two of the most popular javascript frameworks at this moment: prototype and jQuery that convert a regular definition list into a clickable one in a unobtrusive manner that degrades gracefully.

Prototype implementation (see working example):

Event.observe(
    window,
    'load',
    function() {
        $$( '.faq dd' ).each(
            function( item ) {
                item.hide();
            }
        );

        $$( '.faq dt' ).each(
            function( item ) {
                item.observe(
                    'click',
                    function( event ) {
                        Event.element( event ).next().toggle();
                    }
                );
            }
        );
    },
    true
);

jQuery implementation (see working example):

$( document ).ready(
    function() {
        $( '.faq dd' ).hide();
        $( '.faq dt' ).toggle(
            function() {
                $( this ).next().show();
            },
            function() {
                $( this ).next().hide();
            }
        );
    }
);

Another good idea is to let the user know that the definition terms are “clickable”, by adding the following rule to your CSS file:

.faq dt {
    cursor: hand;
}

Questions?

Proper use of labels

You can assign labels to text inputs or textareas by specifying the “for” attribute. Like so:

<label for="username">Enter your username</label>
<input type="text" name="username" id="username">

This will help screen readers and other software designed to help impaired people surf the web to correctly interpret your code and make the right associations between labels and textfields. For instance, the following piece of code displays a table row with some form tags in it:

<tr>
	<td>
		Enter your username
	</td>
	<td>
		<input type="text" name="username" id="username" />
	</td>
</tr>

For a normal visitor, this is very simple to understand because the “Enter your username” text and the username textfield are on the same line. But for a blind person that uses a screen reader, this will not be displayed at all. And the screen reader must decide witch text goes with what textfield.

On this example, I believe that most screen readers will make the right connection between text and textfield, but if the html code becomes a little more complicated (ie. more text or other tags) I sure that the screen reader will fail to make the right assumptions. But the use of labels can fix that.

Label’s accesskey

If you want to give your forms a cool “web2.0 style” functionality, you can specify the accesskey attribute for your labels. For example you can do something like:

<label for="username" accesskey="u">Enter your <strong>u</strong>sername</label>
<input type="text" name="username" id="username" />

…and when the user presses CTRL/ALT + u (depending on the browser) he’ll be taken directly to that textfield. Pretty neat.