HTML Notes Page No.

HTML Forms
An HTML form is used to collect user input. The user input can then be sent to a server for
processing.
HTML forms are used to send the user information to the server and returns the result back to the
browser. For example, if you want to get the details of visitors to your website, and send them
some message, you can collect the user information by means of form processing. Then, the
information can be validated either at the client-side or on the server-side. The final result is sent
to the client through the respective web browser. To create a HTML form, form tag should be
used.

Example
First name:
John

Last name:
Doe

Submit

The <form> Element

The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
An HTML form contains form elements.
Form elements are different types of input elements, like: text fields, checkboxes, radio buttons,
submit buttons, and more.
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
HTML Notes Page No.2

<button> Defines a clickable button

<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

The <input> Element

The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
<input type="date"> Defines a date picker.

Example
<input type="text" id="firstname" name="firstname">
If the type attribute is omitted, the input field gets the default type: "text".
Attributes of input element
id attribute The id attribute is a unique identifier of the HTML element. Each id attribute must
be unique. Also, this attribute must begin with a letter and is case sensitive. It can be used as an
anchor reference in URL. It isn’t associated with the data within the element.
In CSS, the id attribute is referenced with the # character. In Javascript, it is referenced with
getElementById().
name attribute The name attribute defines a name of the element. It is used in the HTTP
request that is sent to the server as a variable name by the browser. This attribute is associated
with the data within the element.
Like the id attribute, the name attribute must begin with a letter and is case sensitive, but unlike
the id attribute, it can be not unique.
The name attribute cannot be referenced in CSS. In Javascript, it is referenced with
getElementsByName().
This attribute is valid only on the following
elements: <button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output
>, <param>, <select>, and <textarea>.
Text Fields
<input type="text"> defines a single-line input field for text input.
Example
HTML Notes Page No.3

A form with two text input fields:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
This is how it will look like in a browser:
First name:

Last name:

Note: The form itself is not visible. Also note that the default width of an input field is 20
characters.
Radio Buttons
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your Gender : </p>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
This is how the HTML code above will be displayed in a browser:

Choose your Gender :

Male
Female
Other

The <label> Element

Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label, when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very 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.
HTML Notes Page No.4

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to
bind them together.
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The <date> element
The <input type="date"> defines a date picker.
The resulting value includes the year, month, and day.
Always add the <label> tag for best accessibility practices!

Example
Show a date control:
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

The <select> Element

The <select> element defines a drop-down list:
Example
<select id="courses" name="courses">
<option value="pgdca">PGDCA</option>
<option value="dca">DCA</option>
<option value="dcas">DCA-S</option>
<option value="tally">TALLY</option>
</select>
The <option> element
The <option> element defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="pgdca" selected>PGDCA</option>
HTML Notes Page No.5

Visible Values:
Use the size attribute to specify the number of visible values:
Example
<select name="courses" size="3">
<option value="pgdca">PGDCA</option>
<option value="dca">DCA</option>
<option value="dcas" selected>DCA-S</option>
<option value="tally">TALLY</option>
</select>
Allow Multiple Selections:
Use the multiple attribute to allow the user to select more than one value:
Example
<select name="courses" size="6" multiple>
<option value="pgdca">PGDCA</option>
<option value="dca">DCA</option>
<option value="dcas" selected>DCA-S</option>
<option value="tally">TALLY</option>
<option value="deoa">DEOA</option>
<option value="python">PYTHON</option>
<option value="oracle">ORACLE</option>
<option value="advancedExcel">Advanced Excel</option>
</select>
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
The rows attribute specifies the visible number of lines in a text area.
The cols attribute specifies the visible width of a text area.
This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:
Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
The <button> Element
The <button> element defines a clickable button:
HTML Notes Page No.6

Example
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
This is how the HTML code above will be displayed in a browser:
Click Me!
Note: Always specify the type attribute for the button element. Different browsers may use
different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset> element.
Example
<form action="/action_page.php">
<fieldset>
<legend>Personal Details:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Vijay"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Manohar"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
This is how the HTML code above will be displayed in a browser:
Personal Details :
First name:
Vijay

Last name:
Manohar

Submit

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.
Users will see a drop-down list of the pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
HTML Notes Page No.7

</datalist>
</form>
The <output> Element
The <output> element represents the result of a calculation (like one performed by a script).
Example
Perform a calculation and show the result in an <output> element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a page on the server with a script for processing input data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="ANAND"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="KUMAR"><br><br>
<input type="submit" value="Submit">
</form>
This is how the HTML code above will be displayed in a browser:
First name:
ANAND

Last name:
KUMAR

Submit

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.
If the name attribute is omitted, the value of the input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="ANAND"><br>
HTML Notes Page No.8

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname" value="KUMAR"><br><br>
<input type="submit" value="Submit">
</form>
List of all <form> attributes:
Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).
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 page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called "/action_page.php".
This page contains a server-side script that handles the form data:
<form action="/action_page.php">
If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in
the current window.
The default value is "_self" which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value "_blank".
Example
Here, the submitted result will open in a new browser tab:
<form action="/action_page.php" target="_blank">
Other legal values are "_parent", "_top", or a name representing the name of an iframe.
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting
the form data.
Example
Use the GET method when submitting the form:
<form action="/action_page.php" method="get">
or:
Example
Use the POST method when submitting the form:
<form action="/action_page.php" method="post">
HTML Notes Page No.9

When to Use GET?

The default HTTP method when submitting form data is GET.
However, when GET is used, the form data will be visible in the page's address field:
/action_page.php?firstname=John&lastname=Doe
Notes on GET:
 Appends form-data into the URL in name/value pairs
 The length of a URL is limited (2048 characters)
 Never use GET to send sensitive data! (will be visible in the URL)
 Useful for form submissions where a user wants to bookmark the result
 GET is better for non-secure data, like query strings in Google
When to Use POST?
Always use POST if the form data contains sensitive or personal information. The POST method
does not display the form data in the page address field.
Notes on POST:
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
Example
This example will not submit the value of the "First name" input field:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

<!DOCTYPE html>
<html>

<head>
<title>Simple Form Processing</title>
</head>

<body>
<form id="form1" method="post">
FirstName:
<input type="text" name="firstname" required/>
<br>
<br>
LastName
<input type="text" name="lastname" required/>
<br>
<br>
Address
HTML Notes Page No.10

<input type="text" name="address" required/>

<br>
<br>
Email Address:
<input type="email" name="emailaddress" required/>
<br>
<br>
Password:
<input type="password" name="password" required/>
<br>
<br>
<input type="submit" value="Submit”/>
</form>
</body>
</html>
Form Validation: Form validation is done to ensure that the user has provided the relevant
information. Basic validation can be done using HTML elements. For example, in the above
script, the email address text box is having a type value as “email”, which prevents the user
from entering the incorrect value for an email. Every form field in the above script is followed
by a required attribute, which will intimate the user not to leave any field empty before
submitting the form. PHP methods and arrays used in form processing are:
 isset(): This function is used to determine whether the variable or a form control is having a
value or not.
 $_GET[]: It is used the retrieve the information from the form control through the
parameters sent in the URL. It takes the attribute given in the url as the parameter.
 $_POST[]: It is used the retrieve the information from the form control through the HTTP
POST method. IT takes name attribute of corresponding form control as the parameter.
 $_REQUEST[]: It is used to retrieve an information while using a database.
Form Processing using PHP: Above HTML script is rewritten using the above mentioned
functions and array. The rewritten script validates all the form fields and if there are no errors,
it displays the received information in a tabular form.
 Example:

<?php
if (isset($_POST['submit']))
{
if ((!isset($_POST['firstname'])) || (!isset($_POST['lastname'])) ||
(!isset($_POST['address'])) || (!isset($_POST['emailaddress'])) ||
(!isset($_POST['password'])) || (!isset($_POST['gender'])))
{
$error = "*" . "Please fill all the required fields";
}
else
{
$firstname = $_POST['firstname'];
HTML Notes Page No.11

$lastname = $_POST['lastname'];
$address = $_POST['address'];
$emailaddress = $_POST['emailaddress'];
$password = $_POST['password'];
$gender = $_POST['gender'];
}
}
?>
<html>

<head>
<title>Simple Form Processing</title>
</head>

<body>
<h1>Form Processing using PHP</h1>
<fieldset>
<form id="form1" method="post" action="form.php">
<?php
if (isset($_POST['submit']))
{
if (isset($error))
{
echo "<p style='color:red;'>"
. $error . "</p>";
}
}
?>

FirstName:
<input type="text" name="firstname"/>
<span style="color:red;">*</span>
<br>
<br>
Last Name:
<input type="text" name="lastname"/>
<span style="color:red;">*</span>
<br>
<br>
Address:
<input type="text" name="address"/>
<span style="color:red;">*</span>
<br>
<br>
Email:
HTML Notes Page No.12

<input type="email" name="emailaddress"/>

<span style="color:red;">*</span>
<br>
<br>
Password:
<input type="password" name="password"/>
<span style="color:red;">*</span>
<br>
<br>
Gender:
<input type="radio"
value="Male"
name="gender"> Male
<input type="radio"
value="Female"
name="gender">Female
<br>
<br>
<input type="submit" value="Submit" name="submit" />
</form>
</fieldset>
<?php
if(isset($_POST['submit']))
{
if(!isset($error))
{
echo"<h1>INPUT RECEIVED</h1><br>";
echo "<table border='1'>";
echo "<thead>";
echo "<th>Parameter</th>";
echo "<th>Value</th>";
echo "</thead>";
echo "<tr>";
echo "<td>First Name</td>";
echo "<td>".$firstname."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Last Name</td>";
echo "<td>".$lastname."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Address</td>";
echo "<td>".$address."</td>";
echo "</tr>";
echo "<tr>";
HTML Notes Page No.13

echo "<td>Email Address</td>";

echo "<td>" .$emailaddress."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Password</td>";
echo "<td>".$password."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Gender</td>";
echo "<td>".$gender."</td>";
echo "</tr>";
echo "</table>";
}
}
?>
</body>

</html>
 Output:

Note: When the PHP and HTML are coded in a single file, the file should be saved as PHP. In
the form, the value for the action parameter should be a file name.
HTML Notes Page No.14

HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
HTML supports 140 standard color names.
Background Color
You can set the background color for HTML elements:
Hello World

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:
Hello World
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL
values:
rgb(255, 99, 71)
HTML Notes Page No.15

#ff6347
hsl(9, 100%, 64%)
The following two <div> elements have their background color set with RGBA and HSLA
values, which adds an Alpha channel to the color (here we have 50% transparancy):
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>