<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.
This control is used for sensitive input such as password.
<INPUT Type=“CHECK BOX”>
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.
The image value of the type attribute has only one difference from the submit attribute.
<INPUT TYPE=“IMAGE” SRC=“submit_image.gif”>
<INPUT Type=“HIDDEN”>
Creates an element that is not visible by the user.
<INPUT TYPE=“HIDDEN” value=“lotus”>
<INPUT Type=“SUBMIT”>
Creates a submit button.
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”>
<INPUT Type=“RESET”>
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 .
Attributes:
Assigns a name to the element.
Numbers of rows in the list that should be visible on the form.
This boolean attributes allow multiple selections.
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
Assigns a name to the element.
Specifies the number of visible text lines.
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>