<html> Forms And Form Elements

During the internets infancy html’s humble beginings were recieve–only, meaning that the user could recieve data but they were not expected to send data.
However this was soon seen as a deficiency of html with user agents now being run in graphical enviroments (GUI Graphic User Interface) with rich user interfaces.

So creating a similar type of interface to allow users to send data was a natural and obvious next step.
On the web today forms are comprised of a complex yet very flexible framework that afford users basic controls, which can be used to submit data or to provide input to scripts.
On this page we wil look at the basics of html forms and form elements.

In simple terms html forms allow you to place a handful of GUI controls on the user agent to allow users to enter data.
Using these controls the user can input text, make a selection fo some predefined choices in a list using a check box or radio button.
After any data has been entered into a field, a special control is iused to pass the data to a program that can do something with the data.
These types of programs are usually referred to as form handlers simple because they "handle" the form data.

A form is inserted into an document by placing form fields within <form> tags.
The form and any of the other form elements tags can be formatted just like any other html element.
They can also be placed within in any html element that is capable of holding other elements such as tables, paragraphs etc.

The forms action attribute defines the URL where the data should be sent to be "handled".
Although it is possible to use any URL, the destination should be a script or anopther construct that is capable of correctly interpreting the data and doing somethign useful with it too.
The second form attribute method, controls how the data is sent to the handler, the attribute supports two values these are get and post, each value corresponds to the HTTP protocol of the same name.

You can find more information at the W3Schools web site on the form tags.

HTTP GET

The network protocol HTTP GET attaches data to the URL text to pass the data to the target, as an example you may have seen URL’s like the one below.

The data in the URL appears after the question mark and is in name/value pairs, in the example URL above the name id has the value 12345 and the name data has the value bingo.

However because this method passes the data as the text of the URL this makes it easy to implement, you can pass data by simply adding the appropriate text to the URL, used to call the data handler.
Unfortunately GET is also inherently insecure and should never use it to send confidential data, because the data is easily sniffed by hackers and also clearly visible in the user agent.

HTTP POST

The network protocol HTTP POST passes data encoded in the HTTP data stream, so it is not visible to the user, and is a more secure method to pass data.
This method may be harder to implement, but thankfully html forms and other web technologies make passing data via POST a simple task.

The <form> tag has a few other attributes which are listed in the table below.

Although you may not need to use these attributes in simple forms, they can still be very useful.
The attributes accept, accept–charset, and enctype are all valuable for processing data that is none textual or international.
The id attribute is used to uniquely identify a form in a document, especially if there is more than one form in the document.

The <label> tag is used to define textual labels for form fields, and has the following format.

The <label> tags role is accessibility–related, most users can rely on the forms layout to detrmine what labels go with whatever buttons or fields are present in the form.
However if the user is visually impaired or the user agent does not have a visual component, the visual layout of the form cannot be relied upon to match fields/elements and labels.
The <label> tags for attribute is used to ensure that the user agent can match fields/elements with their labels.
The code example below defines a label for a text input box.
To see the example rendered in a browser use this link label example.

<p>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname" value=""
size="30" maxlength="40" />
</p>

You can find more information at the W3Schools web site on the label tag.

The most used of the html forms is the simple text box/field, the field allows the user to input small pieces of text such as names, addresses, even search terms etc.
The code example below illustrates the text input boxes format.

Although most of the attributes used in the code example above are not required, they represent the minimum number of attributes that you should use with your text boxes.
The code example below has two text boxes the first, will accept a first name 10 characters long and accepts a maximum of 20 characters and has the intial value of Bart.
The second text box will accept a surname 20 characters long, and accepts a maximum of 30 characters and has the initial value of Simpson.

<p>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" value="Bart"
size="10" maxlength="20" /><br />
<label for="sname">Surname Name:</label>
<input type="text" name="sname" id="sname" value="Simpson"
size="20" maxlength="30" />
</p>

The code example below below defines a text input box that will accept an email address, that is 40 characters wide and accepts a maximum of 40 characters, and it has the initial value of bart@simpsons.foxtv.com
To see the code examples rendered in a browser use this link text box/field example.

<p>
<label for="email">Email Address:"</label>
<input type="text" name="email" id="email" value="bart@simpson.foxtv.com"
size="40" maxlength="40" />
</p>

With the common form field there are two ways to display information, but at the same time not allow the user to modify or change the data.
This can be achieved by either setting the field to readonly or disabled.

