UNIT 4
WORKING WITH
FORMS
HTML FORM
An HTML form is a section of a document which contains
controls such as text fields, password fields, checkboxes,
radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be
sent to the server for processing such as name, email
address, password, phone number, etc.
A form will take input from the site visitor and then will post it
to a back-end application such as ASP Script or PHP script
etc. The back-end application will perform required processing
on the passed data based on defined business logic inside the
application.
WHY USE HTML FORM
HTML forms are required if you want to collect some data
from of the site visitor.
For example: If a user want to purchase some items on
internet, he/she must fill the form such as shipping address
and credit/debit card details so that item can be sent to the
given address.
HTML FORM SYNTAX
The HTML <form> element is used to create an HTML form for
user input:
The <form> element is a container for dif ferent types of input
elements, such as: text fields, checkboxes, radio buttons,
submit buttons, etc.
Syntax:
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton, button
</form>
THE ACTION ATTRIBUTE
The action attribute defines the action to be performed when
the form is submitted.
Usually, the form data is sent to a file on the server when the
user clicks on the submit button .
If the action attribute is omitted, the action is set to the
current page.
THE METHOD ATTRIBUTE
The method attribute specifies the HTTP method to be used
when submitting the form data .
The form-data can be sent as URL variables
(with method="get") or as HTTP post transaction
(with method="post").
The default HTTP method when submitting form data is GET.
GET
Appends the form data to the URL, in name/value pairs
NEVER use GET to send sensitive data! (the submitted form
data is visible in the URL!)
The length of a URL is limited (2048 characters)
GET is good for non-secure data, like query strings in Google
POST
Appends the form data inside the body of the HTTP request
(the submitted form data is not shown in the URL )
POST has no size limitations, and can be used to send large
amounts of data.
Always use POST if the form data contains sensitive or
personal information!
HTML FORM CONTROLS
There are different types of form controls that you can use to
collect data using HTML form:
⮚ Text Input Controls
⮚ Checkboxes Controls
⮚ Radio Box Controls
⮚ Select Box Controls
⮚ File Select boxes
⮚ Clickable Buttons
⮚ Submit and Reset Button
THE <INPUT> ELEMENT
One of the most used form element is the <input> element.
The <input> element can be displayed in several ways,
depending on the type attribute.
LABEL TAG IN FORM
It is considered better to have label in form. As it makes the
code parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To
do so, you need to have for attribute in label tag that must be
same as id attribute of input tag.
It is good to use <label> tag with form, although it is optional
but if you will use it, then it will provide a focus when you tap or
click on label tag. It is more worthy with touchscreens.
The <label> element also help users who have difficulty clicking
on ver y small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox .
The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them together.
TEXT INPUT CONTROLS
There are three types of text input used on forms:
Single-line text input controls - This control is used for items that
require only one line of user input, such as search boxes or names.
They are created using HTML <input> tag.
Password input controls - This is also a single -line text input but it
masks the character as soon as a user enters it. They are also
created using HTML <input> tag.
Multi-line text input controls - This is used when the user is
required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
SINGLE-LINE TEXT INPUT CONTROLS
This control is used for items that require only one line of user
input, such as search boxes or names. They are created using HTML
<input> tag.
EXAMPLE
<!DOCT YPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form>
<label for id="firstname">First name:</label>
<input type="text" name=" first_name" id="firstname"> <br>
<label for id="lastname">Last name:</label>
<input type="text" name=" last_name" id="lastname">
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <input> tag for creating text
field.
PASSWORD INPUT CONTROLS
This is also a single -line text input but it masks the character as
soon as a user enters it. They are also created using HTML <input>
tag but type attribute is set to password.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type="text" name=" user_id" /> <br>
Password: <input type="password" name="password" />
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <input> tag for creating password field .
Attribute Description
Type Indicates the type of input control and for
text input control it will be set
to password
Name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
Value This can be used to provide an initial
value inside the control.
Size Allows to specify the width of the text-
input control in terms of characters.
Maxlength Allows to specify the maximum number
of characters a user can enter into the
text box.
MULTIPLE-LINE TEXT INPUT CONTROLS
This is used when the user is required to give details that may
be longer than a single sentence. Multi -line input controls are
created using HTML <textarea> tag.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here... </ textarea>
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <textarea> tag.
Attribute Description
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
rows Indicates the number of rows of text area box.
cols Indicates the number of columns of text area box
CHECKBOX CONTROL
Checkboxes are used when more than one option is required to be
selected. They are also created using HTML <input> tag but type
attribute is set to checkbox.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type="checkbox" name=“cprog" value="on"> C Programming
<input type="checkbox" name=“ htm" value="on"> HTML
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for <checkbox> tag.
Attribute Description
Type Indicates the type of input control and for checkbox input
control it will be set to checkbox.
Name Used to give a name to the control which is sent to the server
to be recognized and get the value.
Value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
RADIO BUTTON CONTROL :
Radio buttons are used when out of many options, just one option
is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name=“gender" value="male"> Male
<input type="radio" name=“gender" value=“female"> Female
</form>
</body>
</html>
ATTRIBUTES
Following is the list of attributes for radio button.
Attribute Description
Type Indicates the type of input control and for checkbox
input control it will be set to radio.
Name Used to give a name to the control which is sent to the
server to be recognized and get the value.
Value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
SELECT BOX CONTROL
A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from
where a user can select one or more options.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value=“Java" selected>Java</option>
<option value=“html">HTML</option>
</select>
</form>
</body>
</html>
ATTRIBUTES
Following is the list of important attributes of <select> tag:
Attribute Description
name Used to give a name to the control which is sent to the server
to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items
from the menu.
ATTRIBUTES
Following is the list of important attributes of <option> tag:
Attribute Description
value The value that will be used if an option in the select box box is
selected.
selected Specifies that this option should be the initially selected value
when the page loads.
label An alternative way of labeling options
FILE UPLOAD BOX
If you want to allow a user to upload a file to your web site, you
will need to use a file upload box, also known as a file select box.
This is also created using the <input> element but type attribute is
set to file.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name=" fileupload" accept="image/*" />
</form>
</body>
</html>
ATTRIBUTES
Following is the list of important attributes of file upload box:
Attribute Description
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
accept Specifies the types of files that the server accepts.
BUTTON CONTROLS
There are various ways in HTML to create clickable buttons. You
can also create a clickable button using <input>tag by setting
its type attribute to button. The type attribute can take the
following values −
T YPES
Attribute Description
submit This creates a button that automatically
submits a form.
reset This creates a button that automatically
resets form controls to their initial values.
button This creates a button that is used to
trigger a client-side script when the user
clicks that button.
image This creates a clickable button but we
can use an image as background of the
button.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name=" imagebutton" src=“a.png" />
</form>
</body>
</html>
