Wickham's HTML & CSS tutorial

Forms

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

1a green icon The basic elements of a form are windows for the insertion of a name, email address and message box together with a submit (send) button with other options such as a select box, check boxes, radio button choices and a reset button.

The reason for requesting details can be shown here above the form windows.

Note: the email address as the form action is not a real one, so please don't submit any details.

The code is:-
<form action="mailto:your-name@hotmail.com" method="post">
<ul style="list-style-type: none;">
<li>Name:</li>
<li><input type="text" name="name" size="30"></li>
<li>email:</li>
<li><input type="text" name="email" size="30"></li>
<li>Message:</li>
<li><textarea name="comment" rows="6" cols="40">Type your message here></textarea></li>
<li>Select product:</li>
<li><select multiple="multiple" size="3" name="component-select">
<option selected="selected" value="Component_1">Component 1</option>
<option selected="selected" value="Component_2">Component 2</option>
<option value="Component_3">Component 3</option>
<option value="Component_4">Component 4</option>
</select></li>
<li><input type="checkbox" name="Extras" value="Manual">Service Manual
<input type="checkbox" name="Extras" value="Photos">Photographs
<input type="checkbox" name="Extras" value="Carry_case">Carrying case</li>
<li><input type="radio" name="sex" value="Male" checked="checked">Male
<input type="radio" name="sex" value="Female">Female
<input type="radio" name="sex" value="Child">Child</li>
<li><input type="submit" value="Send"> <input type="reset"></li>
</ul>
</form>

I have also put in some spaces with   and <li> </li> in some places to create extra space.

Words in fields must be linked with an underscore _.

Use radio buttons when you only want one of several choices to be accepted. Use check boxes or a select box with a drop-down list where several choices may be chosen. If you want one of the radio buttons preselected, use checked="checked" inside one of the radio button input codes:-
<input type="radio" checked="checked" name="sex" value="Male">

The first two items in the Select product list are blue because they have been set as pre-selected, in other words normally "must-have" items, but they can be deselected by the viewer if not wanted. The viewer must hold the control key down while clicking a selection if more than one item is required.

The reset button is not really necessary. It merely resets all windows to a blank state, but if the viewer makes a mistake it can be deleted with a right click mouse button instead if there is no reset button.

When someone enters data and clicks the send button, a popup appears reminding him that he will be revealing his email address and asking whether he wants to continue.
After clicking OK to confirm that he wants to continue, the computer's default email client opens.
Another popup appears stating that a program is trying to automatically send an email, do you want to allow this?
After clicking Yes, the email is either sent or waits to be sent, depending on the email client's configuration.
When the email is received by the website owner, it will be a blank email with an attachment if sent from IE6 called POSTDATA.ATT which will state the data entries like this:-
name=John+Somebody&email=theiremailaddress@hotmail.com&comment=Someone%27s+comment+and+message +text&component-select=Component_1_b&component-select=Component_4&Extras=Photos&Extras=Carry_case&sex=Child
Note that it puts + between all words and converts ' to %27 and does other similar things which may make interpretation of the email difficult unless you set up a program especially to convert form replies into a database.
When the form is sent from Firefox the email text area contains the data.

The name="..." code is used for more advanced data processing, like sending data to a database or direct from the form using PHP instead of via an email client.

The whole form can be placed in a div box for better positioning if required or you can use a table within the form tags and place each title and input field in separate cells instead of using ul and li tags.

HTML has been used for this page but if you use XHTML it appears that XHTML is much stricter in the coding of forms than HTML. In HTML it is possible to use the <br> tag to put the various elements on different lines but the validator does not allow the <br/> tag in XHTML unless it is within a <p> tag. <li> tags have been used here as in XHTML and to avoid the list marker, a style of style="list-style-type: none;" has been used in the <ul> tag.
Additionally, although HTML/XHTML normally requires id in lieu of name, name does validate in a form. Using id instead of name disables the radio buttons for sex in IE so name has to be used in that instance.

If you just code your email address as it normally is, like I have shown in the mailto code above, you will get lots of spam as spammers use computers to trawl websites for the mailto code. Use javascript to break up the address so that computer programs won't harvest it. See Email addresses on the web.

If you use a form with a mailto link to your email address (with either post or get as the method) the person sending the email from your form can only do it from his own computer and email client; he can't do it from a webmail account like Hotmail Live or Gmail or an internet cafe or a friend's computer as it has to open his email client (unless he changes the return email address on his friend's email client which his friend might not like). If you use a PHP email form your email address is hidden in the PHP code and a viewer can send you an email without using an email client; it goes straight from the web page. See the items below.

Fieldset and Legend

The fieldset tag is used to separate a form from other forms or page content and also aids accessibility for disabled persons. By default it draws a border around the form but this can be deleted by adding this style:- fieldset { border: none; } or it can be styled differently, such as color or width of the border.

The Legend tag makes a caption for the form which appears in the top fieldset border near the top left side, although this position can be moved with a style such as legend { margin-left: 200px; }.

The code for the styles are as below (the legend has been left in its default position):-

fieldset { border: 4px solid #aaa; padding: 10px; }
legend { color: #996633; }

The code for the html markup is:-

<form action="mailto:your-name@hotmail.com" method="post">
<fieldset>
<legend>Form title</legend>
<ul style="list-style-type: none;">
<li>Name:</li>
<li><input type="text" name="name" size="30"></li>
<li> </li>
<li>email:</li>
<li><input type="text" name="email" size="30"></li>
<li> </li>
<li><input type="submit" value="Send"></li>
</ul>
</fieldset>
</form>

The fieldset tag can assist in getting error-free validation with certain doctypes like XHTML Strict which will raise an error:-
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
unless the input, textarea and select tags are inside one of the named tags. In the example I have used ul and li tags to enclose the input tags as I wanted to code as a list and these also prevent a validation error, but if your form structure doesn't use a named tag for each input, textarea or select tag then enclosing all of them in a fieldset tag will stop the validation error.

An error is raised when validating HTML 4.01 if the fieldset tag is used without a legend tag but XHTML validation doesn't raise the error for a missing legend tag.

The label tag

Labels can be added to enclose the description and the following input box, textarea, radio button or checkbox to define the tags. A label is read by screen readers for people with bad eyesight and provides a usability improvement for mouse users, because if the user clicks on the text description within the label element, it toggles the control; in other words for text input boxes or textarea boxes it will toggle the cursor inside the box. It will move from one radio button to another if used for radio buttons by clicking the text and for checkboxes it will check the box by clicking the text, both of which may be easier for a disabled person than clicking the small radio button or checkbox itself.

The code for the styles is:-

#labelexample label { display: block; width: 130px; padding: 5px 0; cursor: pointer; }
#labelexample .submitlabel { width: 70px; cursor: pointer; }
#labelexample .submit { cursor: pointer; }

The code for the html markup is:-

<form id="labelexample" action="mailto:your-name@hotmail.com" method="post">
<fieldset>
<legend>Label example</legend>
<label for="email">Your Email:
<input id="email" name="email" type="text" size="25">
</label>
<label for="message">Message:
<textarea id="message" name="message" rows="3" cols="40"></textarea>
</label>
<label for="size1">Size required:<br>
<input type="radio" id="size1" name="size" value="large"> Large
</label>
<label for="size2">
<input type="radio" id="size2" name="size" value="small"> Small
</label>
<label for="delivery">
<input type="checkbox" id="delivery" name="delivery" value="next_day_delivery"> Next day delivery
</label>
<label for="submit1" class="submitlabel">
<input id="submit1" class="submit" type="submit" value="Submit">
</label>
</fieldset>
</form>

The for="..." attribute of the <label> tag should be equal to the id attribute of the related element to connect them.

The label tag for input boxes and textarea boxes should enclose the text input or textarea tag and the description which should precede the input or textarea to enable a screen reader to identify the correct tag. However, for radio buttons and checkboxes the description should follow the radio or checkbox input tag and the label tag should enclose the description and the tag.

Labels can be applied to select tags in the same way.

Remember that if you code a label tag with either a float or display: block it will become a block element and the click function will work anywhere within the label area, not just over the text. It a good idea to give a label an appropriate width especially for the submit button because without a width you can click to change focus or submit the form by clicking anywhere across the width of the page or containing element which could make someone submit accidentally. The cursor changes in IE7 from a vertical line to an arrow where the focus is, which identifies the width of the label. Because this doesn't work in Firefox I have coded cursor: pointer for the label tags and the submit input tag.

The accesskey attribute

The accesskey attribute specifies a keyboard shortcut to access an element; you define a character for each accesskey and it shows as an underlined character so that when you use ALT + the character the mouse cursor will be taken there. It works in IE7 and Safari but Firefox uses Shift + Alt + character. In Opera you have to press Shift + Esc to bring up a list of accesskeys on the page and then click one of the characters on the keyboard (not in the list). Google Chrome apparently operates accesskey in version 3 (not released yet) but at the present time (27/07/2009) I only have version 2 where accesskey does not work. The accesskey tag is to help people who cannot or don't like using a mouse but use only a keyboard.

The code for the styles is:-

#access label { display: block; width: 90px; padding: 5px 0; cursor: pointer; }
#access .submitlabel { width: 70px; cursor: pointer; }
#access .submit { cursor: pointer; }
#access .underline { text-decoration: underline; }

The code for the html markup is:-

<form id="access" action="mailto:your-name@hotmail.com" method="post">
<fieldset>
<legend>Access Key example</legend>
<label accesskey="N" for="yourname">Your <span class="underline">N</span>ame:
<input id="yourname" name="yourname" type="text" size="25">
</label>
<label accesskey="L" for="size3">
Size required:<br>
<input type="radio" id="size3" name="yoursize" value="large"> <span class="underline">L</span>arge
</label>
<label accesskey="S" for="size4">
<input type="radio" id="size4" name="yoursize" value="small"> <span class="underline">S</span>mall
</label>
<label class="submitlabel">
<input class="submit" type="submit" value="Submit">
</label>
</fieldset>
</form>

Tutorials state that each defined accesskey character is contained inside <u>...</u> tags like this:-

<label accesskey="N" for="yourname">Your <u>N</u>ame: </label>

but the u element is deprecated and it won't validate in Strict doctypes, however you can use a class like .underline { text-decoration: underline; } in a stylesheet and span tags with the class instead as I have done
Your <span class="underline">N</span>ame: .

The accesskey attribute is shown above inside <label>...</label> tags but it can be used inside other tags.

Semantics for forms

There are useful guidelines for the semantic coding of forms on the websemantics website. Some of my examples are not fully compliant as I want to show the basic codes without adding too much extra detail.

When blind people use screen readers they need to move from the label to the input box immediately. With vertically orientated forms this isn't usually a problem, but if a form has several input box descriptions horizontally and then the input boxes in the next row of a table or a lower line of divs or list elements the screen reader will not read the input box after the description. Radio tags should be vertical. Descriptions should be on the left or immediately above and immediately precede the input boxes except that the description for radio tags and checkboxes should be on the right. The following form has a label tag and an input box inside it:-

In the form above the size="..." has been deleted and a class with a width given to each input box. I found that most browsers give a tiny different width to the size which made it difficult to line up the right edges of the input boxes on each row, while Safari had very much greater widths for size="..." so the classes with widths in px are more accurate.

The code for the styles is:-

fieldset#semantic { width: 600px; border: 4px solid #aaa; padding: 10px; }
#semantic legend { font-weight: bold; margin-left: 5px; padding: 0 5px; color: #335500; }
#semantic p { margin: 5px 10px; }
#semantic label { float: left; padding: 10px; cursor: pointer; }
#semantic select, #semantic input { display: block; }
.width1, .width11 { width: 40px; }
.width2, .width12 { width: 250px; }
.width3, .width13 { width: 250px; }
.width4, .width14 { width: 580px; }
.width5, .width15 { width: 200px; }
.width6, .width16 { width: 200px; }
.width7, .width17 { width: 140px; }
.width8, .width18 { width: 280px; }
.width9, .width19 { width: 280px; }
.req { color: #ff0000; padding: 0 5px; }
#semantic label.under50, #semantic label.over50 { width: 120px; clear: both; padding: 5px 0; }
#semantic input#under50, #semantic input#over50 { display: inline; }
#semantic .submitlabel { width: 70px; clear: both; cursor: pointer; }
#semantic .submit { cursor: pointer; }

The code for the html markup is:-

<form action="mailto:your-name@hotmail.com" method="post">
<fieldset id="semantic">
<legend>Personal Details</legend>
<p>Fields marked <strong title="Required" class="req">*</strong> are required for submission</p>
<label for="title" class="width1">Title<strong title="Required" class="req">*</strong>
<select id="title" name="title">
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="ms">Ms</option>
</select>
</label>
<label for="firstname" class="width2">First Name(s)<strong title="Required" class="req">*</strong><input class="width12" type="text" id="firstname" name="firstname"></label>
<label for="surname" class="width3">Surname<strong title="Required" class="req">*</strong><input class="width13" type="text" id="surname" name="surname"></label>
<label for="company" class="width4">Company Name<strong title="Required" class="req">*</strong><input class="width14" type="text" id="company" name="company"></label>
<label for="address" class="width4">Address<strong title="Required" class="req">*</strong><input class="width14" type="text" id="address" name="address"></label>
<label for="city" class="width5">City<strong title="Required" class="req">*</strong><input class="width15" type="text" id="city" name="city"></label>
<label for="state" class="width6">State/Province<strong title="Required" class="req">*</strong><input class="width16" type="text" id="state" name="state"></label>
<label for="zip" class="width7">Postal/Zip Code<strong title="Required" class="req">*</strong><input class="width17" type="text" id="zip" name="zip"></label>
<label for="country" class="width8">Country<strong title="Required" class="req">*</strong><input class="width18" type="text" id="country" name="country"></label>
<label for="tel" class="width9">Telephone Code<strong title="Required" class="req">*</strong><input class="width19" type="text" id="tel" name="tel"></label>
<label for="under50" class="under50"><input type="radio" id="under50" name="age" title="under50" checked="checked"> Age under 50</label>
<label for="over50" class="over50"><input type="radio" id="over50" name="age" title="over50"> Age over 50</label>
<label for="submit" class="submitlabel"><input class="submit" id="submit" type="submit" value="Submit"></label>
</fieldset>
</form>

Using the Tab key instead of the mouse to enter data in a form

The tab key is used by people who don't use a mouse (for instance disabled people and those with bad eyesight who use a screen reader) to enter data in a form. When you have used the tab key to highlight a checkbox, most browsers require you to use the spacebar to select it. When you have used the tab key to highlight a select box option, use the up/down keys to select one. Browsers have different combinations of keys to select more than one option, so check the procedure with your browser. IE and Firefox need you to use the up/down keys to select one option, then to use Shift+up/down to select several options.

After selecting a radio button with the tab key, the up/down or left/right keys are used to toggle between radio buttons. Use the Enter key after tabbing to the Submit button.

A few browsers use Shift+Tab to go to the previous item, so check your browser's key combination.

Tabindex to control tab order

If you have a form that has some input boxes one below the other and also some side by side, the tab key may follow an order that is unusual, for instance First Name, Message, then Last Name. You can add tabindex="..." with a number into the input boxes (text, checkbox, radio and submit), textarea and select boxes to ensure that the tab key goes from one to the next in a logical order. It won't change the order for options within a select tag but will follow the numerical order between one tag and another.

The form above has a left div and a right div and the tab key without tabindex would move down the left div including the Submit button and then down the right div which would be confusing because the Submit button must be last and you might want the Message box to be reached before the radio buttons, but the addition of tabindex controls the tab key order.

You only need tabindex for the first radio tag as the up/down or left/right keys are used to toggle between them.

The code for the html markup is:-

<form id="tabindexexample" action="mailto:your-name@hotmail.com" method="post">
<fieldset>
<legend>Tabindex example</legend>
<div id="left">
<label for="tabname">Your Name:
<input id="tabname" name="tabname" type="text" size="25" tabindex="1">
</label>
<label for="tabemail">Your Email:
<input id="tabemail" name="tabemail" type="text" size="25" tabindex="2">
</label>
<label for="size5">Size required:<br>
<input type="radio" id="size5" name="tabsize" value="large" tabindex="4"> Large
</label>
<label for="size6">
<input type="radio" id="size6" name="tabsize" value="small"> Small
</label>
<label for="tabsubmit" class="submitlabel">
<input id="tabsubmit" class="submit" type="submit" value="Submit" tabindex="6">
</label>
</div>
<div id="right">
<label for="tabmessage">Message:
<textarea id="tabmessage" name="tabmessage" rows="3" cols="40" tabindex="3"></textarea>
</label>
<label for="delivery2"><input type="checkbox" id="delivery2" name="delivery2" value="next_day_delivery" tabindex="5"> Next day delivery
</label>
</div>
</fieldset>
</form>

See the head section of this page for the styles for the tabindex example.

Another tabindex tutorial is on the codetutorial.com website.

Form to send email without using viewer's email client

1b green icon For a form to send email without using viewer's email client, see Email direct from form.

Processing forms to a database instead of to an email address

2 green icon If you want to avoid form data being sent to your email address you can set up a MySQL database and have PHP script send the data to it where it can be immediately shown in various table formats. See PHP to MySQL Tutorial.

Forms generally, processing data for email and styling forms

The input, textarea and select tags must be inside one of the preferred tags or there will be a validation error with certain doctypes like XHTML Strict which will raise an error like this:-
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
but I have found that if contained in a list with ul and li tags the error is not raised. If your form structure doesn't use one of the named tags for each input, textarea or select tag then enclosing all of them in a fieldset tag will stop the validation error.

More information on coding forms can be found at HTML Goodies.

Although the above link states that mailto as the form action to send via an email client is no longer supported in IE, I have found that it does still work. Alternatives are given.

If you want the emails that you receive to include a subject line then use the following code:-

Processing of form data can be achieved by using Form Processor Pro. or FormMail. See also scriptarchive.com regarding FormMail.

It is possible to add styles to the various parts of a form. Some examples can be found at 456 Berea Street, Styled multiple select boxes, Web page design, and at gutfelt.ch

Generally, normal CSS rules apply. You can add styles in a stylesheet or within style tags in the head section like:-
input { color: #cccccc; border: 0; background-color: #e9e9e2; font-size: large; width: 70px; }
(as an element it does not need # for id or . for class) or you can make a class:-
.inputtime { color: #cccccc; border: 0; background-color: #e9e9e2; font-size: large; width: 70px; }
and put the class in the body html:-
<input class="inputtime" size="5">
or you can put the styles entirely in the body html as:-
<input style="color: #cccccc; border: 0; background-color: #e9e9e2; font-size: large; width: 70px;" size="5">

Image submit button

You can use an image instead of the default gray button with this code:-

It doesn't need value="Submit" so the image needs to show that it is the submit button. The type="image" automatically makes the image work as a submit button.

You should not use type="image" for a reset button because it will submit instead of resetting the form, so you have to use a normal image link with javascript:-

Further information can be seen at irt.org

Accessibility and security

The forms above only show the basic codes and accessibility aids have been ignored. Additional codes to help people with poor eyesight or those unable to use a mouse can be found on these sites:-
webSemantics; Accessify.com; Webaim.com and Devarticles.com.

Additional codes to assist security can be found on thesitewizard.

Introduction to PHP forms

Introduction to PHP

Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

top | Sitemap | prev | next