Sie sind auf Seite 1von 10

NAME: ________________________________ GR.

& SECTION: __________________


CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

CHAPTER 4

HTML FORMS AND PHP INPUT METHOD

OBJECTIVES:

At the end of the chapter, the students are expected to:

 Know the different HTML Objects that can be added on a HTML Form.
 Learn on how to insert and use HTML Objects on HTML Forms.
 Learn on how to use PHP Input Method on getting input from a user.
 Learn on how to use PHP statements in processing inputs in HTML Form.

PREPARED BY: MS. APRIL VALENCIANO ASILO


NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

HTML FORM (REVIEW)

HTML FORMS

 HTML forms are used to pass data to a server.


 A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and
label elements.
 The <form> tag is used to create HTML form.
o Example:
 <form>
Input Elements
</form>
o NOTE: In using HTML form and PHP, we need to add ACTION and
METHOD in the FORM tag.
 Action is the path of the HTML file wherein the program will
redirect after execution.
 Method is the type of input the form will use (either POST or GET)
o Example:
 <form action=”” method=”POST”>

Adding HTML Objects in your HTML Form

Here are some HTML Objects that we can add on the HTML Form.

 TextField
o <input type="text" name="<name>"/>
o Example:
 <input type="text" name="txtinput"/>
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

In the given example, the textfield with name of “txtinput” will be added on
the HTML Form.
 Submit Button
o <input type="submit" name="<name>" value="<value>"/>
o Example:
 <input type="submit" name="submitB" value="Execute"/>

In the given example, the Submit Button with name of “submitB” and value of
“Execute” (caption of the button) will be added on the HTML Form.

 Password
o <input type="password" name="<name>" />
o Example:
 <input type="password" name="pwd" />

In the given example, the Password Field with name of “pwd” will be
added on the HTML Form.

 Radio Button
o <input type="radio" name="<name>" value="<value>" /> Label
o Radio buttons let a user to select ONLY ONE of the given choices.
o Example:
 <input type="radio" name="sex" value="MALE" /> MALE <br/>
<input type="radio" name="sex" value="FEMALE" />FEMALE

In the given example, 2 Radio Buttons with name of “sex” will be added
on the HTML Form. The First Radio Button will have a value of “MALE” and the
other Radio Button will have a value of “FEMALE”.

 Checkbox
o <input type="checkbox" name="<name>" value="<value>" /> Label
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

o Checkboxes let a user select ZERO or MORE options of a limited number


of choices.
o Example
 <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car

In the given example, 2 Checkboxes with name of “vehicle” will be added


on the HTML Form. The First Checkbox will have a value of “Bike” and the
other Checkbox will have a value of “Car”.
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

PHP Form Handling

The most important thing to notice when dealing with HTML forms and PHP is that any form
element in an HTML page will automatically be available to your PHP scripts.

Form example:

<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>

The example HTML page above contains two input fields and a submit button. When the user
fills in this form and click on the submit button, the form data is sent to the "welcome.php" file.

The "welcome.php" file looks like this:

<html>
<body>
Welcome <?php echo $_POST["name"]; ?>.<br />
You are <?php echo $_POST["age"]; ?> years old.
</body>
</html>

A sample output of the above script may be:

Welcome John.
You are 28 years old.

The PHP $_GET and $_POST variables will be explained in the next chapters.

Form Validation

User input should be validated whenever possible. Client side validation is faster, and will reduce
server load.

However, any site that gets enough traffic to worry about server resources, may also need to
worry about site security. You should always use server side validation if the form accesses a
database.
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

A good way to validate a form on the server is to post the form to itself, instead of jumping to a
different page. The user will then get the error messages on the same page as the form. This
makes it easier to discover the error.

The $_GET Variable

The $_GET variable is an array of variable names and values sent by the HTTP GET method.

The $_GET variable is used to collect values from a form with method="get". Information sent
from a form with the GET method is visible to everyone (it will be displayed in the browser's
address bar) and it has limits on the amount of information to send (max. 100 characters).

Example
<form action="welcome.php" method="get">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

When the user clicks the "Submit" button, the URL sent could look something like this:

http://www.w3schools.com/welcome.php?name=Peter&age=37

The "welcome.php" file can now use the $_GET variable to catch the form data (notice that the
names of the form fields will automatically be the ID keys in the $_GET array):

Welcome <?php echo $_GET["name"]; ?>.<br />


You are <?php echo $_GET["age"]; ?> years old!

Why use $_GET?

Note: When using the $_GET variable all variable names and values are displayed in the URL.
So this method should not be used when sending passwords or other sensitive information!
However, because the variables are displayed in the URL, it is possible to bookmark the page.
This can be useful in some cases.

Note: The HTTP GET method is not suitable on large variable values; the value cannot exceed
100 characters.

The $_REQUEST Variable

The PHP $_REQUEST variable contains the contents of both $_GET, $_POST, and $_COOKIE.
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

The PHP $_REQUEST variable can be used to get the result from form data sent with both the
GET and POST methods.

Example
Welcome <?php echo $_REQUEST["name"]; ?>.<br />
You are <?php echo $_REQUEST["age"]; ?> years old!

The $_POST Variable

The $_POST variable is an array of variable names and values sent by the HTTP POST method.

The $_POST variable is used to collect values from a form with method="post". Information
sent from a form with the POST method is invisible to others and has no limits on the amount of
information to send.

Example
<form action="welcome.php" method="post">
Enter your name: <input type="text" name="name" />
Enter your age: <input type="text" name="age" />
<input type="submit" />
</form>

When the user clicks the "Submit" button, the URL will not contain any form data, and will look
something like this:

http://www.w3schools.com/welcome.php

The "welcome.php" file can now use the $_POST variable to catch the form data (notice that the
names of the form fields will automatically be the ID keys in the $_POST array):

Welcome <?php echo $_POST["name"]; ?>.<br />


You are <?php echo $_POST["age"]; ?> years old!

Why use $_POST?

 Variables sent with HTTP POST are not shown in the URL
 Variables have no length limit

However, because the variables are not displayed in the URL, it is not possible to bookmark the
page.
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

Example ($_POST)

<html>
<body>
<form action="" method="post">
Enter Value:<input type="text" name="txtinput"></br>
<input type="submit" name="submitB" value="Execute">
</form>
</body>
</html>

<?php
if(isset($_POST['submitB'])){ //check if the submit button „submitB‟ is clicked

$in=$_POST['txtinput']; //gets the value of txtinput textbox and store it to in variable

echo "Length of input:".strlen($in); // gets the no. of character in the in variable and store it to len variable
}
?>

Example ($_GET)

<html>
<body>
<form action="" method="get">
Enter Value:<input type="text" name="txtinput"></br>
<input type="submit" name="submitB" value="Execute">
</form>
</body>
</html>

<?php
if(isset($_GET['submitB'])){ //check if the submit button ‘submitB’ is clicked
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

$in=$_GET['txtinput']; //gets the value of txtinput textbox and store it to in variable

echo "Length of input:".strlen($in); // gets the no. of character in the in variable and store it to len variable
}
?>

Example using Looping Statement:


Make a program that will display numbers from the inputted start up to the inputted end value.

<?php
if(isset($_POST['submitB'])){ //check if the submit button ‘submitB’ is clicked
$msg=''; //variable for the output
$start=$_POST['txtstart']; //variable that will hold the value of inputted start
$end=$_POST['txtend']; //variable that will hold the value of inputted
end for ($ctr=$start;$ctr<=$end;$ctr++){
$msg=$msg.$ctr." ";
}
}
?>
<html>
<body>
<form action="" method="post">
Enter Start:<input type="text"
name="txtstart"></br> Enter End:<input type="text"
name="txtend"></br>
<input type="submit" name="submitB" value="Execute"> </br>
<?php echo $msg; ?>
</form>
</body>
</html>
NAME: ________________________________ GR. & SECTION: __________________
CHAPTER 4: HTML FORMS AND PHP INPUT METHOD

Exercises:
Direction: Make a program that will:

1. Compute for the tax of a given product price. Tax is determined by getting the 12 % of
the product price.
Example: INPUT: 1200
OUTPUT: 144

2. Combine 2 inputs (HOURS AND MINUTES) into a single output


(HOURS). Example: INPUT: 1 (HOURS)
30(MINUTES)
OUTPUT: 1.5 HOURS

3. Convert inputted time in 24 hour format into 12 hour


format. Example: INPUT: 23
OUTPUT: 11PM

4. Display all the numbers from the inputted START up to the inputted END incremented
by the inputted INCREMENT value.
Example: INPUT: 3 (START)
30 (END)
6 (INCREMENT)
OUTPUT: 3 9 15 21 27

5. Get the Greatest Common Denominator (GCD) of 2 inputted numbers using EUCLID‟s
Algorithm.
a. Get the remainder of num1 and num2, where num1 is the larger number.
b. If remainder is zero, then num2 is the GCD.
c. Otherwise, make num1=num2 and num2=remainder then repeat the first step.

Das könnte Ihnen auch gefallen