Lesson 8

Exploring HTML Forms and Handling User Inputs with JavaScript

Introduction to the Lesson

On today's thrilling exploration, we're venturing deep into the realm of HTML forms, structures that capture user data and enable web pages to engage with users. Along this journey, we're also going to familiarize ourselves with a variety of form inputs and learn about data storage using JavaScript. Are you excited yet? Let's dive in!

HTML Forms - An Overview

Before we progress further, let's dissect the anatomy of a typical HTML form. A form contains a series of different elements enclosed between <form> tags.

HTML, XML
1<form> 2 ...form elements go here... 3</form>

While the <form> tag marks the beginning and end of a form, the real data collection happens through the use of different form elements within these tags.

HTML forms, the bedrock of the web, contain marked sections on a web page with interactive elements such as text fields and checkboxes. These elements collect user data. We declare an HTML form using the <form> tag.

Here's what a simple form looks like:

HTML, XML
1<form> 2 First name:<br> 3 <input type="text" name="firstname"><br> 4 Last name:<br> 5 <input type="text" name="lastname"><br> 6 <input type="submit" value="Submit"> 7</form>

You can see that this form is designed to collect both the first and last names of the user.

Form Elements and Input Types

Central to HTML forms is the versatile <input> element. Based on the type attribute, the <input> element's appearance and function vary.

  1. type="text": A single-lined text field for accepting textual input from the user.
  2. type="number": A field for numerical input.
  3. type="button": A clickable button to which you can attach functions to be executed on clicks.
  4. type="submit": A button that submits the form data.

Here's a form showcasing these elements:

HTML, XML
1<form> 2 <!-- A text input field --> 3 Full Name:<br> 4 <input type="text" name="fullname"><br> 5 6 <!-- A numerical input field --> 7 Age:<br> 8 <input type="number" name="age"><br> 9 10 <!-- A clickable button --> 11 <input type="button" value="Button"> 12 13 <!-- A submit button --> 14 <input type="submit" value="Submit"> 15</form>
The `label` Element

Labels play a crucial role in enhancing the accessibility of forms. We can link a <label> to a specific input element using the for attribute in the <label> and the id attribute in the input. In HTML forms, the <label> and <input> elements interact closely, enhancing web accessibility. The for attribute on a <label> element and the id attribute on an <input> element create a relationship between these elements.

When the for attribute of the <label> matches the id of the <input>, clicking on the label directly selects the associated input field. This interplay helps improve user experience, especially for people using assistive technologies, and enhances the overall accessibility of your web forms.

Let's enhance our form with labels:

HTML, XML
1<form> 2 <label for="fname">First Name:</label><br> 3 <input type="text" id="fname" name="firstname"><br> 4 <label for="lname">Last Name:</label><br> 5 <input type="text" id="lname" name="lastname"><br> 6 <input type="submit" value="Submit"> 7</form>
Fetching User Inputs with JavaScript

JavaScript is responsible for capturing data from form elements. We can access form elements using their name attribute with the following JavaScript selector: document.forms[formName][inputName].

HTML, XML
1<html> 2<body> 3<form name="myForm"> 4 <label for="firstname">First Name:</label> 5 <input type="text" id="firstname" name="name" > 6 <input type="button" value="Submit" onclick="logInput()"> 7</form> 8 9<script> 10function logInput() { 11 let form = document.forms["myForm"]; 12 let input = form["name"].value; 13 alert(input); 14} 15</script> 16</body> 17</html>

This snippet of JavaScript code is designed to fetch the value entered by the user in the 'firstname' field.

Storing User Inputs from a Form

Once we've fetched user input, we store it in a JavaScript variable for future use.

JavaScript
1let form = document.forms["myForm"]; 2let firstName = form["firstname"].value; 3let lastName = form["lastname"].value; 4console.log("You entered " + firstName + " " + lastName);

In this illustration, we store the user inputs 'firstname' and 'lastname' in the firstName and lastName variables, respectively.

Lesson Summary

Excellent work! You've just learned about HTML forms, the array of input forms, and managing user data with JavaScript. Your newfound knowledge now enables your websites to be more interactive and engaging.

Next, we'll work through a set of examples. Remember, practice is key to mastering coding. The more you practice, the better your skills will become. Your journey is turning out to be amazing - keep it up!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.