GetDotted Domains

Viewing Thread:
"Creating a web form, using HTML"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Sun 03/12/06 at 19:21
Regular
"It goes so quickly"
Posts: 4,083
HTML Web forms

Many web pages are simply designed to show content to a user, but there are times when you'll want your web site to allow that user to interact with either you, or your web site.

This can be done using web forms, HTML code which adds user input fields or selection options to your web page. Such a web form can be used for a simple search engine, like Google, or for accepting an order from an online store, such as amazon.

This knowledge base entry is intended to show you how you can accept user input from an HTML web form. This article won't teach you how to use that data beyond this point, however (though there are a few notes about using the Freeola Form to Mail script at the end). You will need to create your own PHP / CGI scripts for that, or acquire them from many of the free web sites that offer them. You can enquire about such scripts on the Freeola web forum.

This article also assumes a basic grasp of the HTML language, so won’t contain any explanation as to how to create a fully working web page; merely how to add a web form to an existing web page.

The beginning of the HTML form

The first step in any web form is to define it within the HTML source, which is done using the <form> element. This element can contain a number of attributes. One such attribute is action, which contains the web address that the web browser should send the form data to, such as action=" [B]http://freeola.co.uk/formdata.php[/B]".

The <form> element can also contain an id attribute, so that you can refer to it when using CSS or JavaScript.

Another attribute that can be placed with the <form> element is method, which tells the web browser how to send the data to the web address referred to in the action attribute. This value can be either method="[B]get[/B]", or method="[B]post[/B]". A get method means the form data is sent as one long web address, known as a query string, and is the default value if a method isn’t set, while a post method means the form data is sent hidden within the web address request. Depending on which method you use may depend on how you can access this form data from a PHP or CGI script.

Even though the default method is set to get, a lot of web sites choose to use the post method, which is what we’ll be using here.

An example of defining a web form in HTML may look like this:


<form [B]id="[I]myform[/I]" method="[I]post[/I]" action="[I]http://freeola.co.uk/formdata.php[/I]"[/B]>
� HTML form elements go here �
</form>


… where the value of the action attribute would need to be changed to whichever web address you wish the form data to go, which for Freeola customer sites, could be a PHP or CGI script.

One other attribute you may need to use is enctype. The default value for this is application/x-www-form-urlencoded, and is the most common used enctype, so you won’t usually need to add it. If you’re using a web form which asks a user to upload a file, however, such as a photo, then you’ll need to use the enctype attribute, and set the value to multipart/form-data. For example:


<form id="myform" method="post" [B]enctype="[I]multipart/form-data[/I]"[/B] action="http://freeola.co.uk/formdata.php">
� HTML form elements go here �
</form>


If your web form doesn’t contain a file upload option, you don’t need to add the enctype attribute. There are a couple other attributes available to the <form> element, but aren’t really necessary for the majority of web sites.

Form controls

Now that the web form has been defined, we can now create some control elements to go within it. Most control elements are created using the <input> element with the type attribute, but can also be created via the <select> and <textarea> elements. Each control element will need to be given a name attribute, usually unique (except in the case of radio buttons) so that the web browser can pass the data back to the web site with ease.

You may also want to add an id element to each form control, so that CSS and JavaScript can refer to them individually, as well as to make use of the <label> element (mentioned later). Unlike the name attribute, the id attribute MUST be unique, even for radio buttons.

You can also used the readonly="readonly" and disabled="disabled" attributes to set form controls to read-only (where the user can’t change the pre-set value) or to disable it completely. The readonly="readonly" attribute can only be used on text entry form controls. These settings are generally used for larger forms when combined with JavaScript. For example, you can disable an element until the user has selected a particular option, such as preventing them from clicking the submit button until they’ve ticked that they have read and understood the terms and conditions. This type of advanced form use will not be looked at further in this article, but may appear in a separate article at a later date.

Text entry forms and password, using <input type="[I]text[/I]">, <input type="[I]password[/I]"> and <textarea>.

Perhaps the most obvious and widely used web form control element is the single input box, commonly used for web site search functions, which allows for a user to enter one line of text. This can be achieved using the <input> element, and setting the type value to text, for example:

First Control: <input [B]type="[I]text[/I]"[/B] name="firstcontrol" id="firstcontrol">

The text before the form control is there to assist the user, so that they know what they are being asked to fill in to the input box. The name attribute is required, while the id attribute is optional. These can be set to whatever value you prefer (but may NOT contain spaces), and are generally given vales that represents the type of data being ask for. For example, if the text input control was asking a user for their name, then this could be the value used within the two attributes, like so:


Name: <input type="text" [B]id="[I]name[/I]" name="[I]name[/I]"[/B]>


And if you wanted to ask for the users first and second name individually, you could do so like this:


First Name: <input type="text" [B]id="[I]firstname[/I]" name="[I]firstname[/I]"[/B]>
Surname: <input type="text" [B]id="[I]surname[/I]" name="[I]surname[/I]"[/B]>


As mentioned above, a name and id attribute value may NOT contain any spaces, so the following would not work:


First Name: <input type="text" [B]id="[I]first name[/I]" name="[I]first name[/I]"[/B]>


The value attribute may contain text that you wish to appear before the user enters anything. The size and maxlength attributes represent the size of the text input control, in characters, as well as maximum number of characters that the form control can contain. In the example below, the value is set to nothing (so the form control appears blank), the size is set to display 35 characters at once, while no more than 100 characters can be entered in to the control (with id removed for simplicity).


First Name: <input type="text" name="firstname" [B]value="" size="[I]35[/I]" maxlength="[I]100[/I]"[/B]>
Surname: <input type="text" name="surname" [B]value="" size="[I]35[/I]" maxlength="[I]100[/I]"[/B]>


If you replace the type attribute from text to password, the form control will work in the same way, except it will display each character as an asterisk (*):


Password: <input [B]type="[I]password[/I]"[/B] name="password" value="" size="35" maxlength="100">


If you want to allow the user to enter a lot of text, then the <textarea> element should be used in place of <input type="text">. This will produce a box that will allow the user more room to write in. Unlike the <input> element, the <textarea> element has it’s own closing <[B]/[/B]textarea> tag, and any pre-set text you wish to appear must be placed between the opening and closing element. For example:

<textarea name="comments">[U]pre-set text goes here[/U][B]</textarea>[/B]

You can’t set a maximum character limit for a <textarea>, but can define its size, using the rows and cols attributes. The value of rows sets how many lines high the text area is, while cols sets the length. For example:

Comments: <textarea name="comments" [B]rows="[I]5[/I]" cols="[I]26[/I]"[/B]></textarea>

Linking text and a form control together, using <label>

You can associate a form control and text together using the <label> element, and this will allow the web browser to link the two, enabling the user to click on the text to activate the form control. This is also important for screen reader software, so using the <label> element should always be considered.

There are two ways in applying a <label>, the first being to simply surround the text and form element, for example, [B]<label>[/B]First Name: <input type="text" name="firstname">[B]</label>[/B], and this would cause the text First Name to be associated with the form control.

However, you may not always be able to do this, because the text and form control may not be next to each other within the HTML source code (even though they may appear so in the web browser). Such an example would be if you were to set out your form in an HTML table, with the text in the left column, and the form control in the right. This is where the for and id attributes come in handy.

When giving a form control an id, it allows it the be referenced later on, by CSS, JavaScript, and a <label>. Using the for attribute within a <label> will link it with whichever form control is being referenced. For example:


<label [B]for="[I]firstname[/I]"[/B]>First Name:</label><br>
<input type="text" name="firstname" [B]id="[I]firstname[/I]"[/B]>

<label [B]for="[I]surname[/I]"[/B]>Surname:</label><br>
<input type="text" name="surname" [B]id="[I]surname[/I]"[/B]>


... or when using an HTML table:


<table>
<tr>
<td><label [B]for="[I]firstname[/I]"[/B]>First Name:</label></td>
<td><input type="text" name="firstname" [B]id="[I]firstname[/I]"[/B]></td>
</tr>
<tr>
<td><label [B]for="[I]surname[/I]"[/B]>Surname:</label></td>
<td><input type="text" name="surname" [B]id="[I]surname[/I]"[/B]></td>
</tr>
</table>


If you wish, you may also add a title attribute, which can contain a small piece of text that the user will see displayed in a tool tip when they hover their mouse over the main screen text. For example:


<label for="firstname" [B]title="[I]Please enter your firstname[/I]"[/B]>Firstname:</label>

<label for="surname" [B]title="[I]Please enter your surname[/I]"[/B]>Surname:</label>


... will display "Please enter your firstname" and "Please enter your surname" respectively when the mouse is moved over the form controls associated text.

Hidden form control values, using <input type="[I]hidden[/I]">

You can create hidden form controls that a user cannot directly see or alter. This is so you’re able to pass certain values to a PHP or CGI script. The same <input> element is used for this, using the type attribute with the value hidden, along with just a name and value attribute, for example:


<input [B]type="[I]hidden[/I]" name="[I]hideme[/I]" value="[I]hidden 1[/I]" [/B]>
<input [B]type="[I]hidden[/I]" name="[I]hidemealso[/I]" value="[I]hidden 2[/I]" [/B]>
<input [B]type="[I]hidden[/I]" name="[I]hidemetoo[/I]" value="[I]hidden 3[/I]" [/B]>


These hidden values will be available to you in the same way user entered data is. Because these are hidden elements, they do not need to have an id, size or maxlength attribute, nor do they need to have a <label>, because the user won’t see or use them themselves. This is to benefit you, the web site owner, in passing values which you feel are required (for example, if you use the same script for multiple web forms).

File upload form control, using <input type="[I]file[/I]">.

If you want your users to be able to send you a file, (in the same way they may attach a file to an email) you can use an upload form control, which will place a text input and button on your web page. The user will be able to use the button to browse their hard drive, and select which file they would like to upload. You’ll again using the <input> element, with the type attribute set to file:


<label title="Select a photo to upload">
Photo: <input [B]type="[I]file[/I]"[/B] id="photo" name="photo" size="25">
</label>


You can’t set a maxlength attribute for this form control, nor can you set the text which appears on the button.

As mentioned previously, if you want to use this type of form control, you will need to add the enctype="[I]multipart/form-data[/I]" attribute to your <form> element. You will also need to set up your receiving PHP / CGI script to handle the uploaded file.

Bullet point selection list, using <input type="[I]radio[/I]">

A bullet point selection list, or radio button, presents the user with a list of options, where only one option from a group can be selected. This is done using the radio keyword within the type attribute, for example <input [B]type="[I]radio[/I]"[/B]>. The name attribute must be the same for each form control, otherwise the web browser won’t know which radio button belongs to which group. If you wish to have more than one group of options using a radio button list, you will need to give each group a separate name, but ensure each form control within the same group share the same name, for example:


Do you own 1 or more cars?
<label><input type="radio" [B]name="[I]car[/I]"[/B] value="yes">Yes</label>
<label><input type="radio" [B]name="[I]car[/I]"[/B] value="no" [B]checked="checked"[/B]>No</label>

Do you own 1 or more bikes?
<label><input type="radio" [B]name="[I]bike[/I]"[/B] value="yes">Yes</label>
<label><input type="radio" [B]name="[I]bike[/I]"[/B] value="no" [B]checked="checked"[/B]>No</label>


The value element allows you to set the text that is sent for the selected option. If you do not add your own value attribute to each radio button, the web browser will set its own text, such as "checked", "ticked" or "on". Each web browser can set different text, so it is best to set your own, so you know what to expect.

The checked="checked" attribute allows for one option to be pre-selected for the user within each group of radio buttons. If you placed the checked="checked" attribute within more than one radio button within the same group, the final radio button in the list will be selected, for example (code striped down slightly):


<input ... name="food" value="apple"> apple
<input ... name="food" value="lemon" [B]checked="[I]checked[/I]"[/B]> lemon
<input ... name="food" value="carrot"> carrot
<input ... name="food" value="cake" [B]checked="[I]checked[/I]"[/B]> cake
<input ... name="food" value="chocolate"> chocolate


... would result in cake being the pre-selected option, as it is the final radio button with the checked="checked" attribute within the same named group.

In the first radio button example above, each form control (radio option) and the text which relates to it are placed within the <label> element, so the id attribute within each control and the for attribute within the <label> aren’t needed (unless you wish to use the id attribute for CSS and JavaScript references).

