logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Parts of a Website Form

Guest Author - Elizabeth Connick

Many websites can benefit from a little interactivity. Forms allow users to enter information on everything from feedback to quizzes, and can be particularly useful for business sites – nearly every business website has a contact form, for example.

To build a functional form you’ll need a program running on your server to collect the information. Setting up the code that will do the backend functioning is beyond the scope of this article; fortunately there are a number of free scripts available for download in the programming language of your choice, so even minimal familiarity with a language such as PHP will allow you to post forms to your website.

In order to build the front-end of your form, the part that your visitors will see, you will need to begin and end with the <form></form> tags. You can modify the <form> tag with several different attributes to specify how the form should be processed. The “action” attribute tells the form where the code is located that will drive the actual form processing. The “name” attribute identifies the form for the processing code. The “method” attribute tells the code which method to use when processing the form – typically either POST, which keeps the information provided by visitors hidden after processing, or GET, which displays the information in the final URL once the form is processed.

Once you’ve set up your <form></form> tags, it’s time to fill in the form itself. You have a number of interactive options to provide your visitor, depending on the nature of the information you’re collecting. Here are the most commonly used field options:

Text fields: These provide a place for your visitor to enter a short line of text, such as a name or email address. You can create text fields with the <input type="text"> tag. Notice that the "input" tags do not have a closing tag, so to render them properly in XHTML you will have to close them internally as <input type="text" />.

Text areas: These provide a larger space for your visitors to enter text, and are often used for comments or other narrative data. You can create text areas with the <textarea></textarea> tags.

List or Menu fields: These create a drop-down list so that your visitor can select one or more predefined options. You’ll frequently see these fields in surveys; for example, a user might be asked to select their age from a series of ranges. You can create drop-down lists and menus with the <select></select> tags. Within these tags, you'll put each individual option between <option></option> tags, so a list will look something like:

<select>
<option>Name of first option</option>
<option>Name of second option</option>
</select>

Radio buttons and check boxes: Another way for visitors to choose one or more predefined items, and very common on forms. A list of check box or radio button options will take up more room on the page than a drop-down menu, but it does allow the visitor to see all the options at once. Use radio buttons if you want the visitor to select only one of the possible options (for example, if you ask for the visitor’s favorite color). If you want the visitor to be able to choose more than one option, use check boxes (for example, if you ask the visitor to indicate all of the colors he or she likes). Checkboxes use the <input type="checkbox"> tag and radio buttons use the <input type="radio"> tag.

Finally, you'll need a way for visitors to indicate that they've finished entering their information. This is normally handled through the Submit button, which you can include with the <input type="submit"> tag. Clicking this button will send the form data to your server for processing.
This site needs an editor - click to learn more!

Add Parts+of+a+Website+Form to Twitter Add Parts+of+a+Website+Form to Facebook Add Parts+of+a+Website+Form to MySpace Add Parts+of+a+Website+Form to Del.icio.us Digg Parts+of+a+Website+Form Add Parts+of+a+Website+Form to Yahoo My Web Add Parts+of+a+Website+Form to Google Bookmarks Add Parts+of+a+Website+Form to Stumbleupon Add Parts+of+a+Website+Form to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor