UNIT 2 conti..

<form> Elements

The HTML <form> element can contain one or more of the following form elements:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<fieldset>
•<legend>
•<datalist>
•<output>
•<option>
•<optgroup>
 Form Attributes
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.

<form action="action_page.php">
 The Target Attribute
The target attribute specifies where to display the response
that is received after submitting the form.
The target attribute can have one of the following values:

<form action="/action_page.php" target="_blank">

 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.

<form action="/action_page.php" method="get">

<form action="/action_page.php" method="post">

 The <input> Element
One of the most used form elements is the <input> element.
The <input> element can be displayed in several ways, depending on the type attribute.

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname">

The <label> Element

The <label> element defines a label for several 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 <select> Element
The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo“ selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

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:
Visible Values:
Use the size attribute to specify the number of visible values:

<select id="cars" name="cars" size="3">

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

<select id="cars" name="cars" size="4" multiple>

 The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>

The <button> Element

The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Try it Yourself
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.

<form action="action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
 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.

<form action="/action_page.php"> HTML <datalist> tag: This tag specifies the predefined
<input list="browsers"> options for an <input> element. This tag also gives the
<datalist id="browsers"> autocomplete feature for the <input> element of HTML.
Like once the user starts typing the input element of <
<option value="Internet Explorer"> datalist> tag, the user will see the pre-defined options
<option value="Firefox"> starting with the letter or word typed by the user. Note
<option value="Chrome"> that to use the <datalist> tag, the id of the tag must be
the same as of the <input> element attribute.
<option value="Opera">
<option value="Safari">
</datalist>
</form>
 The <output> Element
The <output> element represents the result of a calculation

<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>
Input E lements
Here are the different input types you can use in HTML:
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
Input Type Text
<input type="text"> defines a single-line text input field:

<input type="text" id="fname" name="fname"><br>

Input Type Password

<input type="password"> defines a password field:

<input type="text" id="username" name="username"><br>

 Input Type Submit
<input type="submit"> defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.

<input type="submit" value="Submit">

Input Type Reset

defines a reset button that will reset all form values to their default values:

<input type="reset" value="Reset">

Input Type Radio
<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
 Input Type Checkbox
<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<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>
 Input Type Date
The <input type="date"> is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the input field.

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Input Type Image
The <input type="image"> defines an image as a submit button.
The path to the image is specified in the src attribute.

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

<label for="myfile">Select a file:</label>

<input type="file" id="myfile" name="myfile">
 Input Type Hidden
The <input type="hidden"> defines a hidden input field (not visible to a user).
A hidden field lets web developers include data that cannot be seen or
modified by users when a form is submitted.
A hidden field often stores what database record that needs to be updated when the form is submitted.

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
Passing variables with data between
pages
• Some time we collect some value from a database and want to
retain the value for the particular user throughout the site as the
user moves between pages. There are different ways for
passing such values of the variables. It can be passed within a
site or even outside the site. We will discuss some of the ways
with their possible uses.
• Passing variable values between pages using session
• Passing variables between pages using cookies
• Passing variables between pages using URL
• Web Forms
• These are some of the way of transferring data variables
between pages. There is no clear rule to use a particular
method to pass the variables between pages. Here are some
standard way of doing with reasons. All variables needs
sanitization before using when they arrive from external
sources.
• There are two ways the browser client can send
information to the web server.
• The GET Method
• The POST Method
• Before the browser sends the information, it encodes it
using a scheme called URL encoding. In this scheme,
name/value pairs are joined with equal signs and
different pairs are separated by the ampersand.

name1=value1&name2=value2&name3=value3
• Spaces are removed and replaced with the + character
and any other nonalphanumeric characters are replaced
with a hexadecimal values. After the information is
encoded it is sent to the server.
PASSING VARIABLES THROUGH The GET Method

• The GET method sends the encoded user information

appended to the page request. The page and the
encoded information are separated by the ? character.

