Web Development 1
PHP and HTML FORMS
Introduction to PHP
Learning Objectives
At the end of the module the student is expected to:
1. Create PHP pages using
a. html forms;
b. select tags;
c. text area;
d. option / radio buttons;
e. checkbox tags
2. Understand the application of assigning values to variables and
appending text in PHP scripts.
HTML FORMS
In this section we will now explore the use of HTML forms.
HTML Forms
HTML Formare one of the main points of interaction between a
user and a web site or application. They allow users to send data to
the web site.
Here is the HTML output using
HTML form. The user is asked to
input his/her first name. After
the inputting the needed the
data, the user can now press the
Submit information button.
For the code refer to:
11html_forms.html
Course Module
Web Development 2
PHP and HTML FORMS
Here is the result of the data
submission, the users first name
is now displayed.
For the code refer to:
11html_forms.php
Here is the css code.
CSS define styles for your
documents, including the design,
layout and variations in display
for different devices and screen
sizes.
Filename: basic.css
Note: This is needed in the
succeeding codes.
Course Module
Web Development 3
PHP and HTML FORMS
This is the html code for the
form.
The variable name to be passed
to the php file.
Filename: 11html_forms.html
This is the PHP code. The
variable firstname is now dispay
here. Using the $_POST is
allowed us to collect data from
the htm file and display to the
php script.
Course Module
Web Development 4
PHP and HTML FORMS
USING SELECT Tag
The HTML select (<select>) element represents a control that
presents a menu of options. The options within the menu are
represented by <option> elements, which can be grouped
by <optgroup> elements. Options can be pre-selected for the user.
Here is the HTML output using
SELECTtag. The user is asked to
input his/her first name. After
the inputting the needed the
data, the user can select from the
dropdown list and press the
Submit information button.
For the code refer to:
12select_tag.html
Here is the result of the data
submission, the users first name
and position is now displayed.
For the code refer to:
12using_select.php
Course Module
Web Development 5
PHP and HTML FORMS
This is the html code for the
form.
Here the html form will contain a
textbox, and a dropdown list
showing the Administrator,
Faculty and Staff option.
Filename: 12Select_tag.html
This is the PHP code.
The variable $firstname and
$position stores the result from
the html page.
Filename: 12Using_Select.php
Course Module
Web Development 6
PHP and HTML FORMS
USING TEXT AREA TAG
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text
renders in a fixed-width font (usually Courier). The size of a text
area can be specified by the cols and rows attributes, or even better;
through CSS' height and width properties.
Here is the HTML output using
Text Area tag. The user is asked
to input his/her first name. After
the inputting the needed the
data, the user can input a series
of text in the text area and press
the Submit information button.
For the code refer to:
13using_textarea.html
Here is the result of the data
submission, the users first name
and the comment is now
displayed.
For the code refer to:
13using_textarea.php
Course Module
Web Development 7
PHP and HTML FORMS
This is the html code for the
textarea.
Here the html form will contain a
textbox, and a textarea where
the user can input series of text.
Filename: 13using_textarea.html
This is the PHP code.
The variable $firstname and
$comment stores the result from
the html page.
Filename: 13using_textarea.php
Course Module
Web Development 8
PHP and HTML FORMS
USING OPTION / RADIO BUTTON TAG
Option buttons are sometimes called Radio Buttons, and they
force the user into choosing only one item in a list, such as a
Male/Female option, or selecting a payment method.
Here is the HTML output using
Option / Radio button. The user
is asked to input his/her first
name. After the inputting the
needed the data, the user can
now select from the employee
type and press the Submit
information button.
For the code refer to:
14using_radiobuttons.html
Here is the result of the data
submission, the users first name
and the employee type selected.
For the code refer to:
14using_radiobuttons.php
Course Module
Web Development 9
PHP and HTML FORMS
This is the html code for the
radio button.
Here the html form will contain a
textbox, and aoption/radio
button where the user can select
type of employee
Filename:
14using_radiobuttons.html
This is the PHP code.
The variable $firstname and
$etype stores the result from the
html page.
Filename:
14using_radiobuttons.php
Course Module
Web Development 10
PHP and HTML FORMS
USING CHECKBOX TAG
Checkbox elements in a situation when the user must check all
boxes that apply (or none). A checkbox element can be placed onto a
web page in a pre-checked fashion by setting the checked attribute
with a "yes" value. By doing so, this element will now default to a
checked status each time the HTML page is loaded.
Here is the HTML output using
checkboxes. The user is asked to
input his/her first name. After
the inputting the needed the
data, the user can now select
from the different degree
received and press the Submit
information button.
For the code refer to:
15using_checkboxes.html
Here is the result of the data
submission, the users first name
and the degree earned.
For the code refer to:
15using_checkboxes.php
Course Module
Web Development 11
PHP and HTML FORMS
This is the html code for the
checkbox application.
Here the html form will contain a
textbox, and series of checkboxes
where the user can select types
of degree received.
Filename:
15using_checkboxes.html
This is the PHP code.
The variable $firstname and
several variables $BA, $MA,
$PHD, upon selection the
appropriate condition will be
displayed. The coded also uses
the isset() function that is used
to check whether a variable is set
or not.
Filename:
15using_checkboxes.php
Course Module
Web Development 12
PHP and HTML FORMS
ASSIGNING VALUES TO VARIABLES
In this section, it will illustrate how to have several inputs and
assign the output to variables to be displayed.
The HTML form contains 3 text
boxes, the user can input the
firstname, lastname and age.
Upon completion the result will
be displayed in the php file what
will have some operations.
Submit information button will
send information to the php file
For the code refer to:
16assigning_values.html
Here is the result of the data
submitted by the user. The
collected data are as follows,
firstname, lastname and age.
For the code refer to:
16assigning_values.php
Course Module
Web Development 13
PHP and HTML FORMS
This is the html code for the
assigning value application
Here the html form will contain
3 textboxes, and user must
supply data such as lastname,
firstname and age. Upon
submission the resulting values
will be send to the phpscript..
Filename:
16assigning_values.html
Upon submission of data from
the html file, the php script will
receive 3 variables firstname,
lastname and age.
The script will compute the age
by factor of 10 and add it to the
current age, it will also compute
the birth year by subtracting the
current_year with the ageplus
variable.
After the operation the results
are display in the browser using
the echo function.
Filename:
16assigning_values.php
Course Module
Web Development 14
PHP and HTML FORMS
APPENDING TEXT
In this section, you will learn how to append additional
variables to text.
The HTML form contains 3 text
boxes, the user can input the
firstname, lastname and age.
Upon completion the result will
be displayed in the php file what
will have some operations.
Submit information button will
send information to the php file
For the code refer to:
17appending_text.html
Here is the result of the data
submitted by the user. The
collected data are as follows,
firstname, lastname and age.
The script also appends values to
the existing input text supplied
by the user.
For the code refer to:
17appending_text.php
Course Module
Web Development 15
PHP and HTML FORMS
This is the html code for the
assigning value application
Here the html form will contain
3 textboxes, and user must
supply data such as lastname,
firstname and age. Upon
submission the resulting values
will be send to the phpscript..
Filename:
17appending_text.html
Upon submission of data from the
html file, the php script will receive
3 variables firstname, lastname and
age.
The script will compute the age by
factor of 10 and add it to the current
age, it will also compute the birth
year by subtracting the current_year
with the ageplus variable. It will aso
add the middle_init value to the
input text using the (.) operator.
After the operation the results are
display in the browser using the
echo function.
Filename: 17appending_text.php
Course Module
Web Development 16
PHP and HTML FORMS
References
Murach, J. (2014) Murach’s PHP and MYSQL (2nd Edition)
Yank, K, PHP and MYSQL: Novice to Ninja
WEBSITE
http://php.net/
http://www.w3schools.com/php/
https://www.tutorialspoint.com/php/
Course Module
