I need help to understand the <label></label> element. Specifically, I need to understand what arguments it can take and how to use them. I took a fragment of my form code and created a new HTML file just to test how <label> and <input> work together. I still don’t understand what the linter is telling me.
To demonstrate my ignorance, lets start with for="someName". As I understand it this acts as the equivalent to an id="someName"; therefore there is no need for an id="someName" declaration within the <label . . . . > string of text. From reading tutorials (and re-reading and re-reading them) it’s my understanding that the for="someName" text requires an id="someName" declaration in an <input . . . . > text string.
The name="someName" declaration is a reference to a form data element that the <label> . . . . declaration creates a literal for that identifies what the space following it is for. IOW, the name=... declaration is totally independent of the form presentation but relates to data that will be entered into the form. Every example that I can recall seeing shows the same exact value between quotation marks used with the for= and the id= and the name= variables. It seems to me that the name= information in quotes could be any valid data element name and doesn’t have to be the same as the for= and id= tags. Do I not understand how these names are used?
The fact that the for="someName" in the label statement and the id="someName" in the input statement are the same is to tie the label and input together. The data gets tied to the form by the name= . . . ```` statement in the <input . . . >that follows the<label . . . . >``` code and could be a totally different value.
Please tell me what I’m not understanding correctly. The linter does not give me the clues that I can interpret to make corrections.
My code:
<!DOCTYPE html>
<html lang="en">
<head> <!-- ! BEGINNING OF HEAD SECTION -->
<meta charset="UTF-8">
<meta name="description" content="Hutchins Clan Biography">
<meta name="keywords" content="HTML, CSS, JavaScript, Hutchins, biography">
<meta name="author" content="Robert Hutchins">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marriage Info</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Birthstone">
<link
rel="stylesheet"
href="Styles/entry.css" >
<style>
/* ALL STYLING IS IN EXTERNAL CSS FILES; SEE LINKS IN HEAD SECTION */
</style>
</head> <!-- !END OF HEAD SECTION -->
<body> <!-- ! BEGINNING of BODY SECTION - PAGE DESIGN STARTS -->
<div class="entry-page">
<!-- MASTHEAD SECTION -->
<div class="masthead">
<div class="masthead-line1">
The Hutchins Clan<br>
</div>
<div class="masthead-line2">
Marriage Information Entry
</div>
</div> <!-- End of .masthead -->
<div class="entry-box">
<form action="./action_page.php" method="post">
<!-- todo FIX action URL -->
<fieldset>
<legend>This area for entering informaton about marriages</legend>
<label for="marriageToPeopleID">
Marriage of:
</label>
<input type="text" id="marriageToPeopleID" name="firstName" placeholder="First" size="10">
<input type="text" id="marriageToPeopleID" name="firstName" placeholder="First" size="10">
<input type="text" id="marriageToPeopleID" name="middleName" placeholder="Middle" size="10">
<input type="text" id="marriageToPeopleID" individual="lastName" required placeholder="Last" size="10">
<!-- clanPEOPLE table -->
</fieldset>
</form>
</div>
</div>
</body>
</html>
Here are the first 3 linter responses, The remaining 4 are much the same:
You pointed out something that I could not see. I’m too close to it even after sleeping overnight I still have the same mindset that includes blinders to things I should be seeing.
I corrected the obvious dataname errors (see below) and re-linted the document but still got errors indicating duplicate id= statements.
What I coded is a <label . . . > statement that is followed by 3 <input . . . > statements.
I’m trying to achieve a single literal followed by 3 separate data element spaces, a la “Name: first middle last” with ‘Name’ being the literal and ‘first’, ‘middle’, and ‘last’ being separate data elements that, put together, form a full name. I used a similar construct stringing together spaces for data elements ‘city’, ‘county’, ‘state’, ‘country’ without getting errors from the linter. I can’t see any difference in how I coded the 2 cases. I only get linting errors for the "Marriage of: " line that produces the screen in this ss:
As I see it, the <label for=marriageToPeopleID" . . .> statement ties the label information to the 3 <input >. . . id="marriageToPeopleID"> statements that follow. If those id=. . . statements were not included in the<input . . . >lines, how would the labels be tied to the inputs? Does the fact that the<input . . . >``` statements follow automatically tie them to the label? That seems illogical to me.
revised code.
<!DOCTYPE html>
<html lang="en">
<head> <!-- ! BEGINNING OF HEAD SECTION -->
<meta charset="UTF-8">
<meta name="description" content="Hutchins Clan Biography">
<meta name="keywords" content="HTML, CSS, JavaScript, Hutchins, biography">
<meta name="author" content="Robert Hutchins">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marriage Info</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Birthstone">
<link
rel="stylesheet"
href="Styles/entry.css" >
<style>
/* ALL STYLING IS IN EXTERNAL CSS FILES; SEE LINKS IN HEAD SECTION */
</style>
</head> <!-- !END OF HEAD SECTION -->
<body> <!-- ! BEGINNING of BODY SECTION - PAGE DESIGN STARTS -->
<div class="entry-page">
<!-- MASTHEAD SECTION -->
<div class="masthead">
<div class="masthead-line1">
The Hutchins Clan<br>
</div>
<div class="masthead-line2">
Marriage Information Entry
</div>
</div> <!-- End of .masthead -->
<div class="entry-box">
<form action="./action_page.php" method="post">
<!-- todo FIX action URL -->
<fieldset>
<legend>This area for entering informaton about marriages</legend>
<label for="marriageToPeopleID">
Marriage of:
</label>
<input type="text" id="marriageToPeopleID" name="peopleFirstName" placeholder="First" required size="10">
<input type="text" id="marriageToPeopleID" name="peopleMiddleName" placeholder="Middle" size="10">
<input type="text" id="marriageToPeopleID" name="peopleLastName" required placeholder="Last" size="10">
<!-- clanPEOPLE table -->
</fieldset>
</form>
</div>
</div>
</body>
</html>
Thank you, again, for responding.
I think I found my label problem. I did so by a closer examination of the code forstringing location infomation together compared to that stringing names together. What I found was that in addition to a for="someName" in the label element theid="someName" was needed there and NOT needed in the <input . . . > code.
I failed to answer your question about id`` values having to be unique. The answer is that I am aware of that and do not reuse any fororid```value.
Again, thank you for responding. In trying to answer your questions, I was able to shed some of the tunnel vision and see the code with fresher eyes and clearer mind.
also, you can’t link a label with multiple inputs
if you want to give a kind of label to multiple inputs it seems the work for a legend
something like
<fieldset>
<legend>I describe all input elements</legend>
<label for="input1">I describe the first input</label><input id="input1">
<label for="input2">I describe the second input</label><input id="input2">
<label for="input3">I describe the third input</label><input id="input3">
</fieldset>
I have misinterpreted the meaning of ‘unique.’ The context I read it in caused me to believe that it had to be unique to associations. I thought, incorrectly it seems, that the id value tied the label to the data elements that the labels define places to be entered; thus and id would be needed for each data element. I’ve since learned that concept is wrong, but I don’t know what purpose having both for and id elements in the <label> tag serves.
I removed those errant id attributes from the <input> statements and I’ve got the code validator to be happy with all but the value in the for and id attributes. The validator says: The “for” attribute of the “label” element must refer to a non-hidden form control.
I’ve been down that rabbit hole for the last couple of hours without finding and answer searching or reading books.
like any other element, the label can also be uniquely identified by an id, in case you want to select it programamtically, or style it. The id on the label does not influence the relationship with the input element.
they are not equivalent, the for attribute links the label to the input element that has an id with the same value of the for attribute
this creates a link between the two elements, allowing for the input to be selected by clicking on the label
the for attribute has this function, the id is a unique identifier for an element
it works the same way as stylintg any other element using the id selector
“. . . the for attribute links the label to the input element that has an id with the same value of the for attribute”
is what I’m confused about.
I interpret your statement - and that of most tutorial lessons and books I’ve read - to mean that I must put an id= attribute in the <input> statement with the same value as that which follows the for= attribute in a <label> statement. When I write an <input> statement after a <label> pair and include an id= statement, I get an error when validating the code that says the id= attribute is not allowed there in the <input> statement.
You’ll see in the code above, in my op, that I put id="marriageToPeopleID" in my <input> statements. Notwithstanding the fact that I used the sameid= value in multiple <input> statements, which I now understand is incorrect, I could not get the code to pass validation until I removed the id= statements from <input> attributes entirely and placed it, once, in the <label> tag.
Why does that change pass validation? It contradicts the principle that there must be an id= attribute in the <input> tag identical to the for= attribute in the <label> tag? Furthermore, if an id= attribute must be in the <input> tag, how is it possible to string multiple <input> tags together like I’ve done to gather first/middle/last names and city/county/state/country data tying those data elements to the <label for= code? Am I doing something wrong stringing <input> code back to back?
Is it possible that the free online code validator that I’m using is in error? Probably, not, it being more likely that the problem lies in this operator’s head space.
On the question of how to link multiple inputs to a label I found this very old thread which talks about hidden labels, aria, but possibly not accepted by screen readers. It doesn’t look particularly standard to link 1 label with multiple inputs.
I logged onto Find my Past to look at their search form and all their input boxes had a label. On name they only give a first and last name option.