Tick box selection list, using <input type="[I]checkbox[/I]">

The tick box, or checkbox element as it’s called, works in the same way as a radio option, except that they aren’t grouped in the same way, so you can have multiple checkboxes, and tick them all, or none, or half, rather than just the one. The code for a checkbox is <input [B]type="[I]checkbox[/I]"[/B]>, and requires the same attributes as a radio button, for example:


<label>
<input [B]type="[I]checkbox[/I]" name="[I]car[/I]" value="[I]yes[/I]"[/B]> Do you own a car?
</label>
<label>
<input [B]type="[I]checkbox[/I]" name="[I]bike[/I]" value="[I]yes[/I]"[/B]> Do you own a bike?
</label>


Again, because each form control (checkbox) and the text which relates to it are within the <label> element, the id and for attributes aren’t needed.

One quick PHP note: If you are going to be using PHP, you can give each checkbox the same name if you append square brackets [ ] to the end, such as name="[I]vehicle[B][][/B][/I]" and PHP will automatically put the results in an array.

A checkbox also makes use of the checked="checked" attribute, pre-selecting any option which includes it. Unlike a radio button, you can pre-select more than one checkbox, even if they share the same name (as noted in the previous paragraph).

Menu selection box, using <select> and <option>

A menu selection box is a compact way of displaying multiple options to a user, either via a single drop-down menu, or a larger, possibly scrollable menu list. The main benefit being space saved when compared to a radio button list.

Unlike the other form control elements, a menu selection is built using the <select> and <option> elements, where <select> defines the menu and how it should appear, and <option> contain the selectable options for the user.

The value attribute must be added to each <option> element, followed by the text you wish to display for that option, followed by the closing <[B]/[/B]option> element, such as: <option value="[I]ps2[/I]">[U]Playstation 2[/U]</option>. The value attribute of the selected <option> element is the value passed to the web site when the form is submitted.

Each <option value=""> must be placed between the opening <select> and closing <[B]/[/B]select> elements.

An example selection list could be asking the user which is their favourite games console, and offering up pre-defined selection of answers:


<label for="console">Which is your all time favourite games console:</label>
[B]<select name="[I]console[/I]">[/B]
<option value="ps1">Playstation 1</option>
[B]<option value="[I]ps2[/I]">[U]Playstation 2[/U]</option>[/B]
<option value="xbox">Xbox</option>
<option value="xbox360">Xbox 360</option>
<option value="wii" [B]selected="selected"[/B]>Wii</option>
<option value="gamecube">Gamecube</option>
<option value="other">other</option>
[B]</select>[/B]


You can decide if the selection menu should appear as a single drop-down or larger menu using the size attribute within the <select> element, for example, <select name="console" [B]size="[I]4[/I]"[/B]>. By default, the value is 1, which means only 1 option is shown, therefore producing a single drop-down menu. If the value is higher, for example, 4, then a larger, possibly scrollable, menu is produced (scrollbars will appear if there are more than 4 options).

If you make use of the multiple="multiple" attribute within the <select> element, such as <select name="console" size="4" [B]multiple="multiple"[/B]>, the menu becomes a multiple selection menu, allowing the use to make more than one selection. When doing this, be sure to specify a larger size, to make it easier for the user.


<label for="consoles"> Which other games consoles have you owned (multiple choice):</label>
<select name="consoles[B][][/B]" name="consoles" [B]size="[I]4[/I]" multiple="[I]multiple[/I]"[/B]>
<option value="ps1">Playstation 1</option>
<option value="ps2" [B]selected="selected"[/B]>Playstation 2</option>
<option value="xbox">Xbox</option>
<option value="xbox360" [B]selected="selected"[/B]>Xbox 360</option>
<option value="wii" [B]selected="selected"[/B]>Wii</option>
<option value="gamecube">Gamecube</option>
<option value="other">other</option>
</select>


If you are using a PHP script, you must use square brackets [ ] at the end of the name attribute, otherwise PHP will not have all the user selected options available to it.

In the same way that the checked="checked" attribute pre-selected your default option for a radio and checkbox menu, you can apply the selected="selected" attribute to whichever <option> you would like to be selected by default within a <select> menu. For single menu’s the last referred option will be selected, but for multiple select menu’s, each option defined with a selected="selected" attribute will be pre-selected.

Grouped menu selection box, with the addition of <optgroup>

You can group <options> together using the <optgroup> element to make a larger list easier to view. These work in exactly the same way as a regular menu selection box, the only difference is visually to the user. When you add a label attribute to the <optgroup> element, that label is shown to the user.


<select name="selectmenu">
[B]<optgroup [U]label="[I]group heading[/I]"[/U]>[/B]
<option value="an option">an option</option>
[B]</optgroup>[/B]
</select>


If we were to divide our previous example up in to <optgroups>, we could choose to use the name of the company who makes the consoles as our label (each group heading):


<label for="console">Which is your all time favourite games console:</label>
<select name="console">
[B]<optgroup [U]label="[I]Sony[/I]"[/U]>[/B]
<option value="ps1">Playstation 1</option>
<option value="ps2">Playstation 2</option>
[B]</optgroup>[/B]

[B]<optgroup [U]label="[I]Microsoft[/I]"[/U]>[/B]
<option value="xbox">Xbox</option>
<option value="xbox360">Xbox 360</option>
[B]</optgroup>[/B]

[B]<optgroup [U]label="[I]Nintendo[/I]"[/U]>[/B]
<option value="wii">Wii</option>
<option value="gamecube">Gamecube</option>
[B]</optgroup>[/B]

<option value="other">other</option>
</select>


As you can see from the final <option value="other">other</option> code, you don’t have to place every option within an <optgroup>.

The <optgroup> element can be used in both single and
multiple selection lists.


Submit and reset buttons, using <input type="submit">, <input type="reset"> or <input type="image">

The final part of a web form is the submit button, which enables the user to actually send what they have filled in to you. There are two types of submit button, a bog-standard general button, and a custom image button. The image button basically allows you to design your own button in an image-editing program, and use that in place of a regular button.

Regular submit button:
<input [B]type="[I]submit[/I]"[/B] name="submit" value="submit">

… the text on the button will be that of the value attribute.

Image submit button:
<input [B]type="[I]image[/I]" src="[I]submit.png[/I]"[/B] name="submit" value="submit" [B]alt="[I]submit[/I]"[/B]>

… like an <img> element, the image location is referred to via the src attribute, and the alt attribute is used in place for screen readers, or if the image fails to load.

When using an image button, web browsers will also send the coordinates that were clicked, although you will rarely (if ever) find a use for them.

You can also include a reset button, which will clear the form of user data and revert back to any default values. This is done using the reset keyword, rather than submit within the type attribute. The name and value attributes work in the same way as the submit form control.

<input [B]type="[I]reset[/I]"[/B] name="reset" value="clear form">

For whatever reason, you’re not able to directly use an image button for the reset option, so you either have to use a regular button, or make the image a regular link back to the current page.

However, not many sites use a reset button anymore, because if a user were to hit it by mistake, they can become quite annoyed, and lay blame on the web site, rather than their own miss-click. For this reason, it is generally recommend that you don’t include a reset button, unless you really feel the need.

Button controls don’t require a <label> element, as they are self-explanatory (i.e the text that goes with it appears on the button itself).

There is also a button control that doesn’t cause a submit or reset, which can be created using type="button". This doesn’t really have any use unless you’re using JavaScript.

Group your form together, using <fieldset> and <legend>

For larger web forms, you can divide up the form by grouping form controls together by using the <fieldset> element, and giving it a title or heading via the <legend> element, for example:


[B]<fieldset id="[I]sectionA[/I]">[/B]
<legend>Section A: about you</legend>
� HTML form controls here �
[B]</fieldset>[/B]

<fieldset id="[I]sectionB[/I]">
[B]<legend>[I]Section B: about your career[/I]</legend>[/B]
� HTML form controls here �
</fieldset>

<fieldset id="[I]sectionC[/I]">
<legend>Section C: about your schooling</legend>
� HTML form controls here �
</fieldset>


Giving each <fieldset> its own id allows you to reference it using CSS or JavaScript individually. Because no form data for a <fieldset> or <legend> exist as such, you do not need to give them a name attribute.

And that, is that - see for yourself

Take a look at an example of a web form, which make use of the above mentioned form elements. The script that the form submits to is a basic PHP script that simply lists the form data that is received, as well as the associated form control names.

Freeola Form Mail Script

As mentioned at the beginning, Freeola offer a pre-coded Form to Mail PHP script, which is automatically available to you via your web space. This script allows you to create your own HTML web form, and have the data filled in by a user sent to one of your Freeola email addresses.

The web address of this script will depend on your domain name. The script is located under your domain name, as /cgi-bin/form_to_mail.php, so if your domain name was johnsmith.com, the web address to the PHP script would be http://www.johnsmith.com /cgi-bin/form_to_mail.php, and so when writing your <form> element, it may look something like this:


<form method="post" action="[I] http://www.johnsmith.com/cgi-bin/form_to_mail.php [/I]">
� rest of form code here �
</form>


You will also need to set some pre-defined values for the PHP script, which you can do using the <input type="hidden"> element, as mentioned near the top of this guide. This MUST include the email address you want the results to go to (one of your Freeola addresses), but may also include:

- The email address you want the results email to appear from.
- The subject you want the results email to contain.
- A list of required form fields the user must fill in before the results are sent.
- The web address of a thank you page once the results are sent.

To have the results sent to you, add your email address as a hidden form element, using the code: <input type="hidden" name="[U]recipient[/U]" value="[B]your Freeola address[/B]">, where your Freeola address should be replaced with which ever Freeola email address you would like to use.

For the other options, to set the from address, use the code <input type="hidden" name="[U]from[/U]" value="[B]from address here[/B]">, which must also be one of your Freeola email addresses. You could previously set this to any email address you liked, which allowed you to use the email address of the person filling in the form, but this was altered by Freeola to prevent spam abuse.

To set the subject of the email sent to you, use the code <input type="hidden" name="[U]subject[/U]" value="[B]email subject[/B]">, where email subject will be the text that appears in the email subject line.

To prevent the form from being emailed to you with empty form controls, you can use the code <input type="hidden" name="[U]require[/U]" value="[B]firstname,age,comments[/B]">. The value of this element must be the exact values you used in each form controls name attribute, divided by a comma. In this example, the form controls with the name attributes set to firstname, age and comments must be filled in by the user before the form will submit.

Finally, to send them to a custom web page once they’ve submitted the completed form, use the code <input type="hidden" name="[U]success_redirect[/U]" value=" [B]http://www.johnsmith.com/thanks.htm[/B]">, where http://www.johnsmith.com/thanks.htm is the full web address of your thank you page.

When putting together your web form, make sure your own name attributes don't clash with the pre-set ones above.

If you have any questions or are in need of a little help with your HTML web forms, you are always welcome to post as such on the Freeola web forums.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Wed 06/05/09 at 08:28
Moderator
"Are you sure?"
Posts: 5,000
rockhopper wrote:
> Hi,
> I wonder if you could help. I am about to create a form
> following the Form_to_mail code example that Freeola have so
> thoughtfully provided. But I need to send the resulting data to
> two recipients. Can I just add an address as example below? or do
> I have to use another method.
>
> <input type = "hidden"
> name="recipient" value=
> "[email protected],
> [email protected]">

>
> Thanks
> Matt

Hi rockhopper and welcome to the forums!
Blimey you've dug up an old thread here :¬)

Yes the syntax you provided works - I've just tested it to make sure...




Search Freeola Chat
Tue 05/05/09 at 18:10
Regular
Posts: 7
Hi,
I wonder if you could help. I am about to create a form following the Form_to_mail code example that Freeola have so thoughtfully provided. But I need to send the resulting data to two recipients. Can I just add an address as example below? or do I have to use another method.

<input type = "hidden" name="recipient" value= "[email protected], [email protected]">

Thanks
Matt
Thu 22/03/07 at 15:18
Regular
Posts: 1,014
Fingers and legs crossed they will make that decision soon many thanks for this posting

Kev

cjh wrote:
> UPDATE (22nd March 2007):
>
> Due to recent changes to the form to mail script by Freeola to
> prevent spam abuse, you can no longer set the <input
> type="hidden" name="from" value="from
> address here">
field to the email address of the
> person filling in the form. This field now must also be set to
> an email address listed under your Freeola account.
>
> Because of this change, you can no longer use your email
> software's reply function as easily as before. A request
> has been made to Freeola to add the option <input
> type="hidden" name="reply-to"
> value="[B]user-email[/B]">
to their form to
> mail script, so hopefully this will be considered soon.
Thu 22/03/07 at 14:07
Regular
"It goes so quickly"
Posts: 4,083
UPDATE (22nd March 2007):

Due to recent changes to the form to mail script by Freeola to prevent spam abuse, you can no longer set the <input type="hidden" name="from" value="from address here"> field to the email address of the person filling in the form. This field now must also be set to an email address listed under your Freeola account.

Because of this change, you can no longer use your email software's reply function as easily as before. A request has been made to Freeola to add the option <input type="hidden" name="reply-to" value="[B]user-email[/B]"> to their form to mail script, so hopefully this will be considered soon.
Sun 03/12/06 at 19:21
Regular
"It goes so quickly"
Posts: 4,083
HTML Web forms

Many web pages are simply designed to show content to a user, but there are times when you'll want your web site to allow that user to interact with either you, or your web site.

This can be done using web forms, HTML code which adds user input fields or selection options to your web page. Such a web form can be used for a simple search engine, like Google, or for accepting an order from an online store, such as amazon.

This knowledge base entry is intended to show you how you can accept user input from an HTML web form. This article won't teach you how to use that data beyond this point, however (though there are a few notes about using the Freeola Form to Mail script at the end). You will need to create your own PHP / CGI scripts for that, or acquire them from many of the free web sites that offer them. You can enquire about such scripts on the Freeola web forum.

This article also assumes a basic grasp of the HTML language, so won’t contain any explanation as to how to create a fully working web page; merely how to add a web form to an existing web page.

The beginning of the HTML form

The first step in any web form is to define it within the HTML source, which is done using the <form> element. This element can contain a number of attributes. One such attribute is action, which contains the web address that the web browser should send the form data to, such as action=" [B]http://freeola.co.uk/formdata.php[/B]".

The <form> element can also contain an id attribute, so that you can refer to it when using CSS or JavaScript.

Another attribute that can be placed with the <form> element is method, which tells the web browser how to send the data to the web address referred to in the action attribute. This value can be either method="[B]get[/B]", or method="[B]post[/B]". A get method means the form data is sent as one long web address, known as a query string, and is the default value if a method isn’t set, while a post method means the form data is sent hidden within the web address request. Depending on which method you use may depend on how you can access this form data from a PHP or CGI script.

Even though the default method is set to get, a lot of web sites choose to use the post method, which is what we’ll be using here.

An example of defining a web form in HTML may look like this:


<form [B]id="[I]myform[/I]" method="[I]post[/I]" action="[I]http://freeola.co.uk/formdata.php[/I]"[/B]>
� HTML form elements go here �
</form>


… where the value of the action attribute would need to be changed to whichever web address you wish the form data to go, which for Freeola customer sites, could be a PHP or CGI script.

One other attribute you may need to use is enctype. The default value for this is application/x-www-form-urlencoded, and is the most common used enctype, so you won’t usually need to add it. If you’re using a web form which asks a user to upload a file, however, such as a photo, then you’ll need to use the enctype attribute, and set the value to multipart/form-data. For example:


<form id="myform" method="post" [B]enctype="[I]multipart/form-data[/I]"[/B] action="http://freeola.co.uk/formdata.php">
� HTML form elements go here �
</form>


If your web form doesn’t contain a file upload option, you don’t need to add the enctype attribute. There are a couple other attributes available to the <form> element, but aren’t really necessary for the majority of web sites.

Form controls

Now that the web form has been defined, we can now create some control elements to go within it. Most control elements are created using the <input> element with the type attribute, but can also be created via the <select> and <textarea> elements. Each control element will need to be given a name attribute, usually unique (except in the case of radio buttons) so that the web browser can pass the data back to the web site with ease.

You may also want to add an id element to each form control, so that CSS and JavaScript can refer to them individually, as well as to make use of the <label> element (mentioned later). Unlike the name attribute, the id attribute MUST be unique, even for radio buttons.

You can also used the readonly="readonly" and disabled="disabled" attributes to set form controls to read-only (where the user can’t change the pre-set value) or to disable it completely. The readonly="readonly" attribute can only be used on text entry form controls. These settings are generally used for larger forms when combined with JavaScript. For example, you can disable an element until the user has selected a particular option, such as preventing them from clicking the submit button until they’ve ticked that they have read and understood the terms and conditions. This type of advanced form use will not be looked at further in this article, but may appear in a separate article at a later date.

Text entry forms and password, using <input type="[I]text[/I]">, <input type="[I]password[/I]"> and <textarea>.

Perhaps the most obvious and widely used web form control element is the single input box, commonly used for web site search functions, which allows for a user to enter one line of text. This can be achieved using the <input> element, and setting the type value to text, for example:

First Control: <input [B]type="[I]text[/I]"[/B] name="firstcontrol" id="firstcontrol">

The text before the form control is there to assist the user, so that they know what they are being asked to fill in to the input box. The name attribute is required, while the id attribute is optional. These can be set to whatever value you prefer (but may NOT contain spaces), and are generally given vales that represents the type of data being ask for. For example, if the text input control was asking a user for their name, then this could be the value used within the two attributes, like so:


Name: <input type="text" [B]id="[I]name[/I]" name="[I]name[/I]"[/B]>


And if you wanted to ask for the users first and second name individually, you could do so like this:


First Name: <input type="text" [B]id="[I]firstname[/I]" name="[I]firstname[/I]"[/B]>
Surname: <input type="text" [B]id="[I]surname[/I]" name="[I]surname[/I]"[/B]>


As mentioned above, a name and id attribute value may NOT contain any spaces, so the following would not work:


First Name: <input type="text" [B]id="[I]first name[/I]" name="[I]first name[/I]"[/B]>


The value attribute may contain text that you wish to appear before the user enters anything. The size and maxlength attributes represent the size of the text input control, in characters, as well as maximum number of characters that the form control can contain. In the example below, the value is set to nothing (so the form control appears blank), the size is set to display 35 characters at once, while no more than 100 characters can be entered in to the control (with id removed for simplicity).


First Name: <input type="text" name="firstname" [B]value="" size="[I]35[/I]" maxlength="[I]100[/I]"[/B]>
Surname: <input type="text" name="surname" [B]value="" size="[I]35[/I]" maxlength="[I]100[/I]"[/B]>


If you replace the type attribute from text to password, the form control will work in the same way, except it will display each character as an asterisk (*):


Password: <input [B]type="[I]password[/I]"[/B] name="password" value="" size="35" maxlength="100">


If you want to allow the user to enter a lot of text, then the <textarea> element should be used in place of <input type="text">. This will produce a box that will allow the user more room to write in. Unlike the <input> element, the <textarea> element has it’s own closing <[B]/[/B]textarea> tag, and any pre-set text you wish to appear must be placed between the opening and closing element. For example:

<textarea name="comments">[U]pre-set text goes here[/U][B]</textarea>[/B]

You can’t set a maximum character limit for a <textarea>, but can define its size, using the rows and cols attributes. The value of rows sets how many lines high the text area is, while cols sets the length. For example:

Comments: <textarea name="comments" [B]rows="[I]5[/I]" cols="[I]26[/I]"[/B]></textarea>

Linking text and a form control together, using <label>

You can associate a form control and text together using the <label> element, and this will allow the web browser to link the two, enabling the user to click on the text to activate the form control. This is also important for screen reader software, so using the <label> element should always be considered.

There are two ways in applying a <label>, the first being to simply surround the text and form element, for example, [B]<label>[/B]First Name: <input type="text" name="firstname">[B]</label>[/B], and this would cause the text First Name to be associated with the form control.

However, you may not always be able to do this, because the text and form control may not be next to each other within the HTML source code (even though they may appear so in the web browser). Such an example would be if you were to set out your form in an HTML table, with the text in the left column, and the form control in the right. This is where the for and id attributes come in handy.

When giving a form control an id, it allows it the be referenced later on, by CSS, JavaScript, and a <label>. Using the for attribute within a <label> will link it with whichever form control is being referenced. For example:


<label [B]for="[I]firstname[/I]"[/B]>First Name:</label><br>
<input type="text" name="firstname" [B]id="[I]firstname[/I]"[/B]>

<label [B]for="[I]surname[/I]"[/B]>Surname:</label><br>
<input type="text" name="surname" [B]id="[I]surname[/I]"[/B]>


... or when using an HTML table:


<table>
<tr>
<td><label [B]for="[I]firstname[/I]"[/B]>First Name:</label></td>
<td><input type="text" name="firstname" [B]id="[I]firstname[/I]"[/B]></td>
</tr>
<tr>
<td><label [B]for="[I]surname[/I]"[/B]>Surname:</label></td>
<td><input type="text" name="surname" [B]id="[I]surname[/I]"[/B]></td>
</tr>
</table>


If you wish, you may also add a title attribute, which can contain a small piece of text that the user will see displayed in a tool tip when they hover their mouse over the main screen text. For example:


<label for="firstname" [B]title="[I]Please enter your firstname[/I]"[/B]>Firstname:</label>

<label for="surname" [B]title="[I]Please enter your surname[/I]"[/B]>Surname:</label>


... will display "Please enter your firstname" and "Please enter your surname" respectively when the mouse is moved over the form controls associated text.

Hidden form control values, using <input type="[I]hidden[/I]">

You can create hidden form controls that a user cannot directly see or alter. This is so you’re able to pass certain values to a PHP or CGI script. The same <input> element is used for this, using the type attribute with the value hidden, along with just a name and value attribute, for example:


<input [B]type="[I]hidden[/I]" name="[I]hideme[/I]" value="[I]hidden 1[/I]" [/B]>
<input [B]type="[I]hidden[/I]" name="[I]hidemealso[/I]" value="[I]hidden 2[/I]" [/B]>
<input [B]type="[I]hidden[/I]" name="[I]hidemetoo[/I]" value="[I]hidden 3[/I]" [/B]>


These hidden values will be available to you in the same way user entered data is. Because these are hidden elements, they do not need to have an id, size or maxlength attribute, nor do they need to have a <label>, because the user won’t see or use them themselves. This is to benefit you, the web site owner, in passing values which you feel are required (for example, if you use the same script for multiple web forms).

File upload form control, using <input type="[I]file[/I]">.

If you want your users to be able to send you a file, (in the same way they may attach a file to an email) you can use an upload form control, which will place a text input and button on your web page. The user will be able to use the button to browse their hard drive, and select which file they would like to upload. You’ll again using the <input> element, with the type attribute set to file:


<label title="Select a photo to upload">
Photo: <input [B]type="[I]file[/I]"[/B] id="photo" name="photo" size="25">
</label>


You can’t set a maxlength attribute for this form control, nor can you set the text which appears on the button.

As mentioned previously, if you want to use this type of form control, you will need to add the enctype="[I]multipart/form-data[/I]" attribute to your <form> element. You will also need to set up your receiving PHP / CGI script to handle the uploaded file.

Bullet point selection list, using <input type="[I]radio[/I]">

A bullet point selection list, or radio button, presents the user with a list of options, where only one option from a group can be selected. This is done using the radio keyword within the type attribute, for example <input [B]type="[I]radio[/I]"[/B]>. The name attribute must be the same for each form control, otherwise the web browser won’t know which radio button belongs to which group. If you wish to have more than one group of options using a radio button list, you will need to give each group a separate name, but ensure each form control within the same group share the same name, for example:


Do you own 1 or more cars?
<label><input type="radio" [B]name="[I]car[/I]"[/B] value="yes">Yes</label>
<label><input type="radio" [B]name="[I]car[/I]"[/B] value="no" [B]checked="checked"[/B]>No</label>

Do you own 1 or more bikes?
<label><input type="radio" [B]name="[I]bike[/I]"[/B] value="yes">Yes</label>
<label><input type="radio" [B]name="[I]bike[/I]"[/B] value="no" [B]checked="checked"[/B]>No</label>


The value element allows you to set the text that is sent for the selected option. If you do not add your own value attribute to each radio button, the web browser will set its own text, such as "checked", "ticked" or "on". Each web browser can set different text, so it is best to set your own, so you know what to expect.

The checked="checked" attribute allows for one option to be pre-selected for the user within each group of radio buttons. If you placed the checked="checked" attribute within more than one radio button within the same group, the final radio button in the list will be selected, for example (code striped down slightly):


<input ... name="food" value="apple"> apple
<input ... name="food" value="lemon" [B]checked="[I]checked[/I]"[/B]> lemon
<input ... name="food" value="carrot"> carrot
<input ... name="food" value="cake" [B]checked="[I]checked[/I]"[/B]> cake
<input ... name="food" value="chocolate"> chocolate


... would result in cake being the pre-selected option, as it is the final radio button with the checked="checked" attribute within the same named group.

In the first radio button example above, each form control (radio option) and the text which relates to it are placed within the <label> element, so the id attribute within each control and the for attribute within the <label> aren’t needed (unless you wish to use the id attribute for CSS and JavaScript references).

Tick box selection list, using <input type="[I]checkbox[/I]">

The tick box, or checkbox element as it’s called, works in the same way as a radio option, except that they aren’t grouped in the same way, so you can have multiple checkboxes, and tick them all, or none, or half, rather than just the one. The code for a checkbox is <input [B]type="[I]checkbox[/I]"[/B]>, and requires the same attributes as a radio button, for example:


<label>
<input [B]type="[I]checkbox[/I]" name="[I]car[/I]" value="[I]yes[/I]"[/B]> Do you own a car?
</label>
<label>
<input [B]type="[I]checkbox[/I]" name="[I]bike[/I]" value="[I]yes[/I]"[/B]> Do you own a bike?
</label>


Again, because each form control (checkbox) and the text which relates to it are within the <label> element, the id and for attributes aren’t needed.

One quick PHP note: If you are going to be using PHP, you can give each checkbox the same name if you append square brackets [ ] to the end, such as name="[I]vehicle[B][][/B][/I]" and PHP will automatically put the results in an array.

A checkbox also makes use of the checked="checked" attribute, pre-selecting any option which includes it. Unlike a radio button, you can pre-select more than one checkbox, even if they share the same name (as noted in the previous paragraph).

Menu selection box, using <select> and <option>

A menu selection box is a compact way of displaying multiple options to a user, either via a single drop-down menu, or a larger, possibly scrollable menu list. The main benefit being space saved when compared to a radio button list.

Unlike the other form control elements, a menu selection is built using the <select> and <option> elements, where <select> defines the menu and how it should appear, and <option> contain the selectable options for the user.

The value attribute must be added to each <option> element, followed by the text you wish to display for that option, followed by the closing <[B]/[/B]option> element, such as: <option value="[I]ps2[/I]">[U]Playstation 2[/U]</option>. The value attribute of the selected <option> element is the value passed to the web site when the form is submitted.

Each <option value=""> must be placed between the opening <select> and closing <[B]/[/B]select> elements.

An example selection list could be asking the user which is their favourite games console, and offering up pre-defined selection of answers:


<label for="console">Which is your all time favourite games console:</label>
[B]<select name="[I]console[/I]">[/B]
<option value="ps1">Playstation 1</option>
[B]<option value="[I]ps2[/I]">[U]Playstation 2[/U]</option>[/B]
<option value="xbox">Xbox</option>
<option value="xbox360">Xbox 360</option>
<option value="wii" [B]selected="selected"[/B]>Wii</option>
<option value="gamecube">Gamecube</option>
<option value="other">other</option>
[B]</select>[/B]


You can decide if the selection menu should appear as a single drop-down or larger menu using the size attribute within the <select> element, for example, <select name="console" [B]size="[I]4[/I]"[/B]>. By default, the value is 1, which means only 1 option is shown, therefore producing a single drop-down menu. If the value is higher, for example, 4, then a larger, possibly scrollable, menu is produced (scrollbars will appear if there are more than 4 options).

If you make use of the multiple="multiple" attribute within the <select> element, such as <select name="console" size="4" [B]multiple="multiple"[/B]>, the menu becomes a multiple selection menu, allowing the use to make more than one selection. When doing this, be sure to specify a larger size, to make it easier for the user.


<label for="consoles"> Which other games consoles have you owned (multiple choice):</label>
<select name="consoles[B][][/B]" name="consoles" [B]size="[I]4[/I]" multiple="[I]multiple[/I]"[/B]>
<option value="ps1">Playstation 1</option>
<option value="ps2" [B]selected="selected"[/B]>Playstation 2</option>
<option value="xbox">Xbox</option>
<option value="xbox360" [B]selected="selected"[/B]>Xbox 360</option>
<option value="wii" [B]selected="selected"[/B]>Wii</option>
<option value="gamecube">Gamecube</option>
<option value="other">other</option>
</select>


If you are using a PHP script, you must use square brackets [ ] at the end of the name attribute, otherwise PHP will not have all the user selected options available to it.

In the same way that the checked="checked" attribute pre-selected your default option for a radio and checkbox menu, you can apply the selected="selected" attribute to whichever <option> you would like to be selected by default within a <select> menu. For single menu’s the last referred option will be selected, but for multiple select menu’s, each option defined with a selected="selected" attribute will be pre-selected.

Grouped menu selection box, with the addition of <optgroup>

You can group <options> together using the <optgroup> element to make a larger list easier to view. These work in exactly the same way as a regular menu selection box, the only difference is visually to the user. When you add a label attribute to the <optgroup> element, that label is shown to the user.


<select name="selectmenu">
[B]<optgroup [U]label="[I]group heading[/I]"[/U]>[/B]
<option value="an option">an option</option>
[B]</optgroup>[/B]
</select>


If we were to divide our previous example up in to <optgroups>, we could choose to use the name of the company who makes the consoles as our label (each group heading):


<label for="console">Which is your all time favourite games console:</label>
<select name="console">
[B]<optgroup [U]label="[I]Sony[/I]"[/U]>[/B]
<option value="ps1">Playstation 1</option>
<option value="ps2">Playstation 2</option>
[B]</optgroup>[/B]

[B]<optgroup [U]label="[I]Microsoft[/I]"[/U]>[/B]
<option value="xbox">Xbox</option>
<option value="xbox360">Xbox 360</option>
[B]</optgroup>[/B]

[B]<optgroup [U]label="[I]Nintendo[/I]"[/U]>[/B]
<option value="wii">Wii</option>
<option value="gamecube">Gamecube</option>
[B]</optgroup>[/B]

<option value="other">other</option>
</select>


As you can see from the final <option value="other">other</option> code, you don’t have to place every option within an <optgroup>.

The <optgroup> element can be used in both single and
multiple selection lists.


Submit and reset buttons, using <input type="submit">, <input type="reset"> or <input type="image">

The final part of a web form is the submit button, which enables the user to actually send what they have filled in to you. There are two types of submit button, a bog-standard general button, and a custom image button. The image button basically allows you to design your own button in an image-editing program, and use that in place of a regular button.

Regular submit button:
<input [B]type="[I]submit[/I]"[/B] name="submit" value="submit">

… the text on the button will be that of the value attribute.

Image submit button:
<input [B]type="[I]image[/I]" src="[I]submit.png[/I]"[/B] name="submit" value="submit" [B]alt="[I]submit[/I]"[/B]>

… like an <img> element, the image location is referred to via the src attribute, and the alt attribute is used in place for screen readers, or if the image fails to load.

When using an image button, web browsers will also send the coordinates that were clicked, although you will rarely (if ever) find a use for them.

You can also include a reset button, which will clear the form of user data and revert back to any default values. This is done using the reset keyword, rather than submit within the type attribute. The name and value attributes work in the same way as the submit form control.

<input [B]type="[I]reset[/I]"[/B] name="reset" value="clear form">

For whatever reason, you’re not able to directly use an image button for the reset option, so you either have to use a regular button, or make the image a regular link back to the current page.

However, not many sites use a reset button anymore, because if a user were to hit it by mistake, they can become quite annoyed, and lay blame on the web site, rather than their own miss-click. For this reason, it is generally recommend that you don’t include a reset button, unless you really feel the need.

Button controls don’t require a <label> element, as they are self-explanatory (i.e the text that goes with it appears on the button itself).

There is also a button control that doesn’t cause a submit or reset, which can be created using type="button". This doesn’t really have any use unless you’re using JavaScript.

Group your form together, using <fieldset> and <legend>

For larger web forms, you can divide up the form by grouping form controls together by using the <fieldset> element, and giving it a title or heading via the <legend> element, for example:


[B]<fieldset id="[I]sectionA[/I]">[/B]
<legend>Section A: about you</legend>
� HTML form controls here �
[B]</fieldset>[/B]

<fieldset id="[I]sectionB[/I]">
[B]<legend>[I]Section B: about your career[/I]</legend>[/B]
� HTML form controls here �
</fieldset>

<fieldset id="[I]sectionC[/I]">
<legend>Section C: about your schooling</legend>
� HTML form controls here �
</fieldset>


Giving each <fieldset> its own id allows you to reference it using CSS or JavaScript individually. Because no form data for a <fieldset> or <legend> exist as such, you do not need to give them a name attribute.

And that, is that - see for yourself

Take a look at an example of a web form, which make use of the above mentioned form elements. The script that the form submits to is a basic PHP script that simply lists the form data that is received, as well as the associated form control names.

Freeola Form Mail Script

As mentioned at the beginning, Freeola offer a pre-coded Form to Mail PHP script, which is automatically available to you via your web space. This script allows you to create your own HTML web form, and have the data filled in by a user sent to one of your Freeola email addresses.

The web address of this script will depend on your domain name. The script is located under your domain name, as /cgi-bin/form_to_mail.php, so if your domain name was johnsmith.com, the web address to the PHP script would be http://www.johnsmith.com /cgi-bin/form_to_mail.php, and so when writing your <form> element, it may look something like this:


<form method="post" action="[I] http://www.johnsmith.com/cgi-bin/form_to_mail.php [/I]">
� rest of form code here �
</form>


You will also need to set some pre-defined values for the PHP script, which you can do using the <input type="hidden"> element, as mentioned near the top of this guide. This MUST include the email address you want the results to go to (one of your Freeola addresses), but may also include:

- The email address you want the results email to appear from.
- The subject you want the results email to contain.
- A list of required form fields the user must fill in before the results are sent.
- The web address of a thank you page once the results are sent.

To have the results sent to you, add your email address as a hidden form element, using the code: <input type="hidden" name="[U]recipient[/U]" value="[B]your Freeola address[/B]">, where your Freeola address should be replaced with which ever Freeola email address you would like to use.

For the other options, to set the from address, use the code <input type="hidden" name="[U]from[/U]" value="[B]from address here[/B]">, which must also be one of your Freeola email addresses. You could previously set this to any email address you liked, which allowed you to use the email address of the person filling in the form, but this was altered by Freeola to prevent spam abuse.

To set the subject of the email sent to you, use the code <input type="hidden" name="[U]subject[/U]" value="[B]email subject[/B]">, where email subject will be the text that appears in the email subject line.

To prevent the form from being emailed to you with empty form controls, you can use the code <input type="hidden" name="[U]require[/U]" value="[B]firstname,age,comments[/B]">. The value of this element must be the exact values you used in each form controls name attribute, divided by a comma. In this example, the form controls with the name attributes set to firstname, age and comments must be filled in by the user before the form will submit.

Finally, to send them to a custom web page once they’ve submitted the completed form, use the code <input type="hidden" name="[U]success_redirect[/U]" value=" [B]http://www.johnsmith.com/thanks.htm[/B]">, where http://www.johnsmith.com/thanks.htm is the full web address of your thank you page.

When putting together your web form, make sure your own name attributes don't clash with the pre-set ones above.

If you have any questions or are in need of a little help with your HTML web forms, you are always welcome to post as such on the Freeola web forums.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Just a quick note to say thanks for a very good service ... in fact excellent service..
I am very happy with your customer service and speed and quality of my broadband connection .. keep up the good work . and a good new year to all of you at freeola.
Matthew Bradley
Excellent support service!
I have always found the support staff to provide an excellent service on every occasion I've called.
Ben

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.