Font size
  • A-
  • A
  • A+
Site color
  • R
  • A
  • A
  • A
Skip to main content
If you continue browsing this website, you agree to our policies:
  • Data Privacy Consent Form
Continue
x
PSHS-MC KHub
  • Home
  • Course search
  • More
You are currently using guest access
Log in
PSHS-MC KHub
Home Course search
Expand all Collapse all

Q3 2nd Graded Exercise - Designing an HTML form

  1. G9 Courses
  2. SY25.CS3
  3. HTML Forms
  4. Q3 2nd Graded Exercise - Designing an HTML form
Completion requirements
View
Make a submission
Receive a grade
Due: Tuesday, 13 January 2026, 5:00 PM

A. Design an HTML form for a centralized club or organization application to ask for the following information on separate fieldset for #1 to #4 information from #5 information to #8 below.  Make all as required information.  

This is to be submitten within the period.

    1. StudentID (numeric type)
    2. Full Name (input type for text)
    3. Birthday (input type date)
    4. Email address (input type for email)
    5. Mobile phone (input type for text)
    6. Grade Level (drop down menu with appropriate values different from what is displayed on the screen)
    7. Intern / Extern (radio button with appropriate values different from what is displayed on the screen)
    8. Preferred Organization / Club (drop down menu - provide your own list with at least 5 items with appropriate values different from what is displayed on the screen)
    9. Why do you want to join (textarea).
    10. A submit and reset buttons
          Needed for the form elements Total (8pts)
    • enclosed everything inside the form tag, with method="post" and action="submit"
    • enclosed each form elements inside a label tag with appropriate prompt text, excluding submit and cancel
    • the required attribute

B.  Include the following event handlers to do the following:

  1. onsubmit / onreset to include a confirmation box to ask a user to proceed. Please use appropriate message (2pts).
  2. onblur on input text/textarea to mark with style form elements that were not given information input from the user. (the style will be up to you) - 5pts)

C. Apply a simple CSS style on the form.  Use :focus pseudo-class to give a style (up to you) when user is on a particular form element. (5pts) 

Name your repository as Q3_2GSectionLastName.html

Previous activity Form handling onsubmit, onchange, onselect, onblur, onfocus
Next activity Q3 Project Proposal Update Plan

Contact us

Follow us

You are currently using guest access (Log in)
Data retention summary
Policies
Powered by Moodle

This theme was developed by

Conecti.me
Moodle Appliance - Powered by TurnKey Linux