The readonly attribute can be applied to text fields to stop the user from editing the data contained in the text field.
The code example below illustrates the readonly attribute being applied to a text field.

The disabled attribute can be applied to a text field to disable the field, which usually causes the text box to gray out, in a manner consistent with the platforms method of displaying disabled controls so the user cannot use the text box or control.
The code example below illustrates the disabled attribute being applied to a text field.

The two attributes make the text boxes look quite similar on screen but there are subtle differences, the text field with the readonly attribute applied can be selected, but the contents cannot be edited.
The text field that has the disabled attribute applied cannot even be selected.
To see examples of the code above rendered in a browser use this link readonly & disabled attribute example.

The password input box is similar to the regular text box/field, but instead of displaying the data the user has entered, it displays asterisks or dots to visually obscure the data.
The code example below is for a password box/field that accepts a 15 characters and a maximum of 20 characters.
To see the example rendered in a browser use this link password box example.

<p>
<label for="pword">Password:</label>
<input type="password" name="pword" id="pword" value=" "
size="15" maxlength="20" />
</p>

I have created an example web page to demonstrate that the characters entered into a password box/field are only visually obscured, the page uses a JavaScript to obtain the value of the password box/field and then display that value in another text box/field.
The JavaScript does absolutely nothing with the characters entered into the password box/field, it just grabs the value and then puts it into regular text box, that does not obscure the characters.
To see the example page use this link password lab.

Radio buttons are usually groups of small round buttons that allow the user to choosen one option from a group of options.
The button gets the name "radio" from the way that old fashioned radios were tuned, by pressing one of a group of buttons that was tuned to a preset station causing the rest of the buttons to be reset to the "out" position.
Form radio buttons behave in the same manner, and only one button in a group can be set, causing the rest of the buttons in the group to be deselected.
The code example below illustrates the radio button field.

The value attribute defines what value is returned to the handler if the button is selected, and should be unique between buttons in the same group.
The code example below defines a group of radio buttons to select a favourite Simpsons character.
To see the code example below rendered in a browser use this link radio button example.

<p>
Favourite Simpsons Character:<br />
<input type="radio" name="character" value="Homer" />Homer
<input type="radio" name="character" value="Marge" />Marge
<input type="radio" name="character" value="Bart" />Bart
<input type="radio" name="character" value="Lisa" />Lisa
<input type="radio" name="character" value="Maggie" />Maggie
</p>

If you want one of the "radio" buttons in the group to be selected by default, you can use the checked attribute and apply it to tag of the appropriate button.
The code example below illustrates how to apply the checked attribute to a "radio" button.

The radio button on its own does not do much as you can see in the example above, unless it is linked to a script like the radio buttons in this web page simpsons characters full names.

The check box is a small square box, these are used to select non–mutually exclusive choices.
The name of the box is derived from the fact that when the box is selected, it will display a checkmark (or more commonly an "X") in the box, just like the check boxes in paper lists.
The check boxes format is illustrated in the code example below.

The checked attribute can be used to preselect a check box in a form, just like the radio button.
Also the value attribute is used as the value of the check box if selected, when no value is given to a check box it is then given the value of "on".
The code example below has two check boxes that allow the user to select whether to recieve a newsletter or not.
To see the code example rendered in a browser use this link check box example.

<p>
<input type="checkbox" name="sendnews" checked="checked"
value="sendMail" >Send me the newsletter.
<input type="checkbox" name="nonews" value="noMail" />No thanks.
</p>

The check box on its own does not do anything as the example above demonstrates unless it is linked to a script like this check box example.

The list box allows the user to select one or more textual items from a list.
The list is presented as either a drop–down list so that the user can scroll to thier choice or in its entirety.
A list box is implemented using the <select> and the <option> tags, and optionally if required the <optgroup> tag.
The <select> tag is used to provide the "container" for the list, the code example below illustrates the tags format.

The <option> tag is used to define the items for the list, each item has its own <option> tag.
The code example below illustrates the format of the <option> tag.

<option>Sunday
<option>Monday
<option>Tuesday
<option>Wednesday
<option>Thursday
<option>Friday
<option>Saturday

Some times you might need to group options of a list together for clarity, for this you can use the <optgroup> tag.
The <optgroup> tag encapsulates the items in a group of items in a larger list.
The code example below defines a list made up of two groups which are Weekend and Weekdays.
I have created a page there are two examples of the list box the first example uses the code example below and the second illustrates the drop down list.
To see the page rendered in a browser use this link list box example.

