1.02 Forms

REFERENCES

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form http://code.tutsplus.com/tutorials/20-html-forms-best-practices-for-beginners--net-6593

Validate on both the Client and Server

Validation is the bane of forms. But it's best to check the input both on the client and on the server; validating in the browser allows you to warn the user of mistakes before they submit the form, which requires one less transaction with the server. However, always be sure to validate on the server as well, for security's sake.

Give your Users Smart Warnings

Always assign complete attributes

<label for="live">Living?</label>
<input name="live" id="live" type="checkbox" checked="checked" disabled="disabled" />

Define accesskey when appropriate

The accesskey attribute creates a keyboard shortcut that will focus that input: the shortcut is Alt (Option) + the accesskey value. Obviously, you wouldn't put an accesskey on every input, but it would certainly be useful some.

<label for="search"><span class="shortcut">S</span>earch</label>
<input type="text" name="s" id="search" accesskey="s" />

Aid your visitors with extra info:

Avoid a form in a pop-up window

Use “required” accordingly

Name your Inputs

Use optgroup to categorize options

If you have a lot of options in a select, it's usually better to group them into optgroups. is a little-known element that will indent options and give them a title. Note that the label attribute is required.

<select>
<optgroup label="USA">
    <option>Alabama</option>
    <option>Alaska</option>
    <option>Arizona</option>
</optgroup>
<optgroup label="Canada">
    <option>Alberta</option>
    <option>British Columbia</option>
    <option>Manitoba</option>
</optgroup>
</select>

Forms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc est ante, viverra et urna egestas, dictum mollis velit. Sed enim leo, varius id sagittis ac, interdum id lacus. Integer porta ac dui vel tincidunt. In non nibh congue, blandit diam at, rhoncus lacus. Phasellus vestibulum tellus ac massa vestibulum aliquam.

<!-- Code Template -->
<label for="fieldName">email</label>
<input type="text" id="fieldName" name="name" value="" />

Email Field

However, HTML5 defines 13 new field types, and for reasons that will become clear in a moment, there is no reason not to start using them.

<!-- Code Template -->
<label for="fieldEmail">email</label>
<input type="email" id="fieldEmail" name="email" value="" />

URL Field

<!-- Code Template -->
<label for="fieldEmail">email</label>
<input type="email" id="fieldEmail" name="email" value="" />