Explain about Forms in HTML .
https://www.computersprofessor.com/2016/05/explain-abut-forms-in-html.html?m=0
Form is a blank sheet that can have
different types of fields (or) elements (text field password field, radio
button and check boxes etc). This elements allow the uses to enter some
information form data can be written into other files (.text,.jsp) and
submitted to the data base.
Thus forms are used as an effective
communication between uses and web container
Usually forms are created by
inserting
|
Attributes of Form:
Name: It specifies name of the form.
Action: It represents the URL of another
file i.e., whenever the user clicks the submit button. The current data gets
directed to the program whose path is supplied as URL for further processing.
Method: It represents how the data will be
submitted to the server, this attribute has two values ‘get’ (or) ‘post’. If
get is used then the data from the current page is seen on the address bar of
the web browser. Hence it doesn’t retain privacy. On the other hand using
post causes transmission of data from the current html form to the server
along with body of request in encrypted form.
If the method attribute is not
declared then ‘get’ method will be considered as default.
< form Name = “stu” action = “
xxx. Jsp” method = “ get”>
|
< Input > tag: It creates form fields. It is empty
tag because it always depends on attributes.
Attributes of Input:
Type: It represents one type of field from
limited form filed.
Name: It represents name of the field in
which input data will be stored.
Value: It produces same text that will act
in different ways based on different kinds of fields.
< input type field = “ text “
name = “ “ value = “ “ >
Fields:
Text: Text fields are a small text area
that allows the user to enter any type of data up to maximum length.
If you set some value, that string
will be used as the default value.It will support a single line of text.
|
Attributes:
Size: It sets width of the field. By
default the user allows to visible the last 20 characters in the text field.
|
Maximum length: It specifies the number of
characters that the text field can have.
Syntax:
Name
|
Password: It was exactly like text but the
input is not displayed on the screen instead each character is replaced b ‘*’
symbol.
Name :
Radio button: It creates the radio button these
are always grouped buttons within group should have same name but different
values. Radio buttons allows the user to select one option form the list of
limited options.
Checked attribute: If we include this attribute one
default option will be selected from the list of options.
Syntax:
Check box: It provides a simple check box.
This field allows the user to select more than one option from the list of
choices. In check boxes unlike radio buttons we are giving different names to
each field.
Syntax: <input type = “checkbox” name = “ “ value = “ “>
|
Creating combo box (drop
down list): Combo
box allows the user to select one option from multiple choices by default the
browser allows you to select one option like radio button. But if you want
there is an option to select more than one value like checkbox.
Attributes:
Size: It is used to increase the visibility
size of options, by default 1.
Multiple: For selecting more than one option
from the combo box this attribute will be used. We can select more options
using ‘ctrl’ key in the key board.
Syntax:<select name = “qualification” size = “1” Multiple = “ true” >
<option> Bsc </option>
<option> B.tech </option>
<option> MCA </option>
</select>
|
Text area: It creates a free format text area
into which the user can enter anything.
Syntax:<text area name = “ address” rows = “ n” cols = “ n” >- - - - -< /text area >
|
Submit: It create a button which displays
value attribute as its text. It is used to send the data to the server. Value
attribute as its text. It is used to send the data to the server.
Syntax: < input type = “ submit” value =
“ send” >
|
Reset: It is also creates a button but this
one is used to clear the form data.
Syntax:< input type = “ Rest” value = “
cancel “ >
Ex 1: Create a form for entering student details.
< html>
< head >
<title > student form </title>
</head>
<body>
< form name = “stu” action = “ “ method = “get” >
< h1 align = “center” > student form </h1> enter student name: <input type = “text”
Name = “sname” value = “ “ size = “ 10” Maxlength = “ 30” > enter student Id: <input type = “ text” name = “ID” value
Gender : < input type = “radio” name = “ gem” value = “Male”
Checked = “ checked “ > Male
<input type = “radio” name = “gem” value = “female”>
Female.
Courses offered < input type = “Checkbox” name = “C1”>
Value = “ c” > language
< input type = “ checkbox” name = “C2” value = “ c++” > c++
<input type = “checkbox” name = “C3” value = “Java”> java
Qualification: <select name = “qua”>
< option> B.tec </option>
< option > B.sc </option>
</select>
Address: <text area name = “ add” cols = “ 10” rows = “10 “ rows = “ 10 “ </text area >
< input type = “submit” value = “send”>
< input type = “reset” value = “clear”>
</form>
</body>
</html>
Ex 2: Create a form for taking feedback of the visitor.
< html>
< head >
< title > forms< /title>
</head>
<body>
< form name = “visitor” action = “ “ method = “get” >
< h1 align = “ center” > visitor feedback </h1>
Your name: <input type = “text” name = “visit”
Value = “ “ size = “ 30 “ max length = “ 30 “>
Email Id < input type = “ text” name = “ Id “ value = “ “ >.
Select your location: <select name = “area” >
<option> India </option>
<option> USA </option>
< option > UK </option>
< /select>
Comments: < text area name = “ com” cols = “ 10” rows = “ 10” > - - - - - </text area >
< input type = “ submit “ value = “ submit” >
< input type = “ reset “ value = “ cancel “>
</form>
</body>
</html>
 |
