Scribd
Upload
2 views

Session 12 Forms and User Input

This session focused on handling forms in web development using JavaScript, covering form elements, validation techniques, and dynamic content display. Key topics included preventing default form behavior, client-side and server-side validation, and real-time input validation. The session concluded with a hands-on activity to create a form that validates user input and displays a success message without reloading the page.

Uploaded by

Jue Jue
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Session 12 Forms and User Input

This session focused on handling forms in web development using JavaScript, covering form elements, validation techniques, and dynamic content display. Key topics included preventing default form behavior, client-side and server-side validation, and real-time input validation. The session concluded with a hands-on activity to create a form that validates user input and displays a success message without reloading the page.

Uploaded by

Jue Jue
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Forms and User Input

Web Development Essentials - Session 12


Session Overview

● Learning Goals for Today:


○ Learn how to handle forms with JavaScript.
○ Understand how to validate user input.
○ Dynamically display content based on user interactions.
Introduction to Forms in HTML
What is a Form?

● A form is an HTML element that allows users to submit data (e.g., text inputs, radio buttons, checkboxes).

Form Elements:

● Text inputs: <input type="text">


● Radio buttons: <input type="radio">
● Checkboxes: <input type="checkbox">
● Buttons: <button>Submit</button>
● Select dropdown: <select>
Handling Forms with JavaScript
Why Handle Forms with JavaScript?

● JavaScript allows you to validate form data, handle form submissions without reloading the page, and update the UI
dynamically based on user input.

How to Access Form Values:

● Use document.getElementById() or document.querySelector() to access form fields.


Preventing Form Default Behavior
Form Default Behavior:

● When a form is submitted, the default behavior is to reload the page.

Preventing Default Form Submission:

● Use event.preventDefault() to stop the page from reloading.


Validating User Input
What is Validation?

● Validation ensures that the data entered by the user meets certain criteria before being submitted or processed.

Types of Validation:

1. Client-side Validation (using JavaScript): Ensures validation happens before data is sent to the server.
2. Server-side Validation: Validation occurs on the server after the form is submitted.
Common Form Validations
Required Fields: Ensure the user fills out necessary fields.

Email Format: Ensure the email follows a valid format (e.g., [email protected]).

Password Strength: Check if the password meets security criteria (e.g., length, special characters).
Handling Form Submission with Validation
Putting It All Together:

● Use JavaScript to validate inputs and prevent form submission if validation fails.
Dynamically Displaying Content Based on User Input
Why Use Dynamic Content?

● Dynamically updating the content of a webpage based on user input enhances interactivity and improves the user experience.

Example: Displaying a Welcome Message:


Real-time Validation with Event Listeners
Real-time Validation:

● You can validate inputs as the user types by adding event listeners to form fields (e.g., input, change events).
Hands-On Activity
Goal: Create a form that validates user input and displays a success message when the form is submitted correctly.

Instructions:

1. Create a form with fields for name and email.


2. Validate the fields to ensure they are filled out correctly.
3. Display a success message without reloading the page.
Common Mistakes in Form Handling
Forgetting event.preventDefault(): This will cause the form to reload the page, losing any dynamic behavior.

Not Handling Edge Cases: Ensure all possible user inputs are considered, including empty fields, incorrect formats, and malicious
inputs (e.g., XSS attacks).
Summary
What We Learned Today:

● How to handle forms with JavaScript.


● Validating user input to ensure correct data is submitted.
● Dynamically updating the page based on user interactions.
Questions?
Q&A Session

● Any questions before we wrap up?

Thank You & See You in the Next Class!

You might also like