It gather data from the user interface components are needed this can be achieved using forms. Forms collect information from the user and the script or a program on a webserver user the information to compose a customer response to the form submission. Forms are visible on the front end portion of the interface of interactive pages. User enters information using various form fields or controls and then clicks a button to submit the data to the server. The browser then packages the data opens on http connection and send the data to the server. HTML tags can be used to create various form fields or controls like text boxes, checkboxes, radio buttons, list boxes, slicers, text area, pull-down menu and buttons. <form> is used to creating HTML forms. All the controls must be placed inside the form section of the document.
Forms Fields/ controls/ objects:-
1. Textbox Control: Textbox controls is used for user input.
e.g. <input type=text>
Here, <input> with type attribute set to text will display a textbox controls on the form.
e.g. <body>
<form> <table>
<tr>
<td> Name </td>
<td> <input type=text> </td>
</tr>
</table> </form>
</body>
Attributes which can be set for a textbox are:
1. maxlength: It allows you to specify maximum number of characters that can be entered in a textbox.
e.g.: <input type=text maxlength=7>
2. value: It enables to display a default value for the textbox. When this attribute is set page will appear with a default value in the textbox.
e.g <input type=text value=ABC>
3. name: This attribute gives a unique identities to the textbox.
e.g. <inpt type=text value=ABC name=txtname>
4. password: This controls will be similar to textbox control. The only difference is here the entered text will remain hidden. Attribute of the textbox can be applied to the password control.
e.g. password: <input type=password name=txtpassword maxlength=8>
5. Textarea: This control is used for displaying multiline text fields.
E.g.: Address <text area name=txtaddress rows=5 cols=20> Enter your address </textarea>
<textarea> is used for displaying multiline textboxes, rows and cols attributes of the <textarea> controls the visible number of rows and columns in the textfield.
Wrap: This attribute when set to off will deactivate text wrapping
6. Radio Button/ option Button:
These controls provides the user with a set of option from which the user can select one of the option.
E.g.:
Course: <input type=radio name=rdcourse> B.com <br>
<input type=radio name=rdcourse> B.A <br>
<input type=radio name=rdcourse> B.SC <br>
<input type=radio name=rdcourse> B.E <br>
7. Checkbox: Checkbox control provides the user with the set of options from which multiple options can be selected. The checked attribute preselects a commonly selected checkbox when the page gets loaded.
e.g.:
Subjects:<input type=checkbox name=chkbox>C++<br>
<input type=checkbox name=chksub2> JAVA <br>
<input type=checkbox name=chksub3> PHP <br>
<input type=checkbox name=chksub4> C++ <br>
<input type=checkbox name=chkbox> ASP.Net <br>
8. Button: It is used to trigger appropriate form level processing value attribute of a button specifies the face value of the button.
e.g. <input type=button name=btn1 value=submit>
9. Action Buttons:
i. Reset Button: This button will empty the contents of the controls so that the form is ready for reuse. The fields will be reset to their default value.
e.g. <input type=reset name=btn1 value=Clear>
ii. Submit Button: This button submits the data held in each controls to the webserver for further processing.
e.g. <input type=submit name=btn1 value=submit>
iii. Image Button: We can use an image instead of regular submit button.
e.g. <input type=image name=btn1 src=flowe.jpg width=60 height=30>
10. Dropdown List: It save the form space by a scrollable list of items, it is usually used for displaying this list use container tag <select> use an <option> to define each list item.
e.g.
Operating System: <select name=list size=10 multiple>
<option> Windows </option>
<option> Solaris </option>
<option> Linux </option>
<option> Mac </option>
<option> Android </option>
<option> OS/2 </option>
</select>
Using the size attribute of the <select> the no. of items visible from the list can be controlled. If want to select multiple items from the list. Then set “multiple” attribute of the <select> make use of ctrl/shift key for selecting multiple items.
11. Color picker:
<input type=color name=clr1>
Here, type=color will display a color picker control
12. Date Picker:
A date picker control pops up a calendar for the user to select a date.
e.g. a) <input type=date name=dt>
It allows you to select date month and year.
b) <input type=week name=week>
It allows you to select an entire week.
c) <input type=month name=mnth>
It allows you to select entire month.
13. File control:
<input type=file name=file>
It display a file control box which allows us to select a file.
14. Slider Control:
<input type=range name=slide min=1 max=10 step=6>
Here, type=range will display a slider control which has a sliding bar. This bar can be dragged from one side to another.
Step attribute specifies by how much the value must increment or decrement.
Q.
<html> <head>
<title> Form </title>
</head> <body>
<form> <table border=4 rules=none>
<caption> <font color=blue face=magneta>
Student Information </font> </caption>
<tr>
<td><b> Name </b> </td>
<td> <input type=text name=txtname></td>
</tr>
<tr>
<td><b> Address</b> </td>
<td> <textarea> name=txtadd rows=5 cols=10>
Enter your address </textarea> </td>
</tr>
<tr>
<td> <b> Contact No. </b> </td>
<td> <input type=text name=cnt maxlength=10> </td>
</tr>
<tr>
<td> <b> Course Details </b> </td>
<td> <input type=radio name=course> BSC I.T <br>
<input type=radio name=course> BSC Maths<br>
<input type=radio name=course> B.Com<br>
<input type=radio name=course> B.A <br></td>
</tr>
<tr>
<td> <b> Certificate courses </b> </td>
<td>
<input type=checkbox name=chk1>
Certification in Cyber Security <br>
<input type=checkbox name=chk2>
Certification in Animation <br>
<input type=checkbox name=chk3>
Certification in Travel and and tourism <br>
<input type=checkbox name=chk4>
Certification in Mobile App Development <br>
<input type=checkbox name=chk5>
Certification in Stock Market <br>
</td>
</tr>
<tr>
<td> <b> Extra Curricular Activities </b> </td>
<td> <select name=act1 multiple size=6>
<option> Yoga </option>
<option> Tennis </option>
<option> Chess </option>
<option> Cricket </option>
<option> Badminton </option>
</select> </td>
</tr>
<tr>
<td align=center>
<input type=image src=submit.jpg width=100 name=btnsubmit onclick=alert(“Thank you for the Information”)> </td>
<td align=center>
<input type=image src=reset.jpg width=100 height=100 name=btnreset>
</td>
</tr>
</table> </form> </body> </html>
0 Comments