Working with Forms in HTML:
A form is an area in an HTML document
that can contain form fields like textbox, button, checkbox, radio button, etc.
Form fields are objects that allow the web users to enter information, to
submit information, to access resources, etc. When the web users click a Submit Button, the content of the form is generally
communicated to a program that runs on the server. It can be sent to an HTML
file, CGI Script (Common Gateway Interfaces), PERL script, an e-mail Address
and more.
<FORM>
Tag: This tag is used to create a form in a
web page. It contains <INPUT> tags. Start and end tags both are required
and supported by all the browsers.
Attribute
|
Specification
and Value
|
ACTION
|
It
informs the browser for the destination (target) i.e. where data is sent. Its
value may be:
MAILTO (for email ID)
HTTP (for web page or website)
Ex: ACTION=“MAILTO:mycollege@gmail.com”
|
METHOD
|
It informs the browser how to send data
to the server. It is either POST or GET. These are simply two different
methods for submitting data to the script. Its value may be:
POST (for less amount of
data)
GET (for large amount of
data)
Ex: METHOD=“POST”
|
NAME
|
Name
of the form
|
<INPUT>
Tag: This tag is used to create form fields
(elements) by the programmers. We can create different types of form fields
like textbox, button, checkbox, etc. using its “TYPE”
attribute. It is used inside <FORM> tag. Only start tag is required and
supported by all the browsers.
Ex: <INPUT TYPE=“TEXT”>
Attribute
|
Specification
and Value
|
TYPE
|
i)
TEXT
ii)
PASSWORD
iii)
RADIO (Option Button)
iv)
CHECKBOX
v)
SUBMIT
vi)
RESET
vii)
HIDDEN
|
VALUE
|
It
shows default value of the given type of form item
|
NAME
|
We
can specify a name of the form item
|
SIZE
|
It
defines the width of the text box, i.e. how many visible characters it can
contains.
|
MAXLENGHT
|
Number
of characters that can be input into Text Box
|
TABINDEX
|
It
defines in which order the different field should be activated when the user
presses the Tab Key.
|
Example-1:
Write codes for following output:
<!
FORM1.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
Enter User Name
& Password : <BR>
User Name =
<INPUT TYPE="TEXT" SIZE="8" MAXLENGTH="15" NAME="UN"> <BR>
Password =
<INPUT TYPE="PASSWORD" SIZE="8" MAXLENGTH="8" NAME="PW"> <BR>
<INPUT TYPE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" NAME="RB">
</FORM>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Example-2:
Write codes for following output:
<!
FORM2.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT SIZE="5">
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15" NAME="SN"> <BR>
Qualification =
<INPUT TYPE="CHECKBOX" NAME="CB1" VALUE="12th"> HSSC
<INPUT TYPE="CHECKBOX" NAME="CB2" VALUE="UG"> GRATUATION
<INPUT TYPE="CHECKBOX" NAME="CB3" VALUE="PG"> PG <BR>
Eduaction Field =
<INPUT TYPE="RADIO" NAME="RB1" VALUE="BCA"> Computer Science
<INPUT TYPE="RADIO" NAME="RB1" VALUE="BE"> Engineering
<INPUT TYPE="RADIO" NAME="RB1" VALUE="MBBS"> Medical <BR>
City =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15" NAME="CN" VALUE="RAIPUR"> <BR>
<INPUT
TYPE="HIDDEN" NAME="HF" VALUE="INDIA">
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Drop-Down menu or Select Menu:
- This is used to contain (carry/ hold) more than one information in a single
item but we can select only one at a time.
- This is very similar to Combo-Box in VB.
- It can be implemented using <SELECT>
and <OPTION> tags.
<SELECT>
tag: This tag is used to create a Drop-Down
menu in a web page. Start and End tags both are required and it contains <OPTION>
tags.
Attribute
|
Specification
and Value
|
NAME
|
Name
of the Drop-Down menu.
|
<OPTION> Tag:
This tag is used to define drop-down menu “items” and only start tag is
required.
Example:
<SELECT NAME="EF">
<OPTION> Computer
Science
<OPTION> Engineering
<OPTION> Medical
</SELECT>
Example:
Write codes for following output:
<!
FORM3.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT
SIZE="5">
<FORM ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15"
NAME="SN"> <BR>
Education Field =
<SELECT NAME="EF">
<OPTION>
Computer Science
<OPTION>
Engineering
<OPTION>
Medical
</SELECT>
<BR>
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
<TEXTAREA> tag:
- Text area is a text field that can contain several (multiple) lines. This is also
called a comment box in Windows OS.
- We can write more than one line using “Enter key”.
- It is generally used to write comments in the
form.
- Start and End tags both are required and supported by all the browsers.
Attribute
|
Specification
and Value
|
COLS
|
It
defines the number of columns in TextArea.
|
ROWS
|
It
defines the number of rows (lines) in TextArea.
|
NAME
|
Name
of Text-Area
|
Example:
Write codes for following output:
<!
FORM4.HTML>
<HTML>
<HEAD>
<TITLE> Working with
Forms </TITLE>
</HEAD>
<BODY TEXT="MAROON">
<H1> An example of Form
</H1>
<FONT
SIZE="5">
<FORM
ACTION="mailto:mycollege@gmail.com" METHOD="POST">
STUDENT INFORMATION <BR>
Student Name =
<INPUT TYPE="TEXT" SIZE="10" MAXLENGTH="15"
NAME="SN" TABINDEX="1"> <BR>
Education Field =
<SELECT NAME="EF" TABINDEX="2">
<OPTION>
Computer Science
<OPTION>
Engineering
<OPTION>
Medical
</SELECT>
<BR>
Write something about
your interest and knowledge: <BR>
<TEXTAREA COLS="30" ROWS="8" NAME="TA"
TABINDEX="3">
</TEXTAREA> <BR>
<INPUT TYPE="SUBMIT"
VALUE="SUBMIT"
NAME="SB"
TABINDEX="4">
<INPUT TYPE="RESET" VALUE="RESET" NAME="RB"
TABINDEX="5">
</FORM>
</FONT>
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
Video Link:
