Consider the following code:
<fieldset>
<legend>This area for entering informaton about marriages</legend>
<label for="marriagePeopleID" id="marriagePeopleID" class="required">
Marriage of:
</label>
<input type="text" name="peopleFirstName" placeholder="First" required size="10">
<input type="text" name="peopleMiddleName" placeholder="Middle" size="10">
<input type="text" name="peopleLastName" required placeholder="Last" size="10">
</fieldset>
I don't understand why both the for and the id attributes are included in the <label> tag pair. It's my understanding that they are equivalent and mean the same thing and serve to relate the information entered in the <input . . . > tags to dataelements defined by the name="peopleFirstName" and name="peopleMiddleName" and name="peopleLastName". My confusion lies in 3 things: a) why do for and id, meaning and used to do the same thing, occur in the <label ...> statement; and b) there is no element in the <input . . . > statements that do so; and c) there is nothing in the <label . . . > statement that ties the values entered for the 3 parts of the name to the <label>. The code works. It formats a screen correctly. It passes the HTML code validator. I just don't understand how. I got here because I originally had the id="marriagePeopleID" in each of the 3 <input . . . > statements. The validator didn't pass that arrangement.
Now, the HTML code validator is giving me the message: The “for” attribute of the “label” element must refer to a non-hidden form control. I don't understand this at all, probably because what I stated in the paragraph above is incorrect, that for and id don't work the way I think. My code and the CSS that styles it in no way have variable or data element declarations. IOW, there is no way for the code validator to know that marriagePeopleID and peopleFirstName have any relationship to anything, much less to each other. Why does it imply that the first, marriagePeopleID , is a hidden form control? What has to be done to un-hide it? If it's purpose is merely to relate the label with the input, why does it matter? I know that every for and id declaration has to be unique within the document. That is not the problem. I have not used it anywhere else. VS Code helps keep me honest in that case.
In the next part of the code, after that shown as an example, I have code that strings city, county, state, and country together in a similar fashion, except that the code validator takes no exception to the (unique) qualifier in the for attribute. That code is followed by:
<select name="spouseBirthState">
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="AZ">AZ</option>
.
.
.
</select>
This code works just fine without a for or id attribute, which I don't understand at all.
Before closing, I should add that I am a complete novice. I am designing frontend screens without any validation code so far. I felt I needed to get the HTML and CSS worked out before I dove into javascript or other frontend data validation scripting. Backend scripting and SQL will come when I dive into javascript, php, etc. For now, I'd like a better understanding of the concepts above. FWIW, I've spent hours on tutorials and reading textbooks. Nowhere have I found anything that answers the questions I've posed here, and that includes a couple of hours reading hits from searching.
I'd be grateful any light anyone can shed on this.
I have 10 forms all using <label> and <input> in the same way. I need to understand this so that I can fix the problem in all of them before I start validating the code.
<fieldset>
<legend>This area for entering informaton about marriages</legend>
<label for="marriagePeopleID" id="marriagePeopleID" class="required">
Marriage of:
</label>
<input type="text" name="peopleFirstName" placeholder="First" required size="10">
<input type="text" name="peopleMiddleName" placeholder="Middle" size="10">
<input type="text" name="peopleLastName" required placeholder="Last" size="10">
</fieldset>
I don't understand why both the for and the id attributes are included in the <label> tag pair. It's my understanding that they are equivalent and mean the same thing and serve to relate the information entered in the <input . . . > tags to dataelements defined by the name="peopleFirstName" and name="peopleMiddleName" and name="peopleLastName". My confusion lies in 3 things: a) why do for and id, meaning and used to do the same thing, occur in the <label ...> statement; and b) there is no element in the <input . . . > statements that do so; and c) there is nothing in the <label . . . > statement that ties the values entered for the 3 parts of the name to the <label>. The code works. It formats a screen correctly. It passes the HTML code validator. I just don't understand how. I got here because I originally had the id="marriagePeopleID" in each of the 3 <input . . . > statements. The validator didn't pass that arrangement.
Now, the HTML code validator is giving me the message: The “for” attribute of the “label” element must refer to a non-hidden form control. I don't understand this at all, probably because what I stated in the paragraph above is incorrect, that for and id don't work the way I think. My code and the CSS that styles it in no way have variable or data element declarations. IOW, there is no way for the code validator to know that marriagePeopleID and peopleFirstName have any relationship to anything, much less to each other. Why does it imply that the first, marriagePeopleID , is a hidden form control? What has to be done to un-hide it? If it's purpose is merely to relate the label with the input, why does it matter? I know that every for and id declaration has to be unique within the document. That is not the problem. I have not used it anywhere else. VS Code helps keep me honest in that case.
In the next part of the code, after that shown as an example, I have code that strings city, county, state, and country together in a similar fashion, except that the code validator takes no exception to the (unique) qualifier in the for attribute. That code is followed by:
<select name="spouseBirthState">
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="AZ">AZ</option>
.
.
.
</select>
This code works just fine without a for or id attribute, which I don't understand at all.
Before closing, I should add that I am a complete novice. I am designing frontend screens without any validation code so far. I felt I needed to get the HTML and CSS worked out before I dove into javascript or other frontend data validation scripting. Backend scripting and SQL will come when I dive into javascript, php, etc. For now, I'd like a better understanding of the concepts above. FWIW, I've spent hours on tutorials and reading textbooks. Nowhere have I found anything that answers the questions I've posed here, and that includes a couple of hours reading hits from searching.
I'd be grateful any light anyone can shed on this.
I have 10 forms all using <label> and <input> in the same way. I need to understand this so that I can fix the problem in all of them before I start validating the code.
