Creating a form :
Form is the way to collect information from user by giving inputs.
Form may contains text boxes, clickable buttons , multiple choice check boxes, pull down menu'es & image maps.
A web page can have more than one form & other body content can also be put on same page.
<form> tag :
To insert a form in web page <form> & </form> tags are used.
This tag have following attributes:
| Attributes | Description | Values |
|---|---|---|
| action : | Gives the URL of the application that is to receive & process the forms data. | URL |
| method : | Sets the method by which browser sends the forms data to the server for processing.Value for this attribute can be get :Web browser submits the form. post:The web browser sends the forms data separately from the URL as a stream of bits. | get or post |
| target : | Where to open the result form to another window or frame. | _blank, _self, _parent, _top, framename |
<input> tag :
The <input> tag is used for managing the inputs from the user.
It provides following attributes:
| Attributes | Description | Values |
|---|---|---|
| align : | Sets the the alignment of an image input. | left, right, top, middle, bottom |
| alt : | Sets the an alternate text for an image input. | text |
| checked : | Used for an input element to be preselected when the page loads (for type="checkbox" or type="radio") | checked |
| disabled : | Used for an input element to be disabled when the page loads. | disabled |
| size : | Sets the width of the input control in pixels. | number |
| maxlength : | Sets the maximum numbers of input characters allowed in input control. | number |
| readonly : | Used when an input field should be read-only (for type="text" or type="password") | readonly |
| src : | The location of the image that can be used for graphical buttons. | URL |
| name : | It is used to give name for each name field. Name can be in string & symbols & underscore(_) can also be used herewith. | name |
| type : | Here you can select type of input field. | button, checkbox, file, hidden, image, password, radio, reset, submit, text |
<textarea> tag :
This tag creates text multi-line input area in a form.
Attributes:
| Attributes | Description | Values |
|---|---|---|
| name : | Sets label for text input area. | name_of_textarea |
| rows : | Set the number of lines to be in the textarea. | number |
| cols : | Sets number of characters to be inserted in horizontal line. | number |
| disabled : | Sets a text-area to be disabled. | disabled |
| readonly : | Sets a text-area to be readonly. | readonly |
<label> tag :
This tag defines a label for an input element. It toggles the control.
Attributes:
| Attributes | Description | Values |
|---|---|---|
| for : | Sets which form element a label should bound with. | element_id |
<select> tag :
This tag is use for creating drop-down menu or text list menu, depending upon the attribute selection. <option> tag inside an <select> element defines a list items.
Attributes of this tag are:
| Attributes | Description | Values |
|---|---|---|
| disabled : | It disables the drop-down list. | disabled |
| multiple : | It specifies that multiple items can be selected at a time. | multiple |
| name : | Defines a unique name for the drop-down list. | unique_name |
| size : | Defines the number of visible items in the drop-down list. | number |
<optgroup> tag :
<optgroup> tag is used to keep together related list-items. It is specially used when you have large number of option in a list.
Attributes:
| Attributes | Description | Values |
|---|---|---|
| label : | Sets description of list items. | text |
| disabled : | Specifies that the option group should be disabled when it first loads. | disabled |
<option> tag :
This tag is written just after the <select> tag for creating individual list item within the menu.
Attributes of <option> tag are:
| Attributes | Description | Values |
|---|---|---|
| disabled : | Specifies that the option should be disabled when it first loads. | disabled |
| label : | Defines a label to use when using | text |
| selected : | Specifies that the option should appear selected (will be displayed first in the list). | selected |
| value : | Defines the value of the option to be sent to the server. | text |
<button> tag :
<button> tag is used to create button in the form.
This tag have following attributes:
| Attributes | Description | Values |
|---|---|---|
| disabled : | Specifies that the buuton should be disabled when it first loads. | disabled |
| name : | Specifies the name for a button. | text |
| type : | Specifies the name for a button. | button, reset, submit |
| value : | Specifies the text that goes on button. | text |
Now let's see the eg. shocasing usage of above tags:
<form>
First name:<input type="text" name="firstname">
Last name:<input type="text" name="lastname">
Password:<input type="password" name="lastname">
More about you: <textarea rows="3" cols="25">This is default text.</textarea>
Select your gender: <input type="radio" name="gender" value="male"><label for="male">Male</label><input type="radio" name="gender" value="female"> <label for="female">Female</label>
Select sports you like:
<input type="checkbox" name="sport" value="Tennis">
<input type="checkbox" name="sport" value="Cricket">
<input type="checkbox" name="sport" value="Football">
Select from the list:
<select>
<option>Tea</option>
<option>Coffee</option>
<option>Soft drink</option>
<option>None</option>
</select>
<input type="reset" value="Reset"> <input type="submit" value="Submit">
</form>
0 comments:
Post a Comment