I have the following HTML:
<!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 13: Form Enhancement and Validation - Select All Checkboxes</title> <link rel="stylesheet" href="css/c13.css" /> </head> <body> <div class="container login"> <form id="interests" action="/login" method="post"> <div class="one-third column"> <img src="img/logo.png" alt="logo" id="logo" /> </div> <div class="two-thirds column" id="main"> <fieldset> <legend>Genres</legend> <label><input type="checkbox" value="all" id="all">All</label> <label><input type="checkbox" name="genre" value="animation">Animation</label> <label><input type="checkbox" name="genre" value="docs">Documentary</label> <label><input type="checkbox" name="genre" value="shorts">Shorts</label> </fieldset> </div><!-- .two-thirds --> </form> </div><!-- .container --> <script src="js/utilities.js"></script> <script src="js/all-checkboxes.js"></script> </body>
In the all-checkbox.js file, I have the following lines:
... var form = document.getElementById('interests'); var elements = form.elements; ...
When I load the page and look at the elements variable in the debugger (Firefox), I see that it is an array of length 5. I understand that form.elements will return all form elements. The debugger displays the following values for items:
0: <fieldset> 1: <input#all> 2: <input> 3: <input> 4: <input>
I thought that the element of legend was also an element of form, but obviously here it is not considered so.
Can someone enlighten me?
html forms elements
Mike ht
source share