How To Make An Online Form
-
David
-
February 20th, 2012
Online forms are the most common website add-on out there. You won't visit many sites that don't contain a form of some kind. You'll forms on contact us pages, you'll find them as a way for a website to generate leads such as a mortgage company, just about any reason you would need someone to send you information is handled through a form.
A Web page form allows users to input and submit data, such as order information or user information. Forms include form elements, where users input their data.
There are several types of form elements to consider when creating a form:
- Text box - Allows users to enter a line of text.
- Text area - Allows users to enter multiple lines of text.
- Radio button - Allows users to select an option from a group of options. Radio buttons are shown as circles with space in the center for a dot that indicates the radio button has been selected.
- Checkbox - Allows users to select options from a group of options. Checkboxes are shown as squares with space within the borders for an X that indicates the checkbox has been selected.
- List - Allows users to select options from a group of options. Lists are shown as a drop-down list or a list box.
- Button - Allows users to click a button to call JavaScript code. For example, by clicking the Submit button, the user calls the JavaScript code that submits the form.
Form Text Fields
Text fields allows for letters & numbers.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
Here is how it will appears in on your website:
Last name:
Radio Buttons
Radio buttons allow a user to select a specific item from a list.
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Female
Checkboxes
Checkboxes allow a user to select multiple items from a list.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
Submit Button
The submit button allows a user to submit the information that they have entered into your form. A couple of ways that this can be handled is by sending you an email directly or writing the information to a database for future use.
<form name="input" action="html_form_action.asp" method="get">
Name:<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Sample Online Form
Form Scripts
Now you've built your form but what next? You will need a script to process the form and send the information to you whether it be by email or by submitting it to a database. I cover the scripts that are commonly used for emailing the information in the second part of my tutorial on online form scripts.