FORM
- Form on a web page allows user to enter data that is sent to a server for further processing
- An HTML FORM is a section of document containing normal text, markup and some special elements.
- That special elements is known as “Controls”.
- FORM tag tells the browser where the form starts and ends.
- You can add all kinds of HTML tags between the <FORM> and </FORM>.
- The purpose of form element is to present a fill out form to be used for an actions such as registration, queries etc.
- HTML defines the following control types:
- Buttons
- Submit
- Reset
- Push
- Checkboxes
- Radio Button
- Menus
- Text
- Files
- Hidden Controls
- Object Controls
Form Attributes
- Action
This attribute specifies a form processing agent
- EncType
This attribute specifies the content type used to submit the form to the server
- Name
Specifies the FORM name
- Method
This attribute specifies which HTTP method will be used to submit the form data set.
GET
- While Using Back button, GET request is re-executed
- GET method pages can be bookmarked
- Page can be hacked
- Page can be cached
- since form data is in the URL and URL length is restricted
- GET is less secure compared to POST
- Values will be displayed in the browser's address bar
- GET method should not be used for sending sensitive information
- It can't be more than 255 characters long.
POST
- The browser usually alerts the user that data will need to be re-submitted.
- POST method pages cannot be bookmarked.
- Page never hacked
- Page not cached
- No restrictions
- POST is safer than GET
- POST method variables are not displayed in the URL
- POST method can be used for sending sensitive information
- Whereas no such maximum length limitation holds for the POST request.
<INPUT> ELEMENT
- This tag is used to obtain user input in a variety of ways.
- It tells the server the type of data to be submitted by the form.
- Attributes:
- Type
- Name
- Value
- Size
- Maxlength
- Checked
- Src
- Align
<TYPE> ATTRIBUTE
- It determines which control will be created on the form.
- It can take any of the following values:
- Text
- Password
- Checkbox
- Radio
- Image
- Hidden
- Submit
- Reset
- Button
- File
<INPUT Type=“TEXT”>
It is used to create a single line text input field.
<INPUT Type=“PASSWORD”>
In this type the input text is rendered in a way to hide the characters.<INPUT Type=“CHECK BOX”>
This control is used for sensitive input such as password.
Creates an on-screen checkbox for users to make multiple selections.
Checkbox is an on or off switch.
When the switch is checked the value is “yes” else “no”.
This allows user to select more than one value for a given property.
<INPUT type=“CHECKBOX” NAME=“CH1” VALUE=“A” Checked>
<INPUT Type=“RADIO”>
Creates an on-screen radio button for user to make a single selection.
It is also an on or off switch.
The radio button value is only submitted with the form when the switch is on.
<INPUT type=“RADIO” NAME=“RD1” VALUE=“Yes” Checked”>
<INPUT Type=“IMAGE”>
Creates a graphical submit button.<INPUT Type=“HIDDEN”>
The image value of the type attribute has only one difference from the submit attribute.
<INPUT TYPE=“IMAGE” SRC=“submit_image.gif”>
Creates an element that is not visible by the user.
<INPUT TYPE=“HIDDEN” value=“lotus”>
<INPUT Type=“SUBMIT”>
Creates a submit button.<INPUT Type=“RESET”>
When this button is activated by the user, the form is submitted to the location specified by the action attribute of the form element.
<INPUT TYPE=“SUBMIT” value=“Submit the Form”>
Creates a reset button.
When this button is activated by the user, all of the form’s controls have their values reset to the initial values specified in the controls on the form.
<INPUT TYPE=“RESET” VALUE=“Reset the Form”>
<INPUT Type=“BUTTON”>
Creates a generalized button.
Unlike the submit or reset buttons, it has no predetermined action.
<INPUT TYPE=“BUTTON” Value=“Click me”>
<INPUT Type=“FILE”>
Creates a control which is used for file uploading.
The field consists of a text entry box for a filename as well as a button immediately to the right of the field, which is usually labeled BROWSE.
Pressing the Browse….. Button allows the user to browse the local system to find a file to specify for upload.
<INPUT TYPE=“FILE”>
<SELECT>
- The SELECT element is used to create a list of choices either as a dropdown menu or a list box.
- Each of the choices in the list is an OPTION element.
- There are two tags involved in creating select lists, the <SELECT> tag and the <OPTION> tag.
- The <SELECT> tag offsets the lists .
- Name
Assigns a name to the element.
- Size
Numbers of rows in the list that should be visible on the form.
- Multiple
This boolean attributes allow multiple selections.
- Disabled
Locks the field where user can’t change the value. Even user cant select option, cant copy text and the field is not even sent if the form is submitted.
<OPTION>
- Used along with <SELECT> to create select lists.
- The <OPTION> is used to list the possible values. It has only two attributes.
- Selected
- When set this boolean attribute specifies that this option is pre-selected.
- Value
- This attribute specifies the value to be submitted for this choice, if the choice is selected,when the form is submitted.
>Eg:
<SELECT NAME=“listname”>
<OPTION value=“LIST1”>ITEM1
<OPTION value=“LIST2”>ITEM2
<OPTION value=“LIST3”>ITEM3
<OPTION value=“LIST4”>ITEM4
</SELECT>
<TEXTAREA>
The TEXTAREA element is similar to the INPUT element’s text type.
Instead of single line text box, a multi-line text input control is created.
Because there are many lines of text within the <TEXTAREA> element, it is not possible to set the default text for the textarea using the VALUE attribute.
The default text is placed between the <TEXTAREA> …………</TEXTAREA> tags.
>ATTRIBUTES
- NAME:
Assigns a name to the element.
- ROWS:
Specifies the number of visible text lines.
- COLS:
Specifies the visible width in a average character widths.
>Eg:
<TEXTAREA NAME=“ADDRESS”ROWS=“2” COLS=“20”>……….
</TEXTAREA>
<FIELDSET> ELEMENT
- It defines a group of form elements as being logically related.
- The browser draws a box around the set of fields to indicate that they are related.
- <FIELDSET> is a block level element, so there is no need to use <P> tag between fieldsets
>Example:
<FIELDSET>
<INPUT TYPE=“Checkbox” name=“sports”>Sports
<INPUT TYPE=“Checkbox” name=“Shopping”>Shopping
<INPUT TYPE=“Checkbox” name=“Music”>Music
<INPUT TYPE=“Checkbox” name=“Dancing”>Dancing
</FIELDSET>
<LEGEND> ELEMENT
- It is used with <FIELDSET>to give a title to each set of fields.
<FIELDSET>
<LEGEND>Hobbies</LEGEND>
<INPUT TYPE=“Checkbox” name=“sports”>Sports
<INPUT TYPE=“Checkbox” name=“Shopping”>Shopping
<INPUT TYPE=“Checkbox” name=“Music”>Music
<INPUT TYPE=“Checkbox” name=“Dancing”>Dancing
</FIELDSET>