HTMLFormElement.elements property returns an
HTMLFormControlsCollection consisting of all (non-image) form controls contained in an HTML
<form> element. It is a live collection that consists only of the following elements (if present in the form):
<input type="image" />)
The form controls in the returned
HTMLFormControlsCollection are in the same order in which they appear in the form.
<form id="my-form"> <label for="email" /> <input type="email" id="email" name="email" value="firstname.lastname@example.org" /> <label for="age" /> <input type="number" id="age" name="age" min="18" max="60" value="18" /> <input type="submit" /> </form>
const formElems = document.getElementById('my-form').elements; console.log(formElems.email.value); // output: 'email@example.com' console.log(formElems.age.value); // output: '18' console.log(formElems.value); // output: 'firstname.lastname@example.org' console.log(formElems.value); // output: '18' console.log(formElems.length); // output: 3
As you can see from the example above:
<label>elements are not taken into account by the collection returned by
lengthproperty of the collection returns
3because it also takes into account the
<input type="submit" />element.
Hope you found this post useful. It was published . Please show your love and support by sharing this post.