JavaScript DOM: Getting Form Elements

JavaScript DOM: Getting Form Elements

By /

Forms are the bridge between users and web pages—allowing people to enter data, choose options, and trigger actions. In HTML, form elements contain various elements, such as text inputs, checkboxes, radio buttons, dropdowns, and buttons. JavaScript interacts with these elements to read input, adjust defaults, or react to changes made by the user. Accessing form controls correctly is essential for creating dynamic and interactive web forms.

In JavaScript, form elements can be accessed using several techniques, depending on how the HTML is written. Some methods use names, others use IDs, and some rely on CSS-style selectors. This article walks you through each method with working examples that are fun, readable, and clear.

Accessing All Forms on the Page

Before working with form elements, sometimes you want to grab every form on the page. The document.forms collection lets you do exactly that. It contains all the forms as a list, which you can access by index or loop through.

Here’s an example where we get all forms and give each one a distinct border color to make them stand out:

<!DOCTYPE html>
<html>
<head>
  <title>All Forms Highlight</title>
</head>
<body>

  <form name="formOne">
    <input type="text" name="first" placeholder="First form input">
  </form>

  <form name="formTwo">
    <input type="text" name="second" placeholder="Second form input">
  </form>

  <script>

    // Get all forms on the page
    const allForms = document.forms;

    // Define colors for borders to visually separate the forms
    const borderColors = ['red', 'blue', 'green', 'orange'];

    // Loop through each form and apply a colorful border
    for (let i = 0; i < allForms.length; i++) {
      allForms[i].style.border = `3px solid ${borderColors[i % borderColors.length]}`;
      allForms[i].style.padding = '10px';
      allForms[i].style.marginBottom = '15px';
    }

  </script>

</body>
</html>

In this code, we first access all forms on the page using document.forms. We then loop through this collection, styling each form with a bright border color and some spacing. This makes it easy to see each form’s boundaries and confirms that you can manipulate multiple forms easily.

Selecting a Specific Form by Index or Name

After accessing all forms on a page, you might want to focus on just one particular form. You can do this either by its position in the document.forms collection (its index) or by its name attribute.

Here’s an example demonstrating both ways: selecting the first form by index, and selecting a form by its name:

<!DOCTYPE html>
<html>
<head>
  <title>Single Form Selection</title>
</head>
<body>

  <form name="firstForm">
    <input type="text" name="username" placeholder="Username">
  </form>

  <form name="secondForm">
    <input type="password" name="password" placeholder="Password">
  </form>

  <script>

    // Select the first form by index (0)
    const firstForm = document.forms[0];
    firstForm.style.backgroundColor = '#e0f7fa';
    firstForm.style.padding = '15px';

    // Select the form named "secondForm"
    const namedForm = document.forms['secondForm'];
    namedForm.style.backgroundColor = '#ffe0b2';
    namedForm.style.padding = '15px';

  </script>

</body>
</html>

In this snippet, we grab the first form simply by using document.forms[0] and give it a light blue background. Then, using document.forms['secondForm'], we select the form named "secondForm" and color it light orange. Both forms get some padding to make their content easier to see.

Using index or name lets you quickly reach the exact form you want to work with, giving you control over styling or further manipulation.

Accessing Input Elements by Name

Within a form, each input can be accessed by its name attribute using form.elements. This approach gives you direct control over specific inputs without using CSS selectors.

Here’s a fun example where we set the value of a text field named “magicWord”:

<!DOCTYPE html>
<html>
<head>
  <title>Set Input Value</title>
</head>
<body>

  <form name="spellForm">
    <input type="text" name="magicWord">
  </form>

  <script>

    const form = document.forms['spellForm'];

    const magicInput = form.elements['magicWord'];
    magicInput.value = 'Abracadabra';

    console.log('Magic word set:', magicInput.value);

  </script>

</body>
</html>

After loading the page, the input box already contains “Abracadabra”, and we log the confirmation in the console. It’s simple and direct.

Using getElementById for Specific Controls

Sometimes, an input might have an ID instead of a name. You can still target it easily using getElementById.

Below, we grab a password field with the ID “magicCode” and give it a fun placeholder label:

<!DOCTYPE html>
<html>
<head>
  <title>Password Field</title>
</head>
<body>

  <form>
    <input type="password" id="magicCode">
  </form>

  <script>

    const codeInput = document.getElementById('magicCode');
    codeInput.placeholder = 'Enter Secret Spell';

    console.log('Placeholder set for magic code');

  </script>

</body>
</html>

Once the page loads, users will see a helpful prompt telling them to “Enter Secret Spell” in the password field.

Selecting Inputs with querySelector

Pulling elements with querySelector lets you use CSS selectors, making it easy to grab elements like specific checkbox or email fields.

Here’s a checkbox field with the class “accept” being selected:

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Select</title>
</head>
<body>

  <form>
    <input type="checkbox" class="accept" value="agree">
  </form>

  <script>

    const checkbox = document.querySelector('input.accept');
    checkbox.checked = true;

    console.log('Checkbox is now selected:', checkbox.checked);

  </script>

</body>
</html>

This code finds the checkbox and automatically checks it, then logs the result to the console.

Getting All Inputs in a Form

If you want to work with all input fields, you can retrieve them using querySelectorAll scoped to the form. This method returns a NodeList you can loop through.

In the following example, we highlight every input field to indicate they are required:

<!DOCTYPE html>
<html>
<head>
  <title>Input Highlighter</title>
</head>
<body>

  <form name="testForm1">
    <p><input type="text" name="name"></p>
    <p><input type="email" name="email"></p>
    <p><input type="password" name="password"></p>
  </form>

  <form name="testForm2">
    <p><input type="text" name="name"></p>
    <p><input type="email" name="email"></p>
    <p><input type="password" name="password"></p>
  </form>

  <script>

    const form = document.forms['testForm1'];
    const inputs = form.querySelectorAll('input');

    for (let input of inputs) {
      input.style.border = '2px dashed orange';
    }

    console.log('All inputs are highlighted');

  </script>

</body>
</html>

Now each input in the first form (testForm1) gets a bright dashed border, visually marking all fields.

Accessing Dropdowns and Their Options

Dropdown lists (<select>) have their own way of accessing the selected option’s value or text content. You can grab them by name, ID, or using a selector.

Here we update the selected creature in a dropdown menu:

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Selector</title>
</head>
<body>

  <form name="creatureSelect">

    <select name="creature">
      <option value="dragon">Dragon</option>
      <option value="unicorn">Unicorn</option>
      <option value="phoenix">Phoenix</option>
    </select>

  </form>

  <script>

    const form = document.forms['creatureSelect'];

    const dropdown = form.elements['creature'];
    dropdown.value = 'phoenix';

    console.log('Dropdown selection set:', dropdown.value);

  </script>

</body>
</html>

After loading, the Phoenix option is already selected and confirmed in the console.

Working with Textareas

Text areas are also form controls that can be accessed like other inputs. Let’s fill one with a magical message.

<!DOCTYPE html>
<html>
<head>
  <title>Textarea Fill</title>
</head>
<body>

  <form name="messageForm">
    <textarea name="message"></textarea>
  </form>

  <script>

    const form = document.forms['messageForm'];
    const textArea = form.elements['message'];
    textArea.value = 'Expelliarmus!';

    console.log('Textarea pre-filled with:', textArea.value);

  </script>

</body>
</html>

When the page appears, the textarea already contains the phrase “Expelliarmus!”.

Handling Buttons and Submit Inputs

Buttons and inputs of type submit can also be accessed to change their text or behavior. Grab them by tag and type.

Here we relabel a submit button to “Cast Spell!”:

<!DOCTYPE html>
<html>
<head>
  <title>Button Label</title>
</head>
<body>

  <form>
    <button type="submit">Submit</button>
  </form>

  <script>

    const button = document.querySelector('button[type="submit"]');
    button.textContent = 'Cast Spell!';

    console.log('Button text changed to:', button.textContent);

  </script>

</body>
</html>

With this change, the button is more engaging and thematic.

Accessing Form Elements by Tag Name

You can also grab all the input fields inside a form by tag name. This is a quick way to reach multiple elements at once, especially if you’re working with forms that have many similar fields.

The method form.getElementsByTagName('input') returns an HTMLCollection of all <input> elements found within the form. Once you have this collection, you can loop through it and do whatever you like—style it, change values, or get user input.

Here’s an example where we space out all inputs in a form:

<!DOCTYPE html>
<html>
<head>
  <title>Tag Name Selection</title>
</head>
<body>

  <form name="allInputForm">
    <input type="radio" name="choice" value="a"> <br />
    <input type="radio" name="choice" value="b"> <br />
    <input type="text" name="notes"> <br />
  </form>

  <script>

    // Get the form by name
    const form = document.forms['allInputForm'];

    // Get all input elements inside the form
    const inputs = form.getElementsByTagName('input');

    // Add spacing to each input
    for (let input of inputs) {
      input.style.margin = '15px';
    }

    console.log('Margins set for all inputs');

  </script>

</body>
</html>

In this code, every input field is selected and given some extra spacing using margin, making the layout more readable and pleasing to the eye.

Now for something a little more playful. Let’s say we have a farm-themed form and we want to pre-fill each field with a fun emoji:

<!DOCTYPE html>
<html>
<head>
  <title>Tag Name Access</title>
</head>
<body>

  <form name="farmForm">
    <p><input type="text" name="cow"></p>
    <p><input type="text" name="goat"></p>
    <p><input type="text" name="chicken"></p>
  </form>

  <script>

    // Get the form by its name
    const form = document.forms['farmForm'];

    // Select all input fields
    const inputs = form.getElementsByTagName('input');

    // Add a cow emoji to every input
    for (let input of inputs) {
      input.value = '🐄';
    }

  </script>

</body>
</html>

This one sets a cow emoji 🐄 as the value in every text input field. It’s a fun way to see how easily you can loop through inputs and change their content using just the tag name.

Conclusion

In this article, you explored many simple and direct ways to access form elements using JavaScript. You used document.forms to get full forms, form.elements to dig into specific fields, and powerful methods like getElementById, querySelector, and querySelectorAll to target elements in creative and flexible ways. You also saw how to use tag-based methods like getElementsByTagName to grab groups of similar elements like inputs or buttons.

Each example was written to be fun, colorful, and easy to understand. From magical spells to emoji-filled farms, you saw that even form handling can be playful. Whether you’re working with a simple input box or styling a complete form, these techniques give you all you need to start interacting with forms using plain, clean JavaScript.

References

If you’re curious to explore further or want to double-check what you’ve learned, these trusted documentation pages offer more detailed explanations and examples:

Related Posts

Scroll to Top