<optgroup label="Weekend">
<option>Sunday
<option>Saturday
</optgroup>
<optgroup label="Weekdays">
<option>Monday
<option>Tuesday
<option>Wednesday
<option>Thursday
<option>Friday
</optgroup>

The list box on its own does not do much as the example above demonstrates unlkess it is linked to a script like this list box example.

The <textarea> tag is used to contain large pieces of text, it uses a multiline text box for input and can accept up to 1,024 characters.
The <textarea> tags format is illustrated in the code example below.

The <textarea> tag is one of the few form tags that has a closing tag.
If you would like some default content in the text field, place the content between the tags in the code.
For instance you may use this field to collect the users name and address, you could put a dummy address in the field as an example to help the user.
The code example below illustrates what the form could look like, to see the code example rendered in a browser use this link textarea field example.

<form>
<textarea name="address" cols="30" rows="6">
Joe Bloggs.
123, Some Street.
Anytown.
Lankyshire.
UK.
</textarea>
</form>

Any text that is entered into the <textarea> box/field wraps within the width of the box/field, but the text is sent verbatim to the handler.
When the user enters line breaks in the text they are also sent to the handler, however any text without hard line breaks (wrapped) is sent without the breaks.

The hidden field is used to add data to a form without displaying the data to the user.
The format of the hidden field is illustrated in the code example below.

Hidden fields are just the same as any other box/field, apart from not being displayed to the user, they are used mostly for tracking data.
For example if the user has to fill out a multipage form, a hidden field called userid could be inserted in the forms to ensure that all the submitted forms were tied to the same users data.

Sometimes you may require additional custom buttons in a form, in these cases you can use the button field.
The button fields format is illustrated in the code example below.

The tag is used to create a standard graphical button in a form.
The code example below defines a button in a form in a web page.

Buttons in a form by themselves are useless, to make the button actually do something it needs to be linked to a script via an event attribute such as onclick, onmouseover, or onmouseout etc.
The code example below illustrates a button that when "clicked" by the user calls the sayHi JavaScript function.
If the user has entered their name in the text box/field they will recieve a personalised greeting.
To see the code example rendered in a browser use this link button example.

An image can be used to provide a graphical means to convey a message to the user.
By using the image type of the <input> tag you can add images to a form in a document, and it can be used along wiht other form elements to help gathering data.
The image fields format is illustrated in the code example below.

Image fields just like the button field by themselves do not provide any actual form controls.
In order for the image field to be used for input purposes it must be linked to a script using an event attribute just like the button field.
The code example below illustrates the image field being used to call the JavaScript function sayHi() when the user clicks on the image.
To see the code example rendered in a browser use this link image field example.

The file field allows the user to browse for a local file on their PC’s hard drive, to send it as an attachment to the form data.
The format of the file fields is illustrated in the code example below.

The file field is displayed as a text box and a button that enables the user to browse for a file using their platforms file browser.
The user can also type the path and name of the file in the text box to locate a file on their PC’s hard drive.
To see an example of the file field rendered in a browser use this link file field example.
In order to employ this control in a form you must do the following.

The <form> tags should look like the form tags illustrated in the code example below.

The Submit and the Reset buttons provide control mechanisms for the user to submit the data they have entered to the handler, and also to reset the form to it’s default state.
The Submit and Reset buttons format is illustrated in the code examples below.
To see the code examples rendered in a browser use this link Submit & Reset buttons example.

The value attribute is optional for both of the tags if the attribute is omitted from the buttons will display some default text either Submit or Reset, which text is displayed is ultimately determined by the user agent.
When the Submit button is clicked this causes either the data to be submitted to the handler specified in the <form> tags action attribute, or the button click calls a script that preprocesses the form data (client–side) before sending the form data to the specified handler.
When the reset button is clicked this causes the forms fields to be reset to their default values, this is usually done (client–side) by calling a script in the document to reset the form elements to their defaults values.

On their own the Submit and the Reset buttons dont do anything as you can see in the example above, unless they are linked to a script like this reset button example.