http://www.test.com/index.htm?name1=value1&name2=value2
• The GET method is restricted to send upto 1024
characters only.
• Never use GET method if you have password or other
sensitive information to be sent to the server.
• GET can't be used to send binary data, like images or
word documents, to the server.
• The data sent by GET method can be accessed using
QUERY_STRING environment variable.
• The PHP provides $_GET associative array to access all
the sent information using GET method.
<?php
if( $_GET["name"] || $_GET["age"] ) {
echo "Welcome ". $_GET['name']. "<br />";
echo "You are ". $_GET['age']. " years old.";

exit();
}
?>
<html>
<body>

<form action = "<?php $_PHP_SELF ?>" method = "GET">

Name: <input type = "text" name = "name" />
Age: <input type = "text" name = "age" />
<input type = "submit" />
</form>

</body>
</html>
The POST Method
• The POST method transfers information via HTTP headers. The
information is encoded as described in case of GET method and
put into a header called QUERY_STRING.
• The POST method does not have any restriction on data size to
be sent.
• The POST method can be used to send ASCII as well as binary
data.
• The data sent by POST method goes through HTTP header so
security depends on HTTP protocol. By using Secure HTTP you
can make sure that your information is secure.
• The PHP provides $_POST associative array to access all the sent
information using POST method.
<?php
if( $_POST["name"] || $_POST["age"] ) {
if (preg_match("/[^A-Za-z'-]/",$_POST['name'] )) {
die ("invalid name and name should be alpha");
}
echo "Welcome ". $_POST['name']. "<br />";
echo "You are ". $_POST['age']. " years old.";

exit();
}
?>
The $_REQUEST variable
• The PHP $_REQUEST variable contains the contents of
both $_GET, $_POST, and $_COOKIE.

• The PHP $_REQUEST variable can be used to get the

result from form data sent with both the GET and POST
methods.
• Try out following example by putting the source code in
test.php script.
<?php
if( $_REQUEST["name"] || $_REQUEST["age"] ) {
echo "Welcome ". $_REQUEST['name']. "<br />";
echo "You are ". $_REQUEST['age']. " years old.";
exit();
}
?>
STATE MANAGEMENT
PHP Sessions
• A session is a way to store information (in variables) to be used across
multiple pages.
• Unlike a cookie, the information is not stored on the users computer.

• What is a PHP Session?

• When you work with an application, you open it, do some changes, and then
you close it. This is much like a Session. The computer knows who you are. It
knows when you start the application and when you end. But on the internet
there is one problem: the web server does not know who you are or what you
do, because the HTTP address doesn't maintain state.
• Session variables solve this problem by storing user
information to be used across multiple pages (e.g.
username, favorite color, etc). By default, session
variables last until the user closes the browser.
• So; Session variables hold information about one single
user, and are available to all pages in one application.
Start a PHP Session
A session is started with the session_start() function.
Session variables are set with the PHP global variable: $_SESSION.

<?php
// Start the session
session_start();
$_SESSION[“Admin"] = “Admin";
$_SESSION[“Password"] = “admin123";
echo "Session variables are set.";
?>
Get PHP Session Variable Values
• session variables are not passed individually to each new
page, instead they are retrieved from the session we open
at the beginning of each page session_start();
• Also notice that all session variable values are stored in the
global $_SESSION variable:
• <?php
session_start();
• // Echo session variables that were set on previous
page
echo "Favorite color is " . $_SESSION[“Admin"]
. ".<br>";
echo "Favorite animal is " . $_SESSION[“Password"]
. ".";
?>
• show all the session variable values for a user session is to run
the following code:
• <?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
print_r($_SESSION);
?>
</body>
</html>
Modify a PHP Session Variable
• <?php
session_start();
?>
• <!DOCTYPE html>
<html>
<body>
<?php
// to change a session variable, just overwrite it
$_SESSION[“Admin"] = “Rahul";
print_r($_SESSION);
?>
</body>
</html>
Destroy a PHP Session

To remove all global session variables and destroy the session,

use session_unset() and session_destroy():

<?php
session_start();
// remove all session variables
session_unset();

// destroy the session

session_destroy();
?>