Forms in HTML:
HTML Forms are required when you want to collect some data from the site visitor. For example registration information: name, email address, credit card, etc.
A form will take input from the site visitor and then will post your back-end application such as CGI, ASP Script or PHP script etc. Then your back-end application will do required processing on that data in whatever way you like. Form elements are like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. which are used to take information from the user.
The FORM element is the element that surrounds all forms on a web page.
The FORM element has the following attributes:
Action:
This attribute tells the browser the location of the script that will process this form. Normally, this is a JavaScript, Perl script, or other program located on the web server.
Method:
The method attribute defines how the browser should submit the form data. There are two methods you can use: get and post. The get method puts the information in a query string. Get is the default method, and sends the form data attached to the URL after a question mark (?). For example:
http://www.server.com/cgi-bin/test.pl?name=value
The post method sends the form information as a data block to the server through HTTP protocols. This method is not visible to the end user, and is best for most standard forms.
Enctype:
You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are like:
• application/x-www-form-urlencoded: This is the standard method most forms use. It converts spaces to the plus sign and non-alphanumeric characters into the hexadecimal code for that character in ASCII text.
• mutlipart/form-data: This allows the data to be sent in parts, with each consecutive part corresponding the a form control, in the order they appear in the form. Each part can have an optional content-type header of its own indicating the type of data for that form control.
Name:
This attribute is used to specify the name for form.
Target: In HTML5 you can now set the target attribute of a form to have any results page open in a different frame or window. This attribute works the same way you would target an iframe.
Autocomplete: The autocomplete attribute is new in HTML5. It specifies whether the browser should store form data and then complete form fields as the user types. Like the novalidate attribute, this attribute does not affect autocomplete functions you have added with scripts, only what the browser would do by default.
<input> tag:
The INPUT element is a useful HTML form tag to know because it is one of the most flexible. The input tag prompts your readers to input data to your web server. It offers many different ways to solicit content from your users. Input tags are used within the form tag. With input tags you can add buttons, checkboxes, radio buttons, password boxes, text boxes and others.
Name:
It is used to specify unique name for the input to be used.
Type:
This attribute is used to specify the input field type. There are several types of form input fields, text, password, checkbox, radio, file, image, & hidden are among the most common.
Value:
This attribute is used to specify the initial value or data displayed in the input field when the form is first loaded.
Size:
This attribute is used to define the input size or width, typically defined in terms of number characters wide instead of pixels.
Maxlength:
This attribute is used to specify the maximum length of input field, such as the maximum number of characters for a text input.
Checked:
It is used with checkbox and radio inputs, it sets the field default to be already checked.
Form Controls:
There are different types of form controls that you can use to collect data from a visitor to your site.
Text input controls
Buttons
Checkboxes
Radio buttons
Select boxes
File select boxes
Hidden controls
Image
1. Text Input Controls:
There are actually three types of text input used on forms:
• Single-line text input controls:
The text box is the most common input type and to make HTML easier, is the default for the input tag. This tag lets your readers type in any text information into the box. Text input fields are typically one line long.
They are created by using the following syntax.
<input type="text">
Here is a basic example of a single-line text input used to take first name and last name:
<form action="/cgi-bin/master.cgi" method="get">
First name: <input type="text" name="firstname" />
<br>
Last name:<input type="text" name="lastname" />
<input type="submit" value="submit" />
</form>
• Password input controls:
The password field looks almost identical to the text field. However, when you type in it, the letters are hidden. This allows you to have a little more security for passwords on your forms. The passwords are not sent encrypted in any way. So don't rely on this to secure truly important secret information. It is created by using the following syntax.
<input type="password">
Here is a basic example of a single-line password input used to take user password:
<form action="/cgi-bin/hello_get.cgi" method="get">
Login : <input type="text" name="login" />
<br>
Password: <input type="text" name="password" />
<input type="submit" value="submit" />
</form>
• Multi-line text input controls: <textarea> …. </textarea>
The <textarea> tag creates a multiple-line text input field in the browser. It allows the customer to type in nearly unlimited lines of text. When the form is submitted, these lines are sent to the server as the value of the name of the textarea. The textarea tag must always be followed by the closing </textarea> tag.
This tag has several commonly used attributes: cols, rows and name
Cols:
The cols attribute indicates how many columns wide the textarea should be. It is measured in characters. So if you write cols="30", your textarea will be 30 characters wide.
Rows:
The rows attribute defines how many rows down the textarea should be. Like cols, rows is measured in characters. So if you write rows="5", your text area will be 5 line-heights tall.
Name:
It is used to specify the name for the field.
Here is a basic example of a multi-line text input used to take item description:
<form action="/cgi-bin/master.cgi" method="get">
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" />
</form>
2. Buttons:
There are various ways in HTML to create clickable buttons. You can create clickable button using <input> tag.
When you use the <input> element to create a button, the type of button you create is specified using the type attribute. The type attribute can take the following values:
submit: This creates a button that automatically submits a form.
<input type="submit">
reset: This creates a button that automatically resets form controls to their initial values.
<input type="reset">
Here is the example:
<form action="http://www.example.com/test.asp" method="get">
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button" />
</form>
3. Checkboxes:
With a checkbox element, you can give your readers a list of items to choose from. They can choose more than one in the list. Or it can be used as a "yes/no" toggle, when there is only one option. If you have a group of checkboxes, link them all together by giving them the same name. The values will all be sent to the form separately. The general syntax is as follows:
<input type="checkbox">
Following is the list of important checkbox attributes:
type: Indicates that you want to create a checkbox.
name: Name of the control.
value:
The value that will be used if the checkbox is selected. More than one checkbox should share the same name only if you want to allow users to select several items from the same list.
checked:
Indicates that when the page loads, the checkbox should be selected.
Here is example HTML code for a form with three checkboxes
<form action="/cgi-bin/checkbox.cgi" method="get">
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="checkbox" name="physics" value="on"> Computers
<input type="submit" value="Select Subject" />
</form>
4. Radio Buttons:
Radio buttons give readers a "one of many" choice combination. Like the checkbox input type, radio button groupings all have the same name attribute, and each value is different. If a reader chooses one value, all the other values will be deselected. The general syntax is as follows:
<input type="radio">
Following is the list of important radiobox attributes:
type: Indicates that you want to create a radiobox.
name: Name of the control.
value: Used to indicate the value that will be sent to the server if this option is selected.
checked: Indicates that this option should be selected by default when the page loads.
Here is example HTML code for a form with two radio button:
<form action="/cgi-bin/radiobutton.cgi" method="post">
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics
<input type="radio" name="subject" value="Computers" /> Computers
<input type="submit" value="Select Subject" />
</form>
5. Select boxes:
The <select> and <option> tags create drop-down menus for your forms. The select tag, like the checkbox and radio button input tags allows your readers to choose from multiple options. However, because the options are all stored in a drop-down box, they do not take up as much screen real estate as the radio buttons and checkboxes.
The select tag has several attributes, and the closing </select> tag is required.
name - names the input information
size - how many items in the list are showing on the screen at once
multiple - the reader can choose multiple items
The tricky part of the <select> tag is that it needs a second tag to include the elements in the list: the <option> tag.
The option tag has two important attributes:
value - if this is not included, the form will send the server whatever text is in the <option> tag as the value
selected - if this is not included, the form will display the first element listed as the default choice.
Example:
<form method="post">
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
<option value=”Computers”>Computers</option>
</select>
<input type="submit" value="Submit" />
</form>
6. File select boxes:
If you want to allow a user to upload a file to your web site from his computer, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element.
Here is example HTML code for a form with one file select box
<form action="/cgi-bin/master.cgi" method="post" name="fileupload" enctype="multipart/form-data">
<input type="file" name="fileupload">
</form>
7. Hidden controls:
Hidden fields are used to "save state" within an HTML form. They are most often used in forms that have multiple pages and information that needs to be carried from one page to the next. They are not shown on the Web page, but the information is sent along with other form input fields. The general syntax is
<input type="hidden">
Here is an example code of HTML:
<form action="/cgi-bin/master.cgi" method="get" name="pages">
<p>This is page 10</p>
<input type="hidden" name="pagenumber" value="10" />
<input type="submit" value="Next Page" />
</form>
8. Image:
With the image input type, you have yet another option for a button on your forms. The image shown here happens to look like a button, but you can use any image as a button on your forms. One thing to note, images as submit buttons don't allow for the tab key to move the focus to it, and this makes them less accessible for people with no mouse. The general format is as follows:
<input type="image" src="/buttn1.gif" width="55" height="21" alt="image" border="0">