Form fields have two other attributes that can be used to increase accessibility they are the tabindex and the accesskey attributes.
The tabindex attribute is used to define the order that the the form fields are selected when the user presses the Tab key.
The attribute takes a numeric argument which specifies the fields order in the form.
The accesskey attribute is used to define a key that the user can press to directly access a field.
This attribute takes asingle letter as an argument, and the letter then becomes the key that the user presses to directly access the form field.
The code example below defines a text box in a form that can be accessed by pressing the letter F (Alt+F on Windows Platform) and the field is also the first in the tab order of the fields in the form.
I have created an example page that uses the code example illustrated below to see the page rendered in a browser use this link tabinex & accesskey keyboard shortcuts example.

It can be advantageous to visually group the controls on a form, which is standard practice in GUI interfaces, as illustrated by the screenshot here on the right of the Windows Internet Options dialog box.
By grouping form controls in this manner you will help the user to easily understand the forms organization.
Which also helps to define the form in the document itself.
This is achieved using the <fieldset> tag.

The <fieldset> tag is used to create a container to hold forms and form elements.
The tag results in a thin border being displayed around all the forms or form elements that it surrounds.
The code example below illustrates the format of the <fieldset> tags.

<fieldset>
<form>
<label for="gender">Gender Form:</label>
<input type="radio" name="gender" value="male" />Male:<br />
<input type="radio" name="gender" value="female" />Female:<br />
</form>
</fieldset>

The <legend> tag can be used to provide a caption for the fieldset tag and the forms or from elements that it surrounds.
The code example below illustrates the format of the <legend> tags.

<fieldset>
<legend>Gender Form:</legend>
<form>
<input type="radio" name="gender" value="male" />Male:<br />
<input type="radio" name="gender" value="female" />Female:<br />
</form>
</fieldset>

I have created an example web page using both of the code examples above the first set of "radio" buttons has the caption Gender Form: which is provided by the <label> tag.
The second set of "radio" buttons has the caption Gender Form which is provided by the <legend> tags.
To see the page rendered in a browser use this link fieldset & legend tags example.

The data from a form is typically passed to a data handler, which can be a script or program that does something useful with the data.
Form handlers usually do one or more of the actions listed below with the form data they recieve.

There are many different ways to construct form handlers, the usual method is to use a server–side programming language to create a script that does what is needed with the data.
Form handlers are created using server–side languages such as Perl, Python and PHP.
Security is a very important issue to consider when creating form handlers, a popular early form handler formail.cgi had a vulnerability that allowed anyone to abuse it and send data to the script, which would then email the data wherever the sender wanted.
Form handling scripts are very diverse they perform many different functions and they can be written in different languages, if you do decide to create a form handler you should use a language you are comfortable with.
With regards to learning a server–side scripting language get a good book on the language you choose and there are also plenty of web sites and forums where you can find help if you get stuck.

If you dont want to learn a scripting language and you just want a generic form handler to store data or email it, there are alternatives.
It is possible to download generic form handlers from web sites such as CGI Resourceindex
Another alternative is to use a Scripting Service where you are allowed to procces your data through their server scripts.
This would be useful if you needed to handle data but you were unable to run server–side scripts on your server, or you just want a generic script and a hassle–free solution.
There is a partial list of script services on the CGI Resource Index web site, on the homepage select Remotely Hosted and then browse the list for a service that meets your needs.
You can also use a search engine such as Google just type "cgi scripts" or "cgi services" to find a script or a sevice that meets your requirements.

The client–side scripts that a form control may call will usually be used for "validation" purposes, for instance the script could check if the user has entered a valid email address that contains an @ sign and that they have entered data in all the necessary fields in the form.
This makes the form interactive and ensures the user submits the correct data and it saves the user time too.
Client–side scripts can be used make the document interactive in all sorts of other ways, that make the web page more user friendly, learning a scripting language like JavaScript is well worth while, get yourself a good book, and there are plenty of web sites and forums where you can find help if you need it.
If you dont want to learn you can always cheat and download JavaScripts from web sites on the internet that you can paste into your html documents, just use a search engine like Google and type "JavaScripts" and you will get lots of results.

html Forms

Understanding Forms

Inserting A Form

HTTP GET

HTTP POST

Additional Attributes

Field Labels

Text Input Boxes

How To Prevent Changes

Password Input Boxes

Radio Buttons

Check Boxes

List boxes

Large Text Areas

Hidden Fields

Buttons

Images

File Fields

Submit And Reset Buttons

Tab Order And Keyboard Shortcuts

Fieldsets And Legends

Scripts And Script Services