Samyak Jain
HTML forms are essential components of most websites and web apps. They enable interaction between users and those websites, and are a key concept for web developers to understand.
This comprehensive guide covers various aspects of HTML forms, from how to create and structure forms to JavaScript interaction and form validation.
Understanding how to work with forms programmatically allows you to validate and capture user input, handle submissions, and enhance the overall user experience.
By following the examples and best practices provided in this guide, you'll be equipped with the knowledge necessary to build robust web forms that enhance user experience and facilitate seamless data collection and submission.
Whether you're a beginner or an experienced developer, this guide serves as a valuable resource for understanding and implementing HTML forms effectively in your web projects.
A basic understanding of JavaScript fundamentals is recommended to fully comprehend the concepts discussed in this tutorial. Familiarity with HTML forms will also be beneficial for understanding and applying the material covered.
If you're new to JavaScript, it's recommended to acquaint yourself with variables, data types, functions, loops, and basic DOM manipulation techniques before diving into this tutorial. This foundational knowledge will facilitate a smoother learning experience as we explore more advanced topics related to form handling in JavaScript.
Starting Note: For your convenience, all the examples and code discussed here can be accessed on GitHub.
Before we start, here's something to note:
This is a follow up blog on this DOM and Events Handbook and not cover server-side communication/server-side form handling in this blog as it involves advanced topics such as AJAX (Asynchronous JavaScript and XML), Promises, error handling, and handling asynchronous operations in JavaScript.
In this tutorial, we'll instead focuses on how to work with various form elements including radio buttons, checkboxes, and select elements, as well as dynamically generating and interacting with them using JavaScript.
Delving into server-side communication would extend beyond the scope of this article, which aims to provide a comprehensive understanding of DOM manipulation and event handling within the context of form elements.
HTML forms are fundamental elements used for collecting and submitting user data on the web. They enable interaction between users and websites by allowing users to input information, make selections, and submit data to servers for processing.
HTML forms are created using the element, which acts as a container for various input elements. Common form elements include text fields, checkboxes, radio buttons, dropdown menus, and buttons.
To reference a form in JS, you can use DOM methods like getElementById() or document.forms . document.forms returns a collection of forms, and you can access a specific form using an index, name, or id.
const form = document.getElementById('signup'); const firstForm = document.forms[0]; // accessing first form const formByName = document.forms['formName']; // accessing form by name const formById = document.forms['formId']; // accessing form by id Let's see a basic example of an HTML form:
form> label for="username">Username: label> input type="text" id="username" name="username">br> label for="password">Password: label> input type="password" id="password" name="password">br> input type="submit" value="Submit"> form> In this example, we have a form with two input fields for username and password, along with a submit button.
HTML forms can have various attributes that control their behavior and appearance. Some common attributes include:
Here's an example of a form with action, method, and target attributes:
form action="/submit-form" method="POST" name="myForm" target="_blank"> form> JavaScript uses the HTMLFormElement object to represent a form. This object has properties corresponding to the HTML attributes action and method .
Methods like submit() and reset() are used for submitting and resetting forms.
const form = document.getElementById('signup'); form.action; // returns the action attribute form.method; // returns the method attribute form.submit(); // submits the form JavaScript provides Event Handlers to add interactivity to HTML forms. By leveraging these events, you can execute custom scripts in response to user actions within the form:
Submit Event: A form typically has a submit button, which when clicked, sends the form data to the server. This is achieved using an or element with type="submit" .
input type="submit" value="Sign Up"> // or button type="submit">Sign Up button> To attach an event listener to the submit event, you use the addEventListener() method. Here's an example:
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => < // Custom validation and submission logic here >); In many cases, you may want to intercept the default form submission behavior and execute custom logic before allowing the form to be submitted to the server. You can use preventDefault() for this. Example:
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => < event.preventDefault(); // Prevents the default form submission // Custom validation and submission logic here >); Without event.preventDefault() , any custom validation and submission logic would still execute within the event listener, but the default form submission behavior would not be prevented.
Reset Event: The reset event is triggered when the form is reset using a reset button or programmatically. We use reset() method to clear all form fields and reset them to their default values.
document.querySelector('form').addEventListener('reset', function(event) < // Custom form reset logic here >); You can access form fields using DOM methods like getElementsByName() , getElementById() , querySelector() , and so on
The form.elements property stores a collection of form elements. You can access these Elements by index, id, or name. Here's an example:
const form = document.getElementById('signup'); const nameField = form.elements['name']; // accessing element by name const emailField = form.elements['email']; // accessing element by name const firstElement = form.elements[0]; // accessing first element by index no. Once you've accessed a form field, you can use the value property to access its value. Here's an example:
const nameValue = nameField.value; const emailValue = emailFieldByName.value; Form validation is an essential aspect of web development that ensures the data submitted by users is accurate and meets specified criteria before being processed by the server. Common validations include checking for empty fields, valid email formats, and so on.
HTML5 provides built-in form validation through various attributes:
Here's an example of HTML form validation using these attributes:
form> label for="username">Username: label> input type="text" id="username" name="username" required minlength="3" maxlength="15">br> label for="email">Email: label> input type="email" id="email" name="email" required>br> label for="age">Age: label> input type="number" id="age" name="age" min="18" max="99">br> input type="submit" value="Submit"> form> JavaScript allows developers to perform more sophisticated validation logic beyond what HTML attributes offer. Event listeners can be attached to form elements to handle validation dynamically.
Here's a basic example of JavaScript form validation:
const form = document.querySelector('form'); form.addEventListener('submit', function(event) < event.preventDefault(); // Prevent form submission // Perform custom validation logic const email = document.getElementById('email').value; const password = document.getElementById('password').value; if (!emailIsValid(email)) < alert('Please enter a valid email address.'); return; > if (password.length < 6) < alert('Password must be at least 6 characters long.'); return; > // If validation passes, submit the form form.submit(); >); function emailIsValid(email) < return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); > In this example, the JavaScript function emailIsValid() uses a regular expression to validate the email format. The submit event listener prevents the form from being submitted if the validation fails, and custom error messages are displayed to the user.
Now, let's combine all the concepts we've covered into a complete example of a Registration form with client-side validation using JavaScript:
html> html> body> h2>User Registration h2> form id="registrationForm"> div> label for="username">Username: label> input type="text" id="username" name="username" /> div> div> label for="email">Email: label> input type="email" id="email" name="email" /> div> div> label for="password">Password: label> input type="password" id="password" name="password" /> div> div> input type="submit" value="Register" /> div> form> div id="errorMessages"> div> script src="script.js"> script> body> html> HTML Structure: We have a simple registration form with fields for username, email, password, and a submit button. There's also a container div ( errorMessages ) to display validation error messages.
Now let's write JavaScript code to handle form submission and perform client-side validation:
const registrationForm = document.getElementById("registrationForm"); const errorMessages = document.getElementById("errorMessages"); registrationForm.addEventListener("submit", function (event) < event.preventDefault(); const < username, email, password >= registrationForm.elements; errorMessages.innerHTML = ""; if (!username.value.trim()) < displayError("Username is required."); return; > if (!email.value.trim() || !isValidEmail(email.value)) < displayError("Please enter a valid email address."); return; > if (!password.value.trim() || !isStrongPassword(password.value)) < displayError( "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character." ); return; > alert("Registration successful!"); registrationForm.reset(); >); function displayError(message) < errorMessages.innerHTML += `$ `; > function isValidEmail(email) < return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); > function isStrongPassword(password) < return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).$/.test(password); > JavaScript Handling: We select the form and the error message container using getElementById . We attach an event listener to the form's submit event. When the form is submitted, we prevent its default behavior using event.preventDefault() to handle form submission manually.
Form Validation: We retrieve the values of username, email, and password.
We perform basic validation: Username must not be empty, Email must be in a valid format, Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one digit, and one special character.
Error Handling: If any validation fails, we display the corresponding error message. Error messages are displayed in the errorMessages div.
Form Reset: Upon successful registration (in this case, a simple alert), we reset the form using registrationForm.reset()
Currently, the code uses an alert to indicate successful registration. In a real scenario, you might want to implement an AJAX call to submit the data to a server for processing and handle the response accordingly But that's not what we're going to discuss, as mentioned at the start of this tutorial.
Overall this example covers form creation, form handling with JavaScript, form validation using regular expressions, and dynamic custom error message display, demonstrating a basic user registration form with client-side validation.
Radio buttons are a common form element used to select one option from a set of options. In JavaScript, you can manipulate radio buttons to retrieve user selections and perform actions based on those selections.
You can use radio buttons you want users to select only one option from a set of choices. In HTML, you can create radio buttons using the element with the type attribute set to "radio". A group of radio buttons with the same name attribute forms a radio group.
Here's an example:
html> html> body> form id="languageForm"> p>Select your favorite programming language: p> div> input type="radio" name="language" value="JavaScript" id="js" /> label for="js">JavaScript label> div> div> input type="radio" name="language" value="Python" id="python" /> label for="python">Python label> div> div> input type="radio" name="language" value="Java" id="java" /> label for="java">Java label> div> form> body> html> You use the id and for attributes for accessibility, linking the label to the corresponding radio button.
Now, let's discuss how to retrieve the value of the selected radio button using JavaScript.
button id="btn">Show Selected Language button> p id="output"> p> script> const btn = document.querySelector("#btn"); const radioButtons = document.querySelectorAll('input[name="language"]'); const output = document.getElementById("output"); btn.addEventListener("click", () => < let selectedLanguage; for (const radioButton of radioButtons) < if (radioButton.checked) < selectedLanguage = radioButton.value; break; > > // Displaying the output: output.innerText = selectedLanguage ? `You selected $ ` : `You haven't selected any language`; >); script>
Here's how this the code works: the JavaScript code initializes by selecting the button, radio buttons, and output elements from the HTML document. We add a click event listener to the button element. When the button is clicked, the function inside the event listener is executed.
Inside the click event listener, we iterate over all radio buttons in the radioButtons collection. We check if a radio button is checked using its checked property. If a radio button is checked, we assign its value to the selectedLanguage variable and exit the loop using break .
We update the content of the output element (
tag with id output ) based on whether a language is selected. If a language is selected ( selectedLanguage is truthy), we display a message indicating the selected language. Otherwise, we prompt the user to select a language.
When a radio button is checked or unchecked, it fires a change event. You can listen to this event using addEventListener() . Inside the event handler, you can access the checked state and value of the radio button using this.checked and this.value .
radioButton.addEventListener('change', function (e) < if (this.checked) < console.log(this.value); > >); Now, let's explore how to dynamically generate radio buttons using JavaScript. This is useful when you want to create radio button options dynamically based on certain criteria or data.
Suppose we have an array of languages, and we want to dynamically generate radio buttons for each language option:
html> body> div id="languages"> div> script> const languageOptions = ["Python", "Javascript", "C++", "Java"]; // Generate the radio buttons const languages = document.querySelector("#languages"); languages.innerHTML = languageOptions.map((language) => ` $ " id hljs-subst">$ "> `).join(' '); script> body> html> It dynamically generates radio buttons based on the languageOptions array and inserts them into the container element ( ). Each radio button has a unique ID and value corresponding to the language name, and the labels are associated with their respective radio buttons using the for attribute.
After dynamically generating the radio buttons, Now let's add change event listeners to them to handle changes in selection.
div id="languages"> div> div id="languageOutput"> div> // we create this one to fetch our selected language output // Attaching Change Event Listeners const radioButtons = document.querySelectorAll('input[name="language"]'); for (const radioButton of radioButtons) < radioButton.addEventListener('change', showSelectedlanguage); > // Handling the Change Event function showSelectedlanguage( ) < if (this.checked) < document.querySelector('#languageOutput').innerText = `You selected $this.value>`; > >
Here's what's happening:
This setup ensures that dynamically generated radio buttons have change event listeners attached to them, allowing for dynamic handling of user selections.
Let's first create a checkbox using the element and type attribute set to "checkbox". let's associate it with label for better accessibility.
label for="agree"> input type="checkbox" id="agree" name="agree" value="yes"> I agree to the terms label> A checkbox in HTML can exist in two states: checked and unchecked. And we can determine which is active using checked property. If it's true , the checkbox is checked – otherwise, it's unchecked. Example:
html> html> body> label for="agree"> input type="checkbox" id="agree" name="agree"> I agree to the terms label> script> const checkbox = document.getElementById('agree'); console.log(checkbox.checked); script> body> html> In HTML forms, when a checkbox is checked and the form is submitted, the browser includes the checkbox in the form data with its name attribute as the key and the value attribute (if specified) as the value. But if the checkbox is unchecked, it's not included in the form data at all.
label for="agree"> input type="checkbox" id="agree" name="agree"> I agree to the terms label> button id="btn">Show Value button> script> const checkbox = document.querySelector('#agree'); const btn = document.querySelector('#btn'); btn.onclick = () => < alert(checkbox.value); >; script> So basically the point is: When a checkbox is checked and included in form submissions, the browser defaults to sending 'on' as the value if no value attribute is explicitly defined for the checkbox input element. To accurately handle the checked state of a checkbox using JavaScript, use the checked property instead of relying solely on the value attribute.
Sometimes, you may need to work with multiple checkboxes with the same name and you want to retrieve the values of the selected checkboxes. Here's an example:
html> html> body> p>Select your preferred languages: p> label for="l1"> input type="checkbox" name="language" value="C++" id="l1" />C++ label> label for="l2"> input type="checkbox" name="language" value="Python" id="l2" />Python label> label for="l3"> input type="checkbox" name="language" value="Java" id="l3" />Java label> p> button id="btn">Get Selected Languages button> p> script> const btn = document.querySelector("#btn"); btn.addEventListener("click", () => < const checkboxes = document.querySelectorAll( 'input[name="language"]:checked' ); const selectedLanguages = Array.from(checkboxes).map( (checkbox) => checkbox.value ); alert("Selected Languages: " + selectedLanguages.join(", ")); >); script> body> html> In this example, we have checkboxes for selecting preferred programming languages.
Now, let's create a functionality to check or uncheck all checkboxes at once:
html> html> body> p> button id="btn">Check / Uncheck All button> p> p>Select your preferred languages: p> label for="l1"> input type="checkbox" name="language" value="C++" id="l1" />C++ label> label for="l2"> input type="checkbox" name="language" value="Python" id="l2" />Python label> label for="l3"> input type="checkbox" name="language" value="Java" id="l3" />Java label> script src="script.js"> script> body> html> // function to check or uncheck all checkboxes function check(checked = true) < const checkboxes = document.querySelectorAll('input[name="language"]'); // Iterate through each checkbox checkboxes.forEach((checkbox) => < // Set the checked property of each checkbox to the value of the 'checked' parameter checkbox.checked = checked; >); > // function to check all checkboxes and change button behavior to uncheck all function checkAll( ) < check(); this.onclick = uncheckAll; > // function to uncheck all checkboxes and change button behavior to check all function uncheckAll( ) < check(false); this.onclick = checkAll; > const btn = document.querySelector("#btn"); btn.onclick = checkAll; In this example, we have a button labeled "Check / Uncheck All".
Alternate approach could be:
function checkAll(checked = true) < const checkboxes = document.querySelectorAll('input[name="language"]'); checkboxes.forEach((checkbox) => < checkbox.checked = checked; >); > const btn = document.querySelector("#btn"); btn.addEventListener("click", () => < // Find the first checkbox with the name attribute set to 'language' const firstCheckbox = document.querySelector('input[name="language"]'); // Check if the first checkbox is checked const isChecked = firstCheckbox.checked; // Call the checkAll function with the opposite state of the first checkbox checkAll(!isChecked); >); Here, we select the first checkbox with the name "language" to determine its current checked state. Then, we call checkAll() with the opposite state.
html> html> body> div id="languages"> div> script> const languageOptions = ["Python", "Javascript", "C++", "Java"]; // Generate the checkboxes const html = languageOptions .map( (language) => ` ` ) .join(" "); document.querySelector("#languages").innerHTML = html; script> body> html> Here's how it works:
The element in HTML provides a dropdown list of options for users to choose from. It allows for single or multiple selections. Example:
By default, a element allows for a single selection. To enable multiple selections, add the multiple attribute.
"cities" multiple> Users can now select multiple fruits by holding down the Ctrl (or Cmd on Mac) key while clicking.
To interact with a element using JavaScript, we use the HTMLSelectElement type, which provides useful properties like selectedIndex and value . Example:
script> const selectElement = document.getElementById('cities'); console.log(selectElement.selectedIndex); // Returns the index of the selected option console.log(selectElement.value); // Returns the value of the selected option console.log(selectElement.multiple); // Returns true if multiple selections are allowed script> JavaScript allows you to handle events on the element, such as when a user selects an option. Example:
script> const btn = document.querySelector("#btn"); const selectElement = document.getElementById("cities"); btn.onclick = (event) => < event.preventDefault(); const selectedCity = selectElement.options[selectElement.selectedIndex].text; alert(`Selected city: $ , Index: $ `); >; script> Using the value property: The value property represents the value of the selected option. Let's understand it with example:
select id="cities"> option value="">Jaipur option> option value="DEL">New Delhi option> option value="UDR">Udaipur option> option>Mumbai option> select> const btn = document.querySelector("#btn"); const selectElement = document.querySelector("#cities"); btn.onclick = (event) => < event.preventDefault(); alert(selectElement.value); >; The HTMLOptionElement type represents individual elements within a element in JavaScript. It provides properties like index , selected , text , and value to access information about each option.
const selectElement = document.getElementById('cities'); const secondOptionText = selectElement.options[1].text; // Accessing text of the second option const secondOptionValue = selectElement.options[1].value; // Accessing value of the second option When a element allows multiple selections, you can iterate through its options to find which ones are selected and retrieve their text values.
const selectElement = document.getElementById('cities'); const selectedOptions = Array.from(selectElement.options).filter(option => option.selected); const selectedValues = selectedOptions.map(option => option.text); The output will be an array containing text of selected options. We can use option.value to get an array of values instead. Example:
html> html> body> select id="cities" multiple> option value="JAI">Jaipur option> option value="DEL">New Delhi option> option value="UDR">Udaipur option> option value="MUM">Mumbai option> select> button id="btn">Get Selected Cities button> script> const btn = document.querySelector("#btn"); const selectElement = document.querySelector("#cities"); btn.onclick = (event) => < event.preventDefault(); const selectedOptions = Array.from(selectElement.options) .filter((option) => option.selected) .map((option) => option.text); alert("Selected City: " + selectedOptions.join(", ")); >; script> body> html> html> html> style> #container < max-width: 540px; margin: 50px auto; > form < display: flex; flex-direction: column; > style> body> div id="container"> form> label for="task">Task: label> input type="text" id="task" placeholder="Enter a task" autocomplete="off" /> button id="btnAdd">Add Task button> label for="taskList">Task List: label> select id="taskList" name="taskList" multiple> select> button id="btnRemove">Remove Selected Tasks button> form> div> script src="script.js"> script> body> html> This HTML structure includes input fields for entering task descriptions, buttons for adding and removing tasks, and a element to display the list of tasks. We added a little css for clarity. Let's see Javascript code now:
const btnAdd = document.querySelector('#btnAdd'); const btnRemove = document.querySelector('#btnRemove'); const taskList = document.querySelector('#taskList'); const taskInput = document.querySelector('#task'); btnAdd.onclick = (e) => < e.preventDefault(); // Validate the task input if (taskInput.value.trim() === '') < alert('Please enter a task description.'); return; > // Create a new task option const option = new Option(taskInput.value, taskInput.value); taskList.add(option, undefined); // Reset the task input taskInput.value = ''; taskInput.focus(); >; btnRemove.onclick = (e) => < e.preventDefault(); // Save the selected tasks let selectedTasks = []; for (let i = 0; i < taskList.options.length; i++) < selectedTasks[i] = taskList.options[i].selected; >// Remove selected tasks let index = taskList.options.length; while (index--) < if (selectedTasks[index]) < taskList.remove(index); >> >; Explaination: we select the necessary elements from the HTML and attach event listeners to the "Add Task" and "Remove Selected Tasks" buttons. When the "Add Task" button is clicked, we create a new task option based on the input field value and add it to the element. When the "Remove Selected Tasks" button is clicked, we remove the selected tasks from the element.
The input event in JavaScript is triggered whenever the value of an input, , or element changes. Unlike the change event, which waits for a value to be committed (for example, when an input loses focus), the input event fires continuously as the value changes. The input event basically provides a way to respond to user input in real-time. Example:
html> html> body> label for="userInput">Enter Your Name: label> input type="text" id="userInput" placeholder="Your name"> p>Your name is: span id="displayName"> span> p> body> html> By understanding the fundamentals of HTML form elements, attributes, and events, you can create dynamic and user-friendly web forms that enhance the user experience.
JavaScript plays a crucial role in handling form submissions, validating user input, and providing real-time feedback to users.
Through practical examples and detailed explanations, in this guide you've learned about working with radio buttons, checkboxes, select elements, and handling multiple selections.
Keep exploring and experimenting with the concepts presented here to create robust and intuitive forms for your web applications.
