Forms are a way for your sites' visitors to 'send' you information. They fill out a Form & press the 'Submit' button & that's it. Simple for the user!
But how do you create the forms, and what happens when the user presses the 'Submit' button? We'll discuss both these issues below.
A Form is made up of HTML Tags just like any other part of HTML. The basic structure of a form is:
<form></form>
You need to insert this between the <body> & </body> TAGS of your webpage, in the place you want the Form to appear:
<html>
<head>
<title></title>
</head>
<body>
<form></form>
</body>
</html>
Inside the opening <form> TAG, you need to specify 4 things:
<form name="" action="" method="" enctype="">
name=""
Give your form a name. If you have more than 1 form on a page, make sure you give them different (unique) names.
action=""
What you want to happen when the Submit button is pressed. Generally you would put the URL of a form processing script in here.
method=""
Specify what format you want the form data transmitted in, GET or POST. GET sends the data in URL format and will be visible in the users address bar, and recorder in the browser history. POST sends the data in a hidden format, and so is better for more sensitive information like Usernames & Passwords.
enctype=""
For basic text based data in your form, you can miss this out completely. If you want to send files however, you'll need to specify the correct 'enctype' or the file won't be sent.
Example:
<form name="myform" action="formprocessor.php" method="POST" enctype="multipart/form-data">
Inside the <form> & </form> TAGS, you can use any other HTML code to define font colours, sizes, images etc., that we demonstrated in the HTML Tags chapter, but you can also specify the individual 'entry fields' to use, for your visitors to fill in.
There are 3 main 'entry field' types:
<input>
<select>
<textarea>
We'll explain these below, and show you how to use them.
<input>
Specifies text entry fields and checkboxes, radio buttons and push buttons
Below is a table of all the 'entry fields' defined with <input>.
| Input Element | Name | Code |
| Text | <input type="text"> | |
| Password | <input type="password"> | |
| File | <input type="file"> | |
| Checkbox | <input type="checkbox"> | |
| Radio Button | <input type="radio"> | |
| Submit Button | <input type="submit"> | |
| Reset Button | <input type="reset"> | |
| Image Button | <input type="image"> | |
| Hidden | <input type="hidden"> |
Lets explain each type="":
text
This specifies a 1 line text entry field. Use it for things like "name", "email" etc.
Give it a name="" so you know what field it is, and make it whatever size you like with size="". You can also specify how many characters users are allowed to type in this field by using maxlength=""
Example: <input type="text" name="Email" size="15" maxlength="30">
password
Exactly the same as text above, but whatever the user types in this box is not visable and is replaced by ******.
Example: <input type="password" name="Password" size="15" maxlength="8">
file
This lets users select a file from their harddrive to upload with the form.
Example: <input type="file" name="Photo" size="15">
checkbox
These let the user 'select' an option by ticking it. You can have 1 or more checkbox, and they can all be ticked, none of them ticked, or only some of them ticked. Make sure you give each checkbox a different name="" so you know which ones were ticked, and give them a value="" which is what gets sent to you when they are ticked. Use checked to specify which checkbox is initially ticked (if any).
Example:
<b>What would you like:</b> <input type="checkbox" name="Hamburger" value="Yes">Hamburger <input type="checkbox" name="Chips" value="Yes" checked>Chips
Would produce:
What would you like: Hamburger Chips
radio
Like checkbox above, you can have as many radio buttons as you like, however... only 1 of them can be selected at a time, giving a 'this or this' choice. Make sure you give each radio button (per question) the same name=""!!!! Use checked to specify which radio button is initially selected.
Example:
<b>Would you like a Drink:</b> <input type="radio" name="Drink" value="Yes" checked>Yes or <input type="radio" name="Drink" value="No">No
Would produce:
Would you like a Drink: Yes or No
submit
This is the button used to submit the Form. Only change it's value="" to whatever you want the button to say. Do not change anything else.
Example: <input type="submit" name="submit" value="Send Form">
reset
This button resets the form back to it original state (wipes out anything typed or selected). Only change it's value="" to whatever you want the button to say. Do not change anything else.
Example: <input type="reset" name="reset" value="Clear Form">
image
You can use your own image as the submit & reset buttons if you wish. Instead of the codes above, use this instead:
Example: <input type="image" name="submit" src="mysubmitbutton.jpg">
hidden
Use this to pass hidden information to yourself. For example, if you have 2 Forms on your website, you might like to know which Form was filled in. To each Form you could add a hidden field which would tell you which Form was submitted.
Example: <input type="hidden" name="WhichForm" value="Contact">
<select>
Specifies a drop down menu or selection box.
Here's an example of a drop down list to select colour:
<select name="favouritecolour">
Here is what that code would produce:
<option>green
<option>aquamarine
<option selected>emerald
<option>turquoise
<option>aqua
<option value="green2">green
<option value="green3">green
</select>
Lets explain the above code:
<select></select>
Specifies a Select (or drop down box) field.
name=""
Specifies a name for the field.
<option>
These specify each option in the list. You can have as many of these as you like. Any text after this will be what's shown.
selected
Use this to specify which option is initially displayed when the form first loads. Usually something like "Please Select". You need to place this inside the <option> TAG.
value=""
This specifies what will be sent to you when a visitor selects that option. You can miss this out completely, and the text after the option is what will be sent to you. However, if you have more than 1 option with the same name (as we do above - we have 3 x "green"), you need the extra value="" to know which option they selected.
<textarea>
Specifies a multi-line text entry field. This is usually a large box where users can type in a message to you.
Example:
<textarea name="message" rows="10" cols="30">Enter your message here</textarea>
This is what it looks like:
Lets explain the code above:
<textarea></textarea>
Specifies a 'text area entry field'
name=""
Specifies what you want the text area to be called.
rows="" & cols=""
These specify the size of the text area.
Enter your message here
You can miss this out completely if you want & the text area will be blank. Any text that you do type between the <textarea> & </textarea> TAGS is the text that will initially display in the text area.
Given everything above, here is an example of a form:
We've placed the Form in a table so it looks better - See HTML Tables for more.
<form>
<table width="600" bgcolor="#000080" border="1" bordercolor="#FFFFFF" cellspacing="2" cellpadding="5">
<tr>
<td colpan="2" align="center" width="500"><font color="#FFFFFF"><b>My Form</b></font>
</td>
</tr>
<tr>
<td align="right" width="250"><font color="#FFFFFF">Name:</font>
</td>
<td align="left" width="250"><input type="text" name="Name" size="10">
</td>
</tr>
<tr>
<td align="right" width="250"><font color="#FFFFFF">Email:</font>
</td>
<td align="left" width="250"><input type="text" name="Email" size="20">
</td>
</tr>
<tr>
<td align="right" width="250"><font color="#FFFFFF">Tick if you like my website:</font>
</td>
<td align="left" width="250"><input type="checkbox" name="Like_Site" value="YES">
</td>
</tr>
<tr>
<td align="right" width="250"><font color="#FFFFFF">Do you like my website:</font>
</td>
<td align="left" width="250"><input type="radio" name="Like_Site2" value="Yes"><font color="#FFFFFF">YES</font> <input type="radio" name="Like_Site2" value="NO"><font color="#FFFFFF">NO</font>
</td>
</tr>
<td align="right" width="250"><font color="#FFFFFF">What's the best bit of our site:</font>
</td>
<td align="left" width="250"><select name="Like_Best">
<option>It's Layout
<option>It's Colour Scheme
<option>It's Fast Loading
<option>It's Easy to Understand
<option selected>Please Select
</select>
</td>
</tr>
<tr>
<td align="right" width="250"><font color="#FFFFFF">Your Message:</font>
</td>
<td align="left" width="250"><textarea name="message" rows="10" cols="30">Enter your message here</textarea>
<tr>
<td colspan="2" align="center" width="500"><input type="submit" value="Send Form"> <input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
And here is what it looks like:
Now that you know how to create your Form, how do you get the data from it sent to you? You need a form processing script!
When a user presses the submit button, the data in the form gets sent to a 'script' (a set of instructions) on your server. The 'script' takes your data, makes sense of it, organises it into a readable format & then sends it to the email address you specify.
These 'form proccessing scripts' can be written in many different scripting languages, and so which one you should use depends on your level of skill, and what you want the 'script' to do.
You can either write one yourself, or use a ready-made one. We show you how to write a simple form processing script in the PHP section PHP Form Processor
Once you've decided which 'form processing script' to use, you need to tell your Form to send it's data to that 'script', by including it's URL in the action="" part of the <form> TAG.
All rights reserved.