This assumes you know about HTML forms, the INPUT field and some common attributes and the basics of how forms work.
There are a range of other fields which can be used in forms. The most common are below This leads to an example page in case you get stuck on any of the fields below but try it yourself first. Paste an example of each one into the form created during the HTML forms page above. You may remember that the form you first created sends it's data to a page on this server which then displays your data.
INPUT types
As well as the text type there are other INPUT element types:
- type="password" is a text field where what is typed is shown as asterisks (stars)
- type="reset" gives a button like the submit one but it clears the data which has been entered into the form (but why?)
- type="hidden" means the field is invisible (useful for JavaScript)
- type="image" will allow a graphical submit button where the value is the position of the mouse cursor when clicked so that the server script can do different things depending on position but this is not encouraged (accessibility suffers)
- type="file" gives a browse button to select and send a file as part of the form
- type="checkbox" and type="radio" which are covered separately below
Change the type="text" from a form to password and try it. Try the others as well.
Checkbox and radio
These allow the user to enter data just by clicking.
The INPUT type="checkbox" provides an on/off toggle field for the user to say "yes" or "no" quickly. It is possible to have more than one checkbox. The value set for each checkbox is what is sent.
<p>What colours do you like?</p>
<p><label for="check1blue">Blue </label><input type="checkbox" name="check1" value="blue" id="check1blue" /></p>
<p><label for="check1green">Green </label><input type="checkbox" name="check2" value="green" id="check1green" /></p>
<p><input type="submit" /></p>
Paste the code into the page and try it.
The INPUT type="radio" is basically a checkbox but if they are grouped (by having the same name) only one can be selected. This is more or less the same as the last chunk of code:
<p>What is your favourite colour?</p>
<p><label for="radio1blue">Blue </label><input type="radio" name="radio1" value="blue" id="radio1blue" /></p>
<p><label for="radio1green">Green </label><input type="radio" name="radio1" value="green" id="radio1green" /></p>
<p><input type="submit" /></p>
The radio elements have different IDs to allow use of labels, JavaScript and CSS.
SELECT and OPTION (and OPTGROUP)
A SELECT field is a drop down list of options. The user can select one or more:
<form method="get" action="fred.php">
<select name="colour">
<option>blue</option>
<option selected>green</option>
<option>red</option>
<option>pink</option>
<option>black</option>
</select>
<input type="submit" />
</form>
Paste the code into the page and try it.
To have one item in the list automatically selected by default use the SELECT attribute (green is selected above).
If no VALUE is set then the text inside the OPTION tags is sent to the server instead.
It is also possible to allow the user to select multiple entries in the list and to have more than one item shown:
<form method="get" action="fred.php">
<select name="colour" size="4" multiple>
<option>blue</option>
<option selected>green</option>
<option>red</option>
<option>pink</option>
<option>black</option>
</select>
<input type="submit" />
</form>
To select more than one item the user needs to use the control key on their keyboard.
OPTGROUP is used to organise the options in a SELECT list:
<form method="get" action="fred.php">
<select name="colour">
<optgroup label="pretty colours">
<option>blue</option>
<option selected>green</option>
<option>red</option>
</optgroup>
<optgroup label="nasty colours">
<option>pink</option>
<option>black</option>
</optgroup>
</select>
<input type="submit" />
</form>
Text area
This allows the user to type in a bigger area and include carriage returns. It does not allow formatting:
<textarea name="essay" rows="20" cols="50"></textarea>
Anything within the two TEXTAREA tags appears as a default value in the field. Add it to a form.
Results
Things to note when creating a form:
- the data is all sent to the server and stored there
- each item of data has a label (or key) which is the NAME attribute of the field it came from
- the value of the item in an array is generally the VALUE attribute in the INPUT element with exception of
- the FILE field where most browsers ignore the VALUE attribute and the user must browse for a file
- the CHECKBOX where the VALUE is used only when the box is ticked (no array entry is sent at all if it is not ticked)
- the RADIO buttons where only the value of the checked one is sent
- the SELECT where the content of the selected OPTION element is sent if the OPTION element has no VALUE attribute
- the two fields which store their data as an array or displayed by print_r as a sub-array of the overall form data
You should be able to see all of that in your form page when you submit it.
Layout
By default form fields are in-line elements and that is why the submit button in this example is on the same line as the text INPUT.
The fields could be put inside P tags for simple layout but often a complex form needs more than that. Nested DIVs would allow the labels and fields to be lined up nicely. Or perhaps a DIV for the labels and another floated alongside it for the fields. Take care what happens with different sized fonts (for accessibility) or when the browser window changes size.
Have a go at laying out your form fields nicely. Look at some forms on the Web for ideas if you need them.
