HTML forms with PHP
BY
MAMATA PANDEY
HTML forms
HTML Forms are required, when you want to collect
some data from the site visitor
A form will take input from the site visitor and then will
post it to a back-end application such as CGI, 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.
The HTML <form> tag is used to create an HTML form
and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes
action
Backend script ready to process your passed data.
method
Method to be used to upload data. The most frequently used
are GET and POST methods.
target
Specify the target window or frame where the result of the
script will be displayed. It takes values like _blank, _self, _parent
etc.
All other generic attributes such as id, height, width
etc are also applicable to forms
Form Elements/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
Hidden Controls
Clickable Buttons
Submit and Reset Button
<input> tag
Form elements are defined using <input> tag
Some attributes of <input >tag are
type
Indicates the type of input control and for text input control it will be set
to text.
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.
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.
Example
<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" />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>
Checkboxes
Checkboxes are used when more than one option is
required to be selected
Folowing code creates two checkboxes
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
Radio buttons
Radio buttons are used when out of many options,
just one option is required to be selected
Following code creates two radio buttons
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
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.
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
File select 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.
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
Accept specifies the types of files that the server accepts.
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 −
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.
HTTP Methods
The Hypertext Transfer Protocol (HTTP) is designed to
enable communications between clients and servers.
HTTP works as a request-response protocol between a
client and server.
A client (browser) sends an HTTP request to the server;
then the server returns a response to the client. The
response contains status information about the
request and may also contain the requested content.
The two most common HTTP methods are: GET and
POST
GET Methods
GET is used to request data from a specified resource
The query string (name/value pairs) is sent in the URL of
a GET request
• GET requests can be cached
• GET requests remain in the browser history
• GET requests can be bookmarked
• GET requests should never be used when dealing with sensitive data
• GET requests have length restrictions
• GET requests are only used to request data not modify
POST Methods
POST is used to send data to a server to create/
update a resource
The data sent to the server with POST is stored in
the request body of the HTTP request
• POST requests are never cached
• POST requests do not remain in the browser history
• POST requests cannot be bookmarked
• POST requests have no restrictions on data length
PHP to process form data
The PHP super-global variables $_GET and $_POST are
used to collect form-data
If method attribute of HTML form has value “GET” then
$_GET or “POST” then $_POST is used
For example:
If html form contains a textbox with name attribute
having value “name”
Name: <input type="text" name="name"><br>
Then you can access data input in this textbox as
<?php echo $_POST["name"]; ?>
Or
<?php echo $_GET["name"]; ?>
According to value of method attribute in HTML form
Note
You can create separate .php file for processing form
data and specify its name as value of action
attribute
Or
You can write HTML code in php file itself
Example: program to add two numbers
<html>
<body>
<form method="post">
Enter First Number:
<input type="number" name="number1" /><br><br>
Enter Second Number:
<input type="number" name="number2" /><br><br>
<input type="submit" name="submit" value="Add">
</form>
<?php
if(isset($_POST['submit']))
{
$number1 = $_POST['number1'];
$number2 = $_POST['number2'];
$sum = $number1+$number2;
echo "The sum of $number1 and $number2 is: ".$sum;
}
?>
</body>
</html>
Thank
