You are on page 1of 8

UNIT-III: Building blocks of PHP

1.How to create forms in PHP ? Explain with Simple Example program.

Creating Forms : HTML form is an essential part of Web development process, it


allows us to gather data from user inputs and we can do various things with the data
we receive from user.

1. <html>
2. <head>
3. <title>A simple HTML form</title>
4. </head>
5. <body>
6. <form method=”post” action=”send_simpleform.php”>
7. <p><label for=”user”>Name:</label><br/>
8. <input type=”text” id=”user” name=”user”></p>
9. <p><label for=”message”>Message:</label><br/>
10. <textarea id=”message” name=”message” rows=”5”
cols=”40”></textarea></p>
11. <button type=”submit” name=”submit” value=”send”>Send
Message</button>
12. </form>
13. </body>
14. </html>

Put these lines into a text file called simpleform.html and place that file in your web
server document root. This listing defines a form that contains a text field with the
name “user” on line 8, a text area with the name “message” on line 10, and a submit
button on line 11. The FORM element’s ACTION argument points to a file called
send_simpleform.php, which processes the form information. The method of this form
is POST, so the variables are stored in the $_POST superglobal.

Now creates in the following code that receives user input and displays it within the
context of an HTML page.
<html>
<head>
<title>A simple response</title>
</head>
<body>
<p>Welcome, <strong><?php echo $_POST[‘user’]; ?></strong>!</p>
<p>Your message is:
<strong><?php echo $_POST[‘message’]; ?></strong></p>
</body>
</html>

In the above script called when the user submits the form created in Listing. Than it
accesses two variables: $_POST[‘user’] and $_POST[‘message’]. These are references to
the variables in the $_POST superglobal, which contain the values that the user entered
in the user text field and the message text area. Now you will see about as in the
following picture.

2. How to combine HTML Code with PHP?explain.

We will HTML and PHP code On a Single Page, and $_SERVER[“PHP_SELF”] a


superglobal variable, which returns filename of currently executing script. This returns
the path along with file name and this is used with action attribute of FORM tag.
Example of HTML and PHP code On a Single Page :
echo $_SERVER['PHP_SELF'];
Example :
In form tag you write like this
<form name=”frm1″ action=”<?php echo $_SERVER[“PHP_SELF”]; ?>”
method=”POST”>

<!-- Example : File name is : PHP_HTML_SINGLE_PAGE.php -->


<html>
<head> <title> HTML & PHP code On a Single Page</title>
Eg: </head>

<body>

<form name="frm1" action="<?php echo


$_SERVER["PHP_SELF"]; ?>" method="POST">
<p><strong> NAME : </strong> <input type="text"
name="txtUser"> </p>

<p><strong> Select Products : </strong> </p>

<select name="products[]" multiple="multiple">


<option value=" Lenovo "> Lenovo </option>
<option value=" samsung "> Samsung </option>
</select>

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

</form>
</body>
</html>

<?php
if(isset($_POST["txtUser"]) && !empty($_POST["txtUser"]))
{
echo "<p>Welcome <b>" . $_POST["txtUser"] . "</b>!</p>";
echo "<p>Your Product List are :</br>";

if(!empty($_POST["products"]))
{
echo "<ul>";
foreach ($_POST["products"] as $value)
{
echo "<li> $value </li>";
}
echo "</ul>";
}

?>
Output :

3. Explain briefly about form elements?


The most important form element is the input element.The input element is used to select
user information. An input element can vary in many ways, depending on the type
attribute. An input element can be of type text field, checkbox, password, radio button,
submit button, and more.
Form elements are:
1.Text Field
2.Password Field
3. Text Area
4. Radio Buttons
5. Check Boxes
6.Submit/Reset Buttons
7. List Boxes

Text Fields
Single-line text input controls are created using an <input> element whose type attribute
has a value of text.
Eg: <form>
<input type="text" name="first_name" />
</form>
Pogram1:
<html>
<head>
</head>
</body>
<form >
First name:
<input type="text" name="first_name" />
<br>
Last name:
<input type="text" name="last_name" />
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:

Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
The <INPUT> tag has some attributes like:

 type: Indicates the type of input control you want to create.


o Eg: <input type=”text/password/radio/”>
 name: Used to give the name part of the name/value pair that is sent to the server,
representing each form control and the value the user entered.
o Eg: <input name=”password”>
 value: Provides an initial value for the text input control that the user will see when
the form loads.
o Eg: <input value=”submit”>
 size: Allows you to specify the width of the text-input control in terms of characters.
o Eg: <input size=” 30”>
 maxlength: Allows you to specify the maximum number of characters a user can
enter into the text box.
o Eg: <input maxlength="10">

Password Field
This is also a form of single-line text input controls are created using an <input> element
whose type attribute has a value of password.
Eg: <input type="password" /> defines a password field:
Program2:
<html>
<head>
</head>
</body>
<form >
Login :
<input type="text" name="login" />
<br>
Password:
<input type="text" name="password" />
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:

Note: The characters in a password field are masked (shown as asterisks or circles).

Text Area (Multiple-Line Text Input Controls):


If you want to allow a visitor to your site to enter more than one line of text, you should
create a multiple-line text input control using the <textarea> element.
Eg: <textarea rows="5" cols="50" name="description">

Program3:
<html>
<head>
</head>
</body>
<form >
Description : <br />
<textarea rows="5" cols="50" name="description">
Enter description here...
</textarea>
<input type="submit" value="submit" />
</form>
</body>
</html>
Output is:

Radio Button:
Radio Buttons are used when only one option is required to be selected. They are created
using <input> tag as shown below:
Eg: <input type="radio" name="subject" value="maths" /> Maths

Program4:
<html>
<head>
</head>
</body>
<form>
<input type="radio" name="subject" value="maths" /> Maths
<input type="radio" name="subject" value="physics" /> Physics
<input type="submit" value="Select Subject" />
</form>
</body>
</html>
Note: checked: Indicates that this option should be selected by default when the page
loads.
Output is :

Checkboxes:
Checkboxes are used when more than one option is required to be selected. They are
created using <input> tag as shown below.
Eg: <input type="checkbox" name="maths" value="on"> Maths
Program5:
<html>
<head>
</head>
<body>
<form action="/cgi-bin/checkbox.cgi" method="get">
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
<input type="submit" value="Select Subject" />
</form>
</body>
</html>
Output is:

Buttons(Submit/Reset):
There are various ways in HTML to create clickable buttons. You can create clickable button
using <input> tag.
When you use the <input> element to create a button, the type of button you create is
specified using the type attribute. 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.
Eg: <input type="reset" value="Reset" />
<input type="button" value="Button" />
Program6:
<html>
<head>
</head>
<body>
<form action="http://www.example.com/test.asp" method="get">
<input type="submit" name="Submit" value="Submit" />
<br /><br />
<input type="reset" value="Reset" />
<input type="button" value="Button" />
</form>
</body>
</html>
Output is:

List Boxes or Select Boxes:


Drop Down Box is used when we have many options available to be selected but only one
or two will be selected.If you want create list boxes you must use the <SELECT>…</SELECT>
tag.
Eg: <select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>

Program7:
<html>
<head>
</head>
<body>
<form >
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Output is:

You might also like