What are Forms?
Forms are the HTML equivalent of paper forms used in everyday life. Forms are the way you receive information from the people visiting your Web site. You can collect information in a variety of different ways for many uses with the use of forms:
- User Defined input: You can have the person using the form type in their data with Text, Textarea and Password input types.
- Predefined input selections: You can have multiple choice or multiple selection predefined input types using Radio buttons, Checkboxes, Drop Down Menus, and Select boxes.
- Specific Read Only Input: The Hidden input value allows you to have a specific unchangeable input value added every time the form is submitted.
Why do I need to learn how to build Forms?
Forms enable your customers to send information from your website to your email address. When you know how to build forms, you can use them for the following:
- Product or Visitor Registration
- Information Requests
- Comments about your Products/Services
- Technical Support
- Surveys / Polls
- Lead Capture
All Electronic Commerce and Web Business applications are enabled through the use of forms. You must have an understanding of how forms work to use the following:
- Catalog Pages
- Shopping Carts
- Subtotal Template Pages
- Total Template Pages
- Allinone "Single Page" Orders
- Credit Card Approval Status
- Pay Per Download
How do I build Forms?
Every web form incorporates the following elements:
- Opening Tag
Within every opening Form tag there are 2 parameters (Method and Action) that need to be specified. The Method parameter must be specified as "Post". The Action parameter is the relative location of the program (CGI) used to process the input from this form.
Example:
<form method="post" action="/cgi-bin/comments.exe">
- Input Fields
You must have at least one input field within your form. The input value (either predetermined or user-determined) is what the form is designed to gather. After choosing "type" of each input you will need to specify a "name" for the input. Depending on the type of input you are using such as checkbox or radio you may also need to specify a value.
Example:
<input type="text" name="email" size="20">
- Submit Button
The Submit button is what is used to send the information from each of the fields in the form. To make a Submit button, specify the input type as "submit". You can specify the text that is displayed on the submit button face by using the value parameter.
Example:
<input type="submit" value="submit this information">
- Closing Tag
This tag indicates that all data after the opening tag and up to the closing tag is what is considered when this form is submitted.
Example:
</form>
The following html demonstrates the complete code needed for a standard email form. Notice that the Opening Tag, Input Fileds, Submit Button, and Closing Form Tag are each represented within this example form.
Email Form HTML
<FORM METHOD="POST" ACTION="/cgi-bin/comments.exe">
<input type="hidden" name="to" value="test@infodial.net">
<input type="hidden" name="template" value="\support\forms\formtest.asp">
Salutation: (select one)
<input type="radio" name="salutation" value="Dr.">Dr.
<input type="radio" name="salutation" value="Miss.">Miss
<input type="radio" name="salutation" value="Mr.">Mr.
<input type="radio" name="salutation" value="Mrs.">Mrs.
<input type="radio" name="salutation" value="Ms.">Ms.
<input type="text" name="FirstName" size="20">First Name:
<input type="text" name="FirstName" size="20">Last Name:
<input type="text" name="email" size="20">Email Address (required):
<input type="submit" value="Submit this Information">
</form>
Email Form Working Example
HTML Form Tags and Specifications
Checkbox
Example HTML Code:
<input type="checkbox" name="InputName" value="TestValue1">1
<input type="checkbox" name="InputName" value="TestValue2">2
<input type="checkbox" name="InputName" value="TestValue3" Checked>3 (already checked)
Parameters:
Checked: Sets the default for the checkbox to be checked/selected.
Name: Specifies a Name that will be associated with a particular checkbox and the checked/selected input data that is returned to the server.
Value: The value passed to the server if this checkbox button is checked/selected.
Hidden
Example HTML Code:
<input type="hidden" name="InputName" value="TestValue">
Parameters:
Name: Specifies a Name that will be associated with this particular hidden input and the value that is returned to the server.
Value: This parameter specifies the value to be returned to the server when the form this hidden input is part of is submitted.
Image
Example HTML Code:
<input type="Image" name="submit" src="/images/submitimage.gif">
Parameters:
Align: You can specify the alignment of the image within the html document as "center", "right", or "left".
Name: Specifies a Name that will be associated with this image, this can be used as an object name in Java, JavaScript, or VBScript.
Src:The (URL) Relative or Absolute location of the image.
Password
Example HTML Code:
<input type="password" name="InputName" value="TestValue" size="20">
Parameters:
Name: Specifies a Name that will be associated with a particular password input and the input data that is returned to the server.
Size: The width of the password input box.
Value: A default value will be displayed in the password input box if you include this.
Radio
Example HTML Code:
<input type="radio" name="InputName" value="TestValue1" checked>1
<input type="radio" name="InputName" value="TestValue2">2
<input type="radio" name="InputName" value="TestValue3">3
Parameters:
Checked: Sets the default for the radio button to be checked/selected.
Name: Specifies a Name that will be associated with a particular set of radio buttons and the checked/selected input data that is returned to the server.
Value: The value passed to the server if this radio button is checked/selected.
Reset
Example HTML Code:
<input type="reset" value="Press to Reset">
Parameter:
Value: The text/characters that are displayed on the face of the reset button.
Select (Drop Down Menus/Select Boxes)
Example 1 HTML Code:
<select name="SelectName" size="1">
<option selected> </option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="1">Four</option>
<option value="2">Five</option>
<option value="3">Six</option>
</select>
Example 2 HTML Code:
<select name="SelectName" size="6">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" Selected>Three</option>
<option value="1">Four</option>
<option value="2">Five</option>
<option value="3">Six</option>
</select>(size="6")
Parameters:
Name: Specifies a Name that will be associated with a particular select input box/drop down menu and the input data that is returned to the server.
Size: If Size=1 then the select is displayed as a drop down menu if the Size=2 or more then the size determines the number of selections to be visible within the select "box".
Option: Each selection within the select input must have an <option> and an </option> tag.
Value: Within the Option tag this parameter specifies the input to be returned to the server when this option is selected.
Selected: Sets an Option a selected by default. The user can unselect a selected option if they wish.
Submit
Example HTML Code:
<input type="submit" value="Press to Submit">
Parameters:
Name: Specifies a Name of this submit form element. This can be used to identify the submit button within Cascading Style Sheets and Web languages like Java, JavaScript, and VBScript.
Value: The text/characters that are displayed on the face of the submit button.
Text
Example HTML Code:
<input type="text" name="InputName" value="TestValue">
Parameters:
Maxlength: Specifies the maximum characters that can be typed.
Name: Specifies a Name that will be associated with a particular text input and the input data that is returned to the server.
Size: The width of the text input.
Value: Any specified value will be displayed in the text input by default.
TextArea
Example 1 HTML Code:
<textarea name="InputName" rows="3" cols="30">Type Your Comments Here</textarea>
Parameters:
Cols: Defines the width of the Textarea.
Name: Specifies a Name that will be associated with a particular textarea and the input data that is returned to the server.
Rows: Defines the height of the textarea.
Predefined Text: You can specify text that will appear in the text area by placing the text you wish to display between the <textarea> and </textarea> tags.
|
FORMS OVERVIEW