Form Properties and Methods

The method property is targeted at setting or returning the value of the method attribute in a form.

The method attribute indicates the way of sending form-data. The latter is sent to the page, specified in the action attribute.

Document forms are the components of the specific collection, known as document.forms. It is a so-called “named collection”, both named and ordered. For getting the form both the name and the number can be used, like here:

document.forms.myForm - the form with name="myForm"

document.forms[0] - it's the first form in the document

While having a form, any element is available in the named collection form.elements, like in this example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form name="myForm">
      <input name="firstName" value="1">
      <input name="lastName" value="2">
    </form>
    <script>
      // get the form
      let form = document.forms.myForm; // <form name="myForm"> element
      
      // get the element
      let elem = form.elements.firstName; // <input name="firstName"> element      
      alert(elem.value); // 1
    </script>
  </body>
</html>

Multiple elements can exist with the same name: for example, the case with radio buttons. In such a case, form.elements[name] is a collection, for example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form>
      <input type="radio" name="age" value="1">Value1</input>
      <input type="radio" name="age" value="2">Value2</input>
    </form>
    <script>
      let form = document.forms[0];
      let ageElems = form.elements.age;
      alert(ageElems[0]); // [object HTMLInputElement]
    </script>
  </body>
</html>

The navigation properties don't rely upon the tag structure. All the control elements are available inside form.elements.

Fieldsets as “Subforms”

A form can contain one or many <fieldset> elements. Also, they have elements property, which is controlled by the lists form inside them. Here is an example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form id="formId">
      <fieldset name="infoFields">
        <legend>info</legend>
        <input name="login" type="text">
      </fieldset>
    </form>
    <script>
      alert(formId.elements.login); // <input name="login">      
      let fieldset = formId.elements.infoFields;
      alert(fieldset); // HTMLFieldSetElement
     // we can get input by name both from the form and from a set of fields            
     alert(fieldset.elements.login == formId.elements.login); // true
    </script>
  </body>
</html>

You can also use a shorter notation: form.name. So, you have the option of accessing the element as form[index/name]. In other words, you can simply write form.login instead of form.elements.login. That also can work, but there is a small problem: when accessing an element and changing its name, it will still be available under the previous name. It is demonstrated in the following example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    </style>
  </head>
  <body>
    <form id="form">
      <input name="login">
    </form>
    <script>
      alert(form.elements.login == form.login); // true,  it's the same <input>      
      form.login.name = "name"; // change the name of the input      
      // form.elements updated the name:
      alert(form.elements.login); // undefined
      alert(form.elements.name); // input      
      // form allows both names: the new and the old
      alert(form.name == form.login); // true
    </script>
  </body>
</html>

Backreference: element.form

The form is available as element.form for any element. So, elements reference the form and the form references all elements, as demonstrated in the picture below:

And, here is an example:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    </style>
  </head>
  <body>
    <form id="form">
      <input type="text" name="login">
    </form>
    <script>
      // form -> element
      let login = form.login;      
      // element -> form
      alert(login.form); // HTMLFormElement
    </script>
  </body>
</html>

Form Elements

Let’s look through the main form elements:

  • input and text area

    Their value can be accessed as input.value (string) or input.checked (boolean) for checkboxes, as shown in the example below:

    input.value = "The Value";
    textarea.value = "The text"
    input.checked = true; // checkbox or radio button

    Also, take into consideration that although <textarea>...</textarea> keeps its value as nested HTML, textarea.innerHTML should never be used for accessing it. It includes only the HTML that was initially on the page and not the current value.

  • select and option

    A <select> element has three significant properties:

    1. The group of <option> subelements is known as select.options.
    2. The value of the currently selected <option> is select.value.
    3. The number of the currently selected <option> .

    Accordingly, they offer three different ways of setting a value for the <select>:

    1. Finding the matching <option> element and set option.selected to true.
    2. Setting select.value to the value.
    3. Setting select.selectedIndex to the number of the option.

    The 2nd and the 3rd ways are more convenient, but the first is the most obvious one.

    Here is an example:

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <style>
        </style>
      </head>
      <body>
        <select id="select">
          <option value="green">Green</option>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
        <script>
          // all three lines do the same thing
          select.options[2].selected = true;
          select.selectedIndex = 2;
          select.value = 'red';
        </script>
      </body>
    </html>

    In contrast to most other controls, <select> helps to control multiple options simultaneously, if it has the attribute multiple. However, this feature is rarely used. Hence, you can use the first way that is add/remove the selected property <option> from subelements.

    In the example, we demonstrate how to get their collection as select.options:

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <style>
        </style>
      </head>
      <body>
        <select id="select" multiple>
          <option value="green" selected>Green</option>
          <option value="red" selected>Red</option>
          <option value="blue">Blue</option>
        </select>
        <script>
          // get all selected values from multiple selection 
          let selected = Array.from(select.options)
            .filter(option => option.selected)
            .map(option => option.value);
          alert(selected); // green, red
        </script>
      </body>
    </html>
  • new option

    This element is also used rarely on its own. But in its specification there is a pretty short syntax for creating <option> elements, like this:

let option = new Option(text, value, defaultSelected, selected);

The parameters are the following:

  • text is the text within the option,
  • value is the value of the option,
  • defaultSelected – if it's true, then selected HTML-attribute is generated,
  • selected – if it's true, then the option is picked out.

Sometimes there is a confusion over defaultSelected and selected. The difference between them is the following: defaultSelecte specifies the HTML-attribute, which you can get using option.getAttribute('selected'), and the selected sets whether the is selected or not. It is more important. In principle, both values can be set to true or false. For example:

let option = new Option('text', 'value');
// creates <option value="value">text</option>

In the example below, the same element is selected:

let option = new Option('text', 'value', true, true);

Option elements include the following properties:

  • option.selected - the option is selected.
  • option.index - the number of the option amid the others in its kbd class="highlighted"><select>.
  • option.text -the option’s text content.



Do you find this helpful?

Related articles