Menu
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 examine the elements variable in the debugger (Firefox), I see it is an array of length 5. My understanding is that form.elements will return all elements of the form. The debugger shows the following values for elements:
0: <fieldset>
1: <input#all>
2: <input>
3: <input>
4: <input>
I thought that the legend element was also a form element, but it is obviously not being counted as such here.
Can anyone enlighten me?
899
None, both the starting and ending tag are mandatory.
HTML <legend> Tag The legend tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.
getElementById returns an HTMLFormElement object. legend is not a listed element in the elements property of it.
As to why... /shrug. I can't seem to find any backstory. If I had to take a guess though, I'd say because it's not an actual control element for the form, and perhaps the powers-that-be feel HTMLFORMElement.elements means "control" elements. But again, just speculation.
182
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
