I know how to use label.
I know that the For attribute should have Id of the input.
Also I know there is another way to link the label to an input by wrapping it around the input like this:
<label>test <input type="text" /></label>
What I couldn't figure out is why in bootstrap,there is no Id for the textarea and the label tag is assigned to word "name" as follow:
<label for="name" > test </label>
<textarea class=form-control" rows="3" ></textarea >
Related
I've been learning about the "for" attribute in HTML and what it does but I've stumbled upon a weird example that I've yet to understand
Code1
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
Code2
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
<br>
<label><input type="checkbox" name="personality"> Loving</label>
I understand why "for" is used in the first block of code but I don't understand why the second code used "for" and "id" implicitly when it could've just worked fine without them.
Any help?
It is correct, that it works without it. But it is useful to connect the label with the input field. That is also important for the accessibility (e.g. for blind people, the text is read).
The browsers also allow you to click the labels and automatically focus the input fields.
For checkboxes this can be useful as well. But for these, you could also surround the checkbox-input like this:
<label>
<input type="checkbox"> I agree with the answer above.
</label>
In this case, the checkbox is automatically checked when you click on the text.
The surrounding of the inputs with a label works with every input field. But the text, that describes the input field, should always be inside it. That what for is for: When your HTML disallows the label-surrounding, you can use the for-attribute.
The the both following examples:
Simple stuctured:
<label>
Your Name:<br>
<input type="text"/>
</label>
Complex structure around input fields:
<div class="row">
<div class="col">
<label for="name">Your Name:</label>
</div>
<div class="col">
<input type="text" id="name" />
</div>
</div>
It could be used without "for" attribute, and it will be fine, according to docs.
This is just one option how to use "for" to omit confusing developers.
Anyway, in case of placing checkbox inside label, you can skip "for" and it will be fine.
<!-- labelable form-relation still works -->
<label><input type="checkbox" name="personality"> Loving</label>
"for" approach much preferable if you want to style it, f.e. using Bootstrap
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
To be able to use the label with the check box.
E.g., when rendered, click the label and it will toggle the check box ticked state.
Edit: Further to this, it allows putting the label anywhere on the page.
Is the attribute aria-labelledby needed on an <input> element that is nested inside a <label> element that serves as a label for <input>? Like below:
<label>This is an input field:
<input type="text" />
</label>
or do I need something like:
<label id="mylabel">This is an input field:
<input type="text" aria-labelledby="mylabel" />
</label>
I know that the for attribute is not needed on <label> if the target of for is nested, does the same principle apply to the ARIA attributes?
When <input> tag is present inside the <label> tag, you don't need to use aria-labelledby attribute.
But, if you are writing like this :
<div> Enter some text here:
<input type="text"/>
</div>
Then, you need to use aria-labelledby on <input> tag like this:
<div id="txt"> Enter some text here:
<input type="text" aria-labelledby="txt">
</div>
Is it possible to access the text length in the <input> tag from itself?
Avoiding document.getElementById("filter").value.length
I want to do something like this:
<input id="filter" class="input" type="text" oninput="filterWhenTextLengthIs15(this.length)"/>
Is there something like this.length?
When you want to get the length of the value (the text in the input) you have to use:
this.value.length
For your code:
<input id="filter" class="input" type="text" oninput="filterWhenTextLengthIs15(this.value.length)"/>
when do we wrap around both the text description & the form in put & when shall we keep the label separate from the form control?
If you want the input to be triggered when clicking on label you should wrap your input into label like this: <label><input type="radio"> Label Text</label>
Or you can enable this triggering by giving and id on input and take it as the for attribute on label like this: <label for="theID">Label Text</label><input id="theID" type="radio">.
But if you don't want triggering the input on label click only then you don't need any of these 2 above.
If I am getting your question correctly, you want to know the difference between following-
label wrapped around both the text description & the form input-
<label>
Male<input type="radio" name="gender" id="male" value="male">
</label>
Label separate from form control-
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
Well, the functionality of both these is same. The only difference is for attribute which is used to define the input field to which the label is assigned.
You can use the first method only if input field and label are together in document (next to each other like in the snippets). If they are far away from each other in the document, you have to use the second method to define the input field for label. Consider following example-
<label for="male">Select Male</label>
<br/>
<br/>
<input type="radio" name="gender" id="male" value="male"> Male
I have a weird html problem.
I have a code like:
<label for="username">Username</label>
<input name="username" type="text"/>
But when I click on the label text Username I am not "redirected" into the input text field. By redirection I mean that the blinking cursor appears inside the input field and I can start writing.
What am I doing wrong?
For in label refers to an id:
<label for="username">Username</label>
<input name="username" id="username" type="text"/>
More: http://www.w3.org/TR/html401/interact/forms.html#h-17.9.1
The text box also needs a value for id, so use one in the text box like this:
<input name="username" id="username" type="text"/>
in Label for you need input's id not name so, mention input id
try this...
<label for="username">Username</label>
<input id="username" type="text"/>
hope it works for u!