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