HTML Forms

Presented By :
Sridhar Talari
IT + Telecom
 What are forms?
<form> is just another kind of HTML tag
Forms are used to create (rather primitive) GUIs
on Web pages
Usually the purpose is to ask the user for information
The information is then sent back to the server
A form is an area that can contain form elements
The syntax is:
<form parameters > ... form elements ... </form>
Form elements include: buttons, checkboxes,
text fields, radio buttons, drop-down menus, etc
Other kinds of tags can be mixed in with
the form elements
A form usually contains a Submit button to
send the information in he form elements to
the server
 The <form> tag
All of the form elements within a
<form> tag comprise a single form.
The browser sends all of the values of
these elements - blank, default, or user
modified - when the user submits the
form to the server.
Browsers flow forms into the containing
elements as if they were small embedded
images. So layout elements such as <p>
and <br> need to be used.
 Form Attributes
•action - gives the URL of the application
that is to receive and process the forms
data; most of these are kept in cgi-bin or
cgi-win; Common Gateway Interface binaries;
•Example:<form
action="http://141.132.64.152/cgi-
win/testgen.exe" ...</form>
•enctype - the browser encodes the form's
data before it is passed to the server. The
server may then decode the parameters or
pass them still encoded to the application;
•method - sets the HTTP method that the
browser uses to send the form's data to the
server for processing; Either POST or GET
 The method attribute in
more detail
Post
The browser sends the data in two steps:
contacts the form processing server specified in the action
attribute;
sends the data to the server in a separate transmission;
On the server side POST-style applications are expected to read the
parameters from a standard location once they begin execution.

GET
contacts the form-processing server and sends the form data in a
single transmission step:
the browser appends the data to the form's action URL, separated
by the ? character.
 A FORM example
<form method=POST action="http://www.ballarat.edu.au/cgi-bin
/horoscope">
Name:
<input type=text name=name size=32 maxlength=80>
<p> Sex:
<input type=radio name=sex value="M"> Male
<input type=radio name=sex value="F"> Female
<p> Date of Birth:
<input type=text name=year size=4 maxlength=4> Year
<input type=text name=month size=2 maxlength=2> Month
<input type=text name=day size=2 maxlength=2> Day
<p> <input type=submit> </form>
The form generated
The <input> tag
•name - defines the name of the input
element; used to label the data when
transferred to the cgi program;
•size - physical size of the input
element; default is 20 characters;
•src -
•type - determines the type of input
requested; text, radio buttons, password,
reset, image, hidden, checkbox;
•value - optional; it can be used to
insert an initial default value into the
field;
•Text input
•Buttons
•Labels
•Checkboxes
•Drop-down menu or list
•Hidden fields
Examples:
Text input

A text field:
<input type="text" name="textfield" value="with an initial value">

Buttons
 Checkboxes
A checkbox:
<input type="checkbox" name="checkbox”
value="checkbox" checked>

Radio buttons:<br>
<input type="radio" name="radiobutton" value="myValue1">
male<br>
<input type="radio" name="radiobutton" value="myValue2" checked>
female