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!
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, XML1<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, XML1<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.
Central to HTML forms is the versatile <input> element. Based on the type attribute, the <input> element's appearance and function vary.
type="text": A single-lined text field for accepting textual input from the user.type="number": A field for numerical input.type="button": A clickable button to which you can attach functions to be executed on clicks.type="submit": A button that submits the form data.Here's a form showcasing these elements:
HTML, XML1<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>
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, XML1<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>
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, XML1<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.
Once we've fetched user input, we store it in a JavaScript variable for future use.
JavaScript1let 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.
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!