Description
Objective: The objective of this exercise is to:
1. Learn and practice the basics of HTML Forms
2. Protect your website
3. Introduction to php server programming
Submit: screenshots, your html file and a link to your web page
You may discuss this with your fellow students or the instructor.
Name:
Part #1: Forms Tutorial
Estimated time: 30 minutes
Option 1: W3Schools
Exercise: Use w3schools to review/learn basic form commands
https://www.w3schools.com/html/html_forms.asp
1. Review the tutorial from HTML forms HTML Input Form Attributes
2. 3 Screen grabs showing progress
Option 2: Expert
1. If you are already a form expert – write me a paragraph explaining how you
already know this and where you received this knowledge.
Part #2: Simple Form
Estimated time: 30 minutes
Exercise:
Create a basic HTML Form page (~/public_html/cse383/lab5/index.html) that
includes the following:
Must be done in ceclinux using editor (nano or vim)
Make it look as good as possible
o May use your own written external css for styling
o May NOT use javascript
Page 1 of 4
CSE383 Lab #5 Basic Forms
o May NOT use bootstrap
o May NOT use other libraries
Form Definition
o Must use POST
o Submit to “/~johnsok9/cse383/lab5f21.php”
Test output should show “FORM PASSED” similar to
the attached picture
o Must send output to NEW tab/window
o
Form Fields (with appropriate labels) (note: required names in “” after
each field)
o Name (“name-f21”)
o Address (“address1-f21”)
o Address2 (“address2-f21”)
o City (“city-f21”)
o State (“state-f21”)
Dropdown of all 50 US states
o PostalCode (numeric only) (“postalcode-f21”)
o Current Class Level (radio) (“classLevel-f21”)
1
st, second, third, fourth, fifth year
o Interests (checkboxes) (“interest-f21[]”)
Sports
Games
Reading
Coding
Friends
Cars
Travel
o Expected Graduation Date (date field with calendar) (“date-f21”)
o Hidden field (“userid-f21” filled in with your unique id)
o Submit Button (“submit_button-f21”)
Note: You may debug what you are sending to the form processor
by adding a hidden field named “debug” with any value. In this
case the processor will print out all received form fields, and exit.
Example of good output:
Page 2 of 4
CSE383 Lab #5 Basic Forms
Part #3: Validate Web Page
Estimated time: 10minutes
Exercise:
Use the W3c validator at https://validator.w3.org/
The html file must either pass all validation or explain in the
comments why it doesn’t
Remember you will need to copy/paste the code
SUBMIT:
Screenshot
o Attach a screenshot of your completed web page
o Attach a screenshot showing response from the php program
o Attach a screen shot of the passing w3c validator
File
o Attach the html file
o Attach the optional css file
Link
Page 3 of 4
CSE383 Lab #5 Basic Forms
o Add the link to the web page in the text area
Page 4 of 4