LAB ACTIVITY 5: Manipulate Web form Data
Duration: 3 Hours
Learning Outcomes
By the end of this tutorial session, you should be able to:
1. Create web form.
2. Identify the process in retrieving data from web form.
3. Describe the operation on web form.
4. Implement client side validation on form tools.
5. Write code to validate data.
6. Upload PHP web forms to a browser.
Hardware/ Software:
Code Editor (e.g: Notepad++, sublime, Dreamweaver), server bundle (e.g: XAMPP)
Activity 5A
Activity Outcome: Create HTML forms and HTML input text.
Note:
1. The <form> element:
<form method="post" action="XXXXX.html">
Form element/ Form data
</form>
Form elements are different types of input elements, checkboxes, radio buttons,
submit buttons, and more.
Method: either POST or GET.
Action : Where to send the form data when the form is submitted
Activity Outcome: Create HTML Submit and Reset Button
Step 1: Open a new HTML file and type the following codes. Save as first_page.html.
<html><body>
<form method="post" action="second_page.php">
First name:
<input type="text" name="firstname" />
<p>Last name:
<input type="text" name="lastname" />
<input type="submit" name="submit" value="Click Here"/>
<input type="reset" name="reset" value="Reset"/>
Activity
</form> 6B
</body></html>
Activity 5B
Activity Outcome : Create a simple PHP code to receive and display output
entered by user.
Step1: Open a new PHP editor and type the following code. Save the file as
second_page.php
<html><body>
Welcome User. Here is your information. </br></br>
My first name is : <?php echo $_POST['firstname']; ?> </br>
My last name is : <?php echo $_POST['lastname']; ?>
</body></html>
Step 2: Preview file first_page.html in browser
Step 3: Key in the input then click submit. Write the output & explain your observation.
Activity 5C
Activity Outcome: Create Web Form
Procedure:
Step 1: Write the code below and save the program as fr_studentGrade.html
<html> <head>
<title>Student Grade</title>
</head>
<body>
<center>
<H2><FONT COLOR = "#000099">MY SCORE</FONT></H2></center>
<hr>
2
<form action = "ac_studentGrade.php" method = "POST">
<ul>
<p><FONT COLOR = "#CC0000"><b>Fill the form and click submit button
when you finished.</b></FONT></p>
<p><strong>Name:</strong>
<input type = "text" name = "name"></p>
<p><strong>Email:</strong>
<input type = "text" name = "email"></p>
<p><strong>Subject:</strong>
<select name="subject">
<option value="DFP50193 Web Programming ">DFP50193</option>
<option value="DFC40163 System Analysis &
Design">DFC40163</option>
<option value="DFC20123 Database Design">DFC20123</option>
</select>
</p>
<p><b>Continuous Assessment</b></p>
<ul>
<p><FONT COLOR = "#CC0000"><b>Your marks not more than
100.</b></FONT></p>
<li><strong>Quiz1:</strong>
<input type = "TEXT" name = "quiz1" size="2">
/100<br>
<br>
</li>
<li><strong>Quiz2:</strong>
<input type = "TEXT" name = "quiz2" size="2">
/100<br>
<br>
</li>
<li><strong>Midterm:</strong>
<input type = "TEXT" name = "midterm" size="2">
/100<br>
<br>
</li>
<li><strong>Assignment:</strong>
<INPUT TYPE = "text" name = "assignment" size="2">
/100<br>
<br>
</li>
<input type = "submit" name = "submit" value = "Calculate">
<input type= "reset" name = "reset" value = "Reset">
</ul></ul>
</form>
<hr>
</body></html>
Step 2: Write the code below and save as the above program as ac_studentGrade.php
<?php
echo "<center><font size = '5' color='#000099'>MY SCORE
</font></center>";
$name = $_POST['name'];
$subject = $_POST['subject'];
3
$quiz1 = $_POST['quiz1'];
$quiz2 = $_POST['quiz2'];
$midterm = $_POST['midterm'];
$assignment = $_POST['assignment'];
$email = $_POST['email'];
$solve = ($quiz1*0.2) + ($quiz2*0.2) + ($midterm*0.3) +
($assignment*0.3);
echo "<br><br> Name: ".$name;
echo "<br>Subject: ".$subject;
echo "<br>";
echo "<br>Quiz 1: ".$quiz1;
echo "<br>Quiz 2: ".$quiz2;
echo "<br>Mid term: ".$midterm;
echo "<br>Assignment: ".$assignment;
echo "<br>";
echo "<br>Carrymarks is: ".round($solve). "% <br>";
?>
Step 3: Preview file fr_studentGrade.html in the browser. Fill out the form and click submit
button.
Step 4: Write the output and explain your observation.
Activity 5D
Activity Outcome: Implement Client Side Validation.
Step 1: Open the existing HTML file fr_studentGrade.html.
Step 2: Add and edit code which are in bold.
<html> <head>
<title>Student Grade</title>
</head>
<body>
<center>
<H2><FONT COLOR = "#000099">MY SCORE</FONT></H2></center>
<hr>
4
<form action = "ac_studentGrade.php" method = "POST">
<ul>
<p><FONT COLOR = "#CC0000"><b>Fill the form and click submit
button when you finished.</b></FONT></p>
<p><strong>Name:</strong>
<input type = "text" name = "name" required></p>
<p><strong>Email:</strong>
<input type = "email" name = "email" required
oninvalid="setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></p>
<p><strong>Subject:</strong>
<select name="subject" required>
<option value="DFP50193 Web Programming ">DFP50193</option>
<option value="DFC40163 System Analysis &
Design">DFC40163</option>
<option value="DFC20123 Database Design">DFC20123</option>
</select>
</p>
<p><b>Continuous Assessment</b></p>
<ul>
<p><FONT COLOR = "#CC0000"><b>Your marks not more than
100.</b></FONT></p>
<li><strong>Quiz1:</strong>
<input type = "TEXT" name = "quiz1" size="2" required
oninvalid="setCustomValidity('Please Enter Your Marks for Quiz 1')"
oninput="setCustomValidity('')">
/100<br>
<br>
</li>
<li><strong>Quiz2:</strong>
<input type = "TEXT" name = "quiz2" size="2" required>
/100<br>
<br>
</li>
<li><strong>Midterm:</strong>
<input type = "TEXT" name = "midterm" size="2" required="">
/100<br>
<br>
</li>
<li><strong>Assignment:</strong>
<INPUT TYPE = "text" name = "assignment" size="2" required>
/100<br>
<br>
</li>
<input type = "submit" name = "submit" value = "Calculate">
<input type= "reset" name = "reset" value = "Reset">
</ul></ul>
</form>
<hr>
</body></html>
5
Step 3: Save and run the file in the browser. Try to submit the form without putting any data.
Then test all the other input with different types of value to see how validation works.
Observation :
i. What is the function of
required attribute?
ii. What is the function of
oninvalid="setCustomV
alidity('')"?
iii. What is the function of
oninput="setCustomVal
idity('') ?
iv. What is the function of
input type="email"?
