Lesson 7: Forms and User Input

What You'll Learn Today

Today you'll learn how to let users "talk" to your website. We'll build an HTML form to collect information and use JavaScript to process it, a key skill for creating interactive applications like login pages, search bars, or contact forms.

Why are Forms Important?

Forms are the main way websites get information from users. Without them, you couldn't log in, post a comment, buy a product, or even search for a video. Learning to handle forms is a giant leap towards building real, useful web applications.

Learning Objectives

Build HTML forms with different input types like text boxes and dropdowns.
Handle form submission using the onsubmit event in JavaScript.
Get user data from input fields using their ID and the `.value` property.

Core Form Concepts

Let's look at the key HTML tags and JavaScript ideas for making forms work.

<form> The Form Container

This tag wraps all your inputs. We use the onsubmit attribute to tell it which JavaScript function to run when the user hits the submit button.

event.preventDefault() Stop Page Reload

By default, submitting a form reloads the page. This JavaScript command is very important—it stops the default behavior so we can handle the form data ourselves without losing our current page.

input.value Get User Input

After selecting an input element with getElementById(), you can use the .value property to get the text or data that the user has entered into it.

required Simple Validation

This is an HTML attribute you can add to an <input> tag. It tells the browser not to let the user submit the form if that field is empty. It's a simple and easy way to make sure you get the data you need!

Your Mission: Code Form Handling

In the editor, you'll find an empty `handleDemoSubmit()` function with step-by-step hints. Your job is to fill in the missing code to make the form collect and display user input when submitted!

Pro Tip

Always start form functions with event.preventDefault() to stop the page from reloading. Then get input values with element.value!

Step 1: Stop the page reload
Write: event.preventDefault();
This prevents the form from refreshing the page.
Step 2: Get the name input
Write: const name = document.getElementById('nameInput').value;
This gets whatever the user typed in the name field.
Step 3: Get the color selection
Write: const color = document.getElementById('colorInput').value;
This gets the selected color from the dropdown.
Step 4: Add validation (optional)
Write: if (name.trim() === '') { alert('Please enter your name!'); return; }
This checks if the name is empty and shows an alert.
Step 5: Display the result
Write: document.getElementById('formResult').innerHTML = '<div class="alert alert-success">Name: ' + name + ', Color: ' + color + '</div>';
This shows the collected data in a green success box.
Bonus: Add HTML validation
In the HTML, add required to the name input: <input type="text" id="nameInput" class="form-control" required>
This makes the browser check that the name field isn't empty before submitting.

Take It Home

Try adding a new field to your form. How about a <textarea> for comments, or a set of radio buttons for a multiple-choice question? See if you can get the data from your new inputs and display it on submission.