|
What if you want to interact with the user of your website? You might need to request some information from the user for some purpose. Interaction with a web user yields highly and is really very helpful in converting the vistors into clients who actually buy your products and services.
A form is an effective way to make a web page user friendly. A form is used to for getting inputs from the user. A form can contain form elements. Form elements are elements that allow the user to input the information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.).
How does forms work?
When data is entered into the form fields like text box etc by the user, and user submits the form (usually using a 'submit' button), the date is then sent to the server for processing. A script then process the form data and then sends a response to the browser accodingly.
A form is defined with the <form> tag.
<form>
<input>
<input>
</form>
Form Elements
Some of the attributes of form element are :
• Action : This attribute of form element is used to specify the location of the script file that will process the data of the form and to which the form data is be sent. It can contain a relative file name or a full URL.
• Method : This attribute of form element specifies the method to be used to transmit the data. It can be either GET or POST.
Input Element
The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type single line text like letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
The code output in the browser looks like this :
First name:
Last name: Radio Buttons
Radio Buttons are used when you want the user to select a single value from a list of values.
<form>
<input type="radio" name="profession" value="doctor"> Doctor
<br>
<input type="radio" name="profession" value="engineer"> Engineer
</form>
The code output in the browser looks like this :
Doctor
Engineer
In radio choice buttons, only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options from a list of options.
<form>
<input type="checkbox" name="pilot">
I am a pilot.
<br>
<input type="checkbox" name="license">
I have a flying license.
</form>
The code output in the browser looks like this :
I am a pilot.
I have a flying license.
Submit Button
As i told u earlier in the beginning, the data entered into the form is sent to a script that processes it and this happens when the user after filling in the form fields, hits the "SUBMIT" button. When the submit button is hit, the attributes in the <FORM> element are implemented.
<form name="form1" action="ScriptFile.htm" method="GET">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
How it looks in a browser:
Username:
Now consider the code above. When the submit button in the form is clicked, the attributes of the FORM element are executed in the following way :
Since "action" attribute is set to ScriptFile.htm, the data is sent to this file. Note that this is a relative location of file. We can also use absolute location i.e. a full URL like http://tutorialshub.com/ScriptFile.htm
The method specified is GET and hence the form data is sent using the GET method.
Form Tags
| Tag | Description | <form>
<input>
<textarea>
<label>
<fieldset>
<legend>
<select>
<optgroup>
<option>
<button>
<isindex> | Defines a form for user input
Defines an input field
Defines a text-area (a multi-line text input control)
Defines a label to a control
Defines a fieldset
Defines a caption for a fieldset
Defines a selectable list (a drop-down box)
Defines an option group
Defines an option in the drop-down box
Defines a push button
Deprecated. Use <input> instead |
|
