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