Welcome to FormGenics.com!

FormGenics is a HTML Form code generator. It creates the necessary HTML and JavaScript code for any form that you create using the easy question and answer styled wizard.

What kind of forms can you create with FormGenics? You can create email contact forms, membership sign-up forms, log in forms, application forms, cool HTML forms, download forms, comment forms, polls, support ticket forms, simple forms, complex forms...

If you have ever had difficulties creating a HTML form or are just too busy to write one from scratch, then you are in the right place!

Easy, simple, and free. Click here to get started right away or quickly view the Quick Start Instructions. For more advanced help, check out the Comprehensive Help Guide and our Support Forum.

create form
support forum
terms of use
Quick Start Guide
Comprehensive Help Guide
Support Forum

Back to Basics
Forms Part 1
Back to Basics
Advanced Forms Part 2
Back to Basics
Form Tips & Tricks Part 3
Designing Consistent Form Field Sizes
Getting the Most Out of Your Form
Form Processing - Working with CGI



Spend less time filling out forms and more time using the dish network discounts on a directv hd dvr satellite receiver from Tv-Providers.com so you can be watching cheap cable and satellite dish directv instead!

Back to the Basics and Beyond

Basic Forms Tutorial

Part 1
By Shelley Lowery

If you've been on the Internet for a while, you've probably filled out a number of online forms. Forms are used to obtain information from your visitors right through your website. Your visitors can input their information into your form, click on a "submit" button and their information will be directed to a location you specify.

If you're running a business on the Internet, using a form to process your customer's orders is an absolute must. I'm amazed at the number of websites that are still processing their customer's orders via snail mail. If you're not automating your ordering process, you're losing a significant amount of business every day.

Most Internet users won't take the time to print out an order form, place it in an envelope and send you their order -- their time is valuable. You must make the ordering processas simple as possible. This includes setting up a form on your website to process their orders electronically.

Forms are used for all of the following:

  • Order forms
  • Email subscriptions
  • Contest registrations
  • Databases
  • Autoresponders
  • User identifications and passwords
  • Feedback

This series will take you step by step through the entire process of setting up a form on your website including:

  • Basic Form Tutorial
  • Advanced Forms
  • Form Tips and Tricks
Basic Form Tutorial

Your first step in creating a form will be to get a good form script. This script will reside on your server within your CGI-bin and will be used to process your form's information. You can find some great scripts here: http://cgi.resourceindex.com/Programs_and_Scripts/Perl/

To insert a form on your web page, we will begin with and end with <form> </form>.All of the FORM elements will be placed between the FORM tags.

In order for a form to function, it first needs to know how to send the information to the server. There are two methods, GET and POST.

METHOD="GET" - This method will append all of the information from a form on to the end of the URL being requested.

METHOD="POST" - This method will transmit all of the information from a form immediately after the requested URL. This is the preferred method.

In addition to a form needing to know how to send the information, it also needs to know where to send the information to be processed. The ACTION attribute will contain the URL to the form processing script or it may contain an email address.

Example Form:

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10">
<type="Submit" VALUE="Submit">

Example Email Form:

<FORM ACTION="mailto:[email protected]">
Name: <INPUT name="Name" value="" size="10">
Email: <INPUT name="Email" value="" size="10">
<INPUT type="submit" value="Submit">

The email form will simply process the information that is placed within your form and send it to your email address. A CGI script is not required.

Notice when the ACTION attribute references an email address, you don't have to include the METHOD attribute.

Form Element Attributes

Method - Determines which http method will be used to send the form's information to the web server.

Action - The URL of the form processing script that resides on the server. This script will process the form's information.

Enctype - Determines the method used to encode the form's information. This attribute may be left blank (default) unless you're using a file upload field.

Target - Specifies the target frame or window for the response page.

Form Element Properties
  • Text boxes
  • Hidden
  • Password
  • Checkbox
  • Radio button
  • Submit
  • Image submit
  • Reset

These properties are specified by using the TYPE attribute within the form's INPUT element.



Input Attributes

  • TYPE - Type of input field
  • NAME - Variable name sent to the form processing script.
  • VALUE - Information associated with the variable name to be sent to the form processing script.
  • MAXLENGTH - Maximum number of characters that may be placed within an input area.
  • SIZE - The size of the input text area.
  • CHECKED - Default button or box selection.
<INPUT TYPE="text">

Enables users to input text such as an email address.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="TEXT" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">

Text Box Attributes

  • TYPE - Text
  • SIZE - The size of the text box specified in characters.
  • NAME - Name of the variable to be processed by the form processing script.
  • VALUE - Will display a default value within the text box.
  • MAXLENGTH - Maximum number of characters that may be placed within the text box.
<INPUT TYPE="hidden">

Used to send information to the form processing script that you don't want your visitors to see. Nothing will show through the browser.

<INPUT type="hidden" name="redirect"

Hidden Attributes

  • TYPE - Hidden
  • NAME - Name of the variable to be processed by the form processing script.
  • VALUE - The value of the hidden name expected by the form processing script.
<INPUT TYPE="password">

Used to enable users to enter a password. When a password is typed in, asterisks will appear instead of text.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="password" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">

Password Attributes

  • TYPE - Password
  • NAME - Name of the variable to be processed by the form processing script.
  • VALUE - Usually blank.
  • SIZE - The size of the text box specified in characters.
  • MAXLENGTH - Maximum number of characters that may be placed within the text
  • box.
<INPUT TYPE="checkbox">

Enables the user to select multiple options.

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="CHECKBOX" name="selection1"> Selection 1
<INPUT type="CHECKBOX" name="selection2"> Selection 2
<INPUT type="CHECKBOX" name="selection3"> Selection 3
<INPUT type="Submit" value="Submit">

Check Box Attributes

  • TYPE - Checkbox
  • CHECKED - Specifies a default selection.
  • NAME - Name of the variable to be processed by the form processing script.
  • VALUE - The value of the selected check box.

In the next part of this series, we will finish the form element properties and move on to some more advanced form options. Make sure you don't miss this powerful series.

Copyright © Shelley Lowery

About the Author:

Shelley Lowery is the author of the acclaimed web design course, Web Design Mastery. http://www.webdesignmastery.com And, Ebook Starter - Give Your Ebooks the look and feel of a REAL book. http://www.ebookstarter.com Visit Web-Source.net to sign up for a complimentary subscription to Etips and receive a copy of the acclaimed ebook, "Killer Internet Marketing Strategies." http://www.web-source.net

forum  |  contact  |  articles  |  donate  |  privacy policy  |  site map  |  link to us
copyright ©2011 FormGenics.com | all rights reserved