Setting up forms on selected pages within a site is a common way of interacting with your visitors in a variety of ways. You could ask for opinions and comments, collect email addresses for inclusion in mailing list for newletters - or use forms for mainly commercial purposes.
It is important to understand that a form unlike other HTML entities requires processing by a server-side script or application. The information provided by your visitor in the form is sent to the server where is can then be unpacked, manipulated, stored and processed - returning the result back to the visitor in form of a feedback/confirmation page and emailed to specified email address/es.
As the processing requires a specific format and information encoding - a form contains very specific tags within the HTML of your page. A form can consist of various different input methods, such as text fields, drop down menus, radio buttons, check boxes and reset/submit buttons. These elements are contained within the main form tag which opens with <form> and closes with </form>.
<form name="[form name]" action="[url to processing script]" method="get/post">
......
<!-- form elements to go in here -->
......
</form>
The name=" " attribute identifies the specific form element with a unique name and is vital for using several elements of the same kind for different inputs. The action=" " attribute defines URL to the server script or application which will process any supplied data and information - the method=" " attribute specifies how the data gets passed onto the script.
To familiarise ourselves with the different form elements - we will have a look at the scripting of the following:
- text box (1 line only)
- text area (mulitline)
- radio buttons
- check boxes
- drop down selection
- reset / submit buttons
In order to test these form elements we would require the setup of the server-side scripts - for now however - we will simply use the standard "mailto: ... " command instead which will pass the form's values to the email - notice the changes made to the action=" " attribute below:
<form name="name" action="mailto:yourname@email.com" method="get/post"> ...... <!-- form elements to go in here --> ...... </form>
The following will only introduce you to the different form elements - to test the code you will need to have a submit button in place which will then execute the mailto script and show you the result of your form.
text box
One common form element is the single line text box - used for usernames and passwords as well as other personal details. Its code specifies the user input type, an identifying name and the width of the actual box within the page.
To create the box shown above - type out the following code into an HTML page:
<form name="name" action="mailto:yourname@email.com" method="get/post">
<input type="text" name="name" size="60" maxlength="76"
value="<please type here>">
</form>
let's have a look at the code in detail:
this is the standard tag for form elements set to collect user input, in this case the name.
the value of this attribute sets which form of input it is creating, by setting it to text - a sinlge line text box is created.
the value of this attribute acts as a label for the form elements. This label is then used when passing the data onto the server, or in our case the email. By typing in: name we will receive any data as name=yourname
the value of this attribute sets a width of 60 (which is in width of characters rather than pixels). The default value assigned by the browser would be set at 20px.
the value of this attribute allows you to limit the maximum text allowed - this is an important detail as any input could theoretically be infinite.
with the value of this attribute you can add default text to be displayed in the text box (optional).
text area
To allow your visitors to enter more text - as would be the case in a contact or feedback form - you can set up a text area, again specifying an identifying name and the size of the text box.
To create the box shown above - type out the following code into an HTML page:
<form name="name" action="mailto:yourname@email.com" method="get/post"> <textarea cols="60" rows="6" name="feedback"> <!-- any default text to be displayed --> <please type here> </textarea> </form>
let's have a look at the code in detail:
the tag for a multiline text box is somewhat inconsistent with the previously mentioned principle of input values as it does not specifically set an input type and also requires an end tag: <textarea> </textarea>
a text area is defined in the same way as a table layout: in columns and rows - the value of this attribute sets the width of the text box to 60
the value of this attribute sets the height of the text box to 6 rows
the value of this attribute acts as a label for the text area. This label is then used when passing the data onto the server. By typing in: feedback we will receive any data as feedback=any text entered
radio buttons
Radio buttons are commonly used to allow the site visitor a clear choice of 1 option only.
To create the radio buttons as shown above - type out the following code into an HTML page (code shown in bright blue shows the actual text which will appear on the page):
<form name="name" action="mailto:yourname@email.com" method="get/post"> favourite colour: <input type="radio" name="colour choice" value="orange" checked="checked"> orange <input type="radio" name="colour choice" value="purple"> purple <input type="radio" name="colour choice" value="lime"> lime </form>
let's have a look at the code in detail:
as for the single line text box, the code is the same, defining user input...
...and setting the button type to radio which defines this button as a one choice only selection. Selecting one button automatically deselects the others (within the same set, identified by name, see below)
the value of this attribute sets a label for the entire set of radio buttons. This label is then used when passing the data onto the server. By typing in: colour choice we will receive any data as colour choice=text of chosen colour
the value of this attribute is the actual value passed onto the server, the last selected choice will be taken as final
here a default choice has been set by the addition of: checked="checked"
check boxes
Check boxes are used to allow the selection of multiple items, not grouped into a set they collect data on the number and detail of the boxes checked.
lettuce
tomatoes
cucumber
olives
To create the check boxes as shown above - type out the following code into an HTML page:
<form name="name" action="mailto:yourname@email.com" method="get/post"> what's in your favourite salad? <input type="checkbox" name="lettuce"> lettuce <input type="checkbox" name="tomatoes"> tomatoes <input type="checkbox" name="cucumber"> cucumber <input type="checkbox" name="olives"> olives </form>
let's have a look at the code in detail:
again, the code for this form element is defining user input...
...and setting the button type to checkbox defining this button as a multiple choice selection. Selecting one button does not affect the others, the checkbox can be clicked to be checked - and click again to be unchecked.
the value of this attribute is the data passed to the server, here no value is set as each checkbox can be either checked or unchecked and no grouped set is being created.
drop down selection
the drop down menu selections have the same function as the radio button as they only allow the selection of one single item - instead of clicking a button with all choices visible, the drop down menu only shows one given option, displaying the rest once the drop down menu button is clicked.
To create the drop down menu as shown above - type out the following code into an HTML page:
<form name="name" action="mailto:yourname@email.com" method="get/post"> where are you from? <select name="country"> <option value="UK">UK</option> <option value="spain">Spain</option> <option value="netherlands">Netherlands</option> <option value="france">France</option> <option value="germany">Germany</option> <option value="italy">Italy</option> <option value="poland">Poland</option> <option value="lithuania">Lithuania</option> </select> </form>
let's have a look at the code in detail:
the tag for drop down menu box is similar to the text area tag but in addition contains more tags - it also requires an end tag: <select> </select>
the option tag sets the different choices available within the drop down menu - the value of the option last selected is returned when the form data is sent, each option also requires an end tag: <option> </option>
by default showing the first item in the list - this value is the actual value passed onto the server, the last selected choice will be taken as final - again, a default choice could be set by the addition of checked="checked"
reset / submit button
every form will only be prcessed and sent off to the server once it has been submitted.
To create the reset/submit buttons as shown above - type out the following code into an HTML page:
<form name="name" action="mailto:yourname@email.com" method="get/post">
<input type="reset">
<input type="submit" value="Submit">
</form>
... and here you are ;)
Admittedly the result of these form elements is quite an ugly looking form as far as visual layout and styling is concerned - but with the help of a few CSS rules you should have no problem making the page much more attractive ;)
at the moment, a form made out of all elements mentioned above would now look something like this:
all-in-1 form
favourite colour: orange purple lime
what's in your favourite salad?
lettuce
tomatoes
cucumber
olives
where are you from?
