introductionform definition
text input
password input
hidden input
textarea
select option
checkboxes
radio buttons
file (upload)
submit & reset buttons
Email Validation
Form Processing
FormGenics.com's Form Generator is an on-line HTML form maker. It compiles the proper JavaScript and HTML code necessary to produce a customized HTML form based on your input. Simply click on your desired form input type and fill in the required data. When you are finished, click on the "show code" option and cut & paste the code into your HTML document.
FormGenics includes the proper JavaScript code for easy validation. You'll get to select which fields need be required and it can validate multiple Email addresses!
An HTML form is a section of a document containing normal content, markup, special elements called controls, or field inputs, (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
A form typically includes labels, radio buttons, and push buttons (reset the form or submit it). It allows the visitor to intractively enter text, select options, check boxes, and then send the information out for processing.
The form element itself must have properties defined. These properties, or attributes, include a name, an action, a method, and a enctype:
A form's name can be anything that relates to that form, keeping in mind normal control naming conventions (only letters a-z,A-Z; and numbers 0-9;beginning only with a letter,etc.).
Examples: myForm, commentForm, contactform, membership_signup, etc.
A form's encoded data is sent to a processing agent such as a perl or php script, either on your own website or somewhere else (remotely hosted) to be rendered. Depending on the processing agent, this rendering may be an sending out the form's data via email or storing it in a database.
This processing agent is pointed to by the "action" attribute. In other words, if your form's data is to be processed by a script on your site, then the action attribute may look something like: action="yourprocessingscript.pl" or action="http://www.yourwebsite.com/yourprocessscript.php".
Please refer to our list of processing scripts & remotely hosted form processing sites for particular individual processing options.
How the form input is sent to the server depends on the METHOD and ENCTYPE attributes. When the METHOD is get (the default), the form input is submitted as an HTTP GET request with ?form_data appended to the URI specified in the ACTION attribute.
Using the get method allows the form submission to be contained completely in a URL. This can be advantageous in that it permits bookmarking in current browsers, but it also prevents form data from containing non-ASCII characters such as "é" and "©". As well, the amount of form data that can be handled by the get method is limited by the maximum length of the URL that the server and browser can process. To be safe, any form whose input might contain non-ASCII characters or more than 100 characters should use METHOD=post.
With a METHOD value of post, the form input is submitted as an HTTP POST request with the form data sent in the body of the request. Most current browsers are unable to bookmark POST requests, but POST does not entail the character encoding and length restrictions imposed by GET.
The ENCTYPE attribute specifies the content type used in submitting the form, and defaults to application/x-www-form-urlencoded. This content type results in name/value pairs sent to the server as name1=value1&name2=value2... with space characters replaced by "+" and reserved characters (like "#") replaced by "%HH" where HH is the ASCII code of the character in hexadecimal. Line breaks are encoded as "%0D%0A"--a carriage return followed by a line feed.
Authors should generally only use a different ENCTYPE when the form includes a TYPE=file INPUT element, in which case the ENCTYPE should be multipart/form-data and the METHOD must be post. The format of multipart/form-data requests is given in RFC 1867.
An interactive form consists of controls, or input fields, that allow a visitor to enter data, select an option from a menu, check a box, or push a button. These controls are identified by field names and id's. The Displayed name is the text that is rendered, or displayed, next to the field input. The field name is not rendered and is not displayed to the visitor.
Each control has one or more of the follwing attributes that must be set:
A text input is a single line text input field.
Example:
Required settings:
Displayed Name, Field Name, Required?
Optional settings:
Value, Label Access Key, Size, Maxlength
A password input is a single line text input field that has its characters masked using the asterick (*) character. Although the password is masked by user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.
Example:
Required settings:
Displayed Name, Field Name, Required?
Optional settings:
Value, Label Access Key, Size, Maxlength
a hidden control is not rendered (displayed) but its value is submitted with the form. Authors generally use this control type to store information between client/server exchanges.
NOTE: This field will be set outside the form's table container but within the form control. It will be displayed below the editing view within a textbox.
Required settings:
Field Name
Optional settings:
Value
A textarea is a multi-line text input field. Its size is configured using the rows and cols attributes.
Example:
Required settings:
Displayed Name, Field Name, Required?
Optional settings:
Value, Label Access Key, rows, cols
Select creates menus that offer users options from which to choose. The SELECT element creates a menu, in combination with the OPTION elements.
Example:
Required settings:
Displayed Name, Field Name, Option Names, Required?
Optional settings:
Value, Label Access Key
Checkbox creates checkboxes that the user may check, or toggle, on or off. The checkbox control allows for multiple selection. The Option Names field defines the boxes and the boxes names. In the following example, the Checkbox Option Names field would be: red,white,blue and the value field would be: white.
Example: red white blue
Required settings:
Displayed Name, Field Name, Option Names, Required?
Optional settings:
Value, Label Access Key
Radio Button input creates buttons that the user may check, or toggle, on or off. The radio button control allows for only single selection. The Option Names field defines the buttons and the button names. In the following example, the Radio Option Names field would be: red,white,blue and the value field would be: white.
Example: red white blue
Required settings:
Displayed Name, Field Name, Option Names, Required?
Optional settings:
Value, Label Access Key
The file input type creates a field through which users can upload files from their local computer or network. A form that includes a FILE INPUT must specify METHOD=post and ENCTYPE=multipart/form-data. This form generator will catch this and prompt the change.
Example:
Required settings:
Displayed Name, Field Name, Required?
Optional settings:
Value, Label Access Key, Size
The form MUST have a submit button and optional should have a reset button. The submit button triggers: 1 - the validation of required fields, and 2 - submits the form based off the form's action attribute. The optional reset buttons allows the user to clear the form and reset its values to the default values.
This generator allows you to rename these buttons or with the reset button, not display the button at all.
Examples:
Required settings:
Displayed Name, Field Name, Required?
Optional settings:
Value, Label Access Key, Size
To create an Email Address input and have its content validated as a valid Email Address is simple. Just create a text input field and as a field name, use the word "email" in the first part of the name.
Examples of field names that will trigger an email validation:
email
email1
Email2
EmailAddress
EmailConfirm
Any of the above will cause this form generator to produce the necessary JavaScript code to valid its value.
There are dozens of method to choose from when deciding on how to process your form data. The easiest way is to use a remotely hosted form processing site. Most offer free services if the volume of processes are low.
However, the best way to process your form's data is through a perl or php script residing on your own website. We use and highly recommend the PHP script NateMail even if you don't no how to use PHP. If your web host server supports PHP, then you can use this script. It is extremely easy to setup and very secure.
Here is a list of other form processing options: