Form Tags

These are the HTML tags used for creating a form.

<form...>

This lets the web browser know this is the start of a form. The next two attributes modify the <form> tag.

method="post"

This tells the browser to send the information as a data stream. This is the correct method for sending the data to a basic CGI script, like a Guest Book.

action="http://www.host.com/
.../cgi-bin"

This specifies the address of the script that will process the data and should contain the full URL, check this with your ISP. Alternatively it could be sent directly to you as an e-mail by using action="mailto:your_email_address". If you do this also add enctype="text/plain" to the tag.

Next will come the actual input fields of the form, described below.

</form>

This is the end tag for the form.

These are the tags used for the form input and select fields. Each type of field has its type specified and each field has a name to distinguish it from the other fields on the form. Is is best to make the field NAMEs simple and logical so you will understand which question or option the value is in response to.

This is the HTML code used for the fields in the demonstration form (replace the text in green below with your own details).

Check Boxes

Question 1 <br>
A <input type="checkbox" name="Question1_A" value="on">
B <input type="checkbox" name="Question1_B" value="off">

This creates the two checkbox fields, named Question1_A and Question1_B. The default values (on or off) are also specified.

Question 1
A B

Radio Buttons

Question 2 <br>
A <input type="radio" name="Question2" value="A">
or B <input type="radio" name="Question2" value="B">

This creates the two radio buttons, both named Question2, this makes them mutually exclusive. The values specified will be returned as the reply data.

Question 2
A or B

Text Box

Your Name: <br>
<input type="text" maxlength="20" name="Your_Name" value="Mr" size="20">

This creates a single line text box, named Your_Name, containing the default value "Mr". You do not have to specify a value, but it can make it easier to fill in your form if you anticipate the most likely answer.

The maxlength parameter specifies how many characters can be entered. You do not need to use this unless you have to restrict the input for brevity, clarity or to comply with restrictions imposed by a form script.

The size parameter sets how many characters will be visible on the screen, but this will be affected by the font used for the display. If the characters do not fit in the box they will scroll across.

Your Name:

Scrolling Selection Box

How often do you wash your car? <br>
<select name="Car_Wash" size="3">
<option value="daily">daily </option>
<option value="weekly">weekly </option>
<option value="monthly">monthly </option>
<option value="yearly">yearly </option>
<option value="sometimes">sometimes </option>
<option value="never">never </option> </select>

This a list select field named Car_Wash. The size parameter here sets how many lines of options are visible.

Each option line has a value, that will be sent as the reply data, followed by the text that is highlighted in the selection box.

Each option needs an </option> end tag and the selection field requires a </select> end tag otherwise it may conflict if there is another selection field in the form.

This is most useful for very long lists of option values, so that a few are visible at once. It is best to put the options in a logical order, depending on the type of answer. This may be alphabetical or numerical, or the most likely answers first.

How often do you wash your car?

Dropdown Selection Box

What is you favourite colour? <br>
<select name="Fav_Colour" size="1">
<option value="red">red </option>
<option value="orange">orange </option>
<option value="yellow">yellow </option>
<option value="green">green </option>
<option value="blue">blue </option>
<option value="indigo">indigo </option>
<option value="violet">violet </option> </select>

This a list select field named Fav_Colour. The size parameter sets how many lines of options are visible. Making size="1" forces it to become a dropdown box.

Each option line has a value, (that will be sent as the reply data) followed by the text that will be shown in the selection box.

Each option needs an </option> end tag and the selection field requires a </select> end tag otherwise it may conflict if there is another selection field in the form.

This is most useful for shorter lists of option values, up to about ten, so that the drop-down box is not too long. It is best to put the options in a logical order, depending on the type of answer.

What is you favourite colour?

Text Area

Describe your house <br>
<textarea name="House_text" rows="3" cols="20"></textarea>

This creates a textarea that will accept free text. It is named House_text and the rows and cols parameters set the visible screen size of the textarea. If the box is not large enough it will start to scroll down as necessary.

This field needs a </textarea> end tag.

Describe your house:

Submit and Reset Buttons

<input type="submit" value="SEND">
<input type="reset">

These lines create the submit and reset buttons. The text that appears on the buttons is set by the value parameters.

You can assign your own field names and values to the fields on your form. The values do not need to be words or sentences, a single letter or number could be used as long as each value in a particular field is different and as long as you will recognise what the value represents.

If you specified a script address to handle the data in the form the results will appear similar to the example of the test form.

  • You can use a working form to send your comments or questions about this item.