The HTML tag <label> may not contain block elements by definition. The following code is wrong in HTML 4, although ist works in most browsers:
<input type="radio" value="A" name="ABC" id="ABC_A">
<label for="ABC_A">
<p>Option A</p>
<p>Having a good time with HTML.</p>
</label>
I could make a block element from the <label> via CSS, but this still remains invalid HTML code. And in some instances, it makes sense to format one label into multiple paragraphs.
My question is: Is there a valid way in HTML to use block elements as a label for an input?
Possible workarounds, that I have considered inappropriate are:
Creating one label within each paragraph (why should one input have a dozend labels - and which one should a screen reader read, then?)
Using JavaScript to have the input "clicked" when the block element is clicked. I am searching for a solution that will work without scripting (and that is supported by vommon screen readers)
And ideas? Thank you!
Related
I saw the code below, in one of my studying codes:
<form>
<label for="firstName">First Name:(click here cause cursor go inside the input box)</label>
<input id="firstName" type="text">
</form>
I find that the pair of for and id attributes connect the label and input element in the way that the cursor goes inside the input box automatically by clicking on label.
Which other pair of HTML elements can be connected to each other by the for and id attributes set? If it works for many other HTML elements, is there any list or source of the default action occurred by connecting one of them in each pair element?
According to w3school, we can use for with <label> and <output> element. Here is the link.
Adding a for is important, even if they are adjacent. I seem to recall hearing that some screen readers for the visually impaired have problems otherwise. So if you want to be friendly to those who are perhaps using alternate browsers/screen readers, use this method.
im working on updating a site for compliance. the site is mostly AngularJS which im still new to but learning. i found a situation where there is a label targeting a div tag however the label has no :for attribute, instead has an :id and the div has a :label-id targeting the :id of the label tag...when i tried to adjust it, it broke on the front-end so im not sure what im seeing...im curious if this will pass WCAG AA?
i have tried a screen reader, NVDA, no issues...however a crawler i used flagged the label element for not having a :for attribute...i have tried searching for the :label-id attribute with no luck which im guessing means its custom...im guessing a lot of the issue is related to my lack of understanding angularJS...
<div class="groupA">
<label id="elementA">Element A is for Apple</label>
<div class"customSelectA" label-id="elementA">...stuff shows up here after clicking the label and there are also a bunch of angular attributes on this div that are not relevant to my question</div>
</div>
I'd recommend going to the basics and ignoring angular for the moment.
Look at the spec for the <label> element. It has a for attribute that can point to a form element. The ID must point to a "labelable element" (<input>, <button>, <select>, etc).
So the following is valid:
<label for="myID">Element A is for Apple</label>
<input id="myID" type="checkbox">
but the following is not:
<label for="myID">Element A is for Apple</label>
<div id="myID"></div>
In fact, if you run the above example through an html validator, https://validator.w3.org/nu, it will flag it in error:
Error: The value of the for attribute of the label element must be the ID of a non-hidden form control.
Regarding the label-id attribute, it does not exist. It's not part of the html language. It appears to be a custom attribute but custom attributes should start with "data-".
You can have a <label> without a for attribute such as:
<label id="newID">Element A is for Apple</label>
<input type="checkbox" aria-labelledby="newID">
In this case, the <input> points back to the <label> instead of the <label> pointing to the <input>, but that's a poor use of the <label> element. You won't gain the benefit of the <label>. The first example lets you click on the text of the <label> and the checkbox will be selected. In the last example, while the checkbox will be labeled by the text, you can't click on the text to select the checkbox.
I just noticed an interesting way of placing input elements outside of form tag today.
<html>
<!-- the form element -->
<form id="testform" method="post" action="index.asp">
<label for="text1">Text: </label>
<input type="text" id="text1" name="text1" />
<button type="submit">Submit</button>
</form>
<!--- element outside form tag -->
<label for="text2">Additional Text: </label>
<input type="text" id="text2" name="text2" form="testform" />
</html>
I am just wondering if it is common to practice to do this. Should this method be avoided?
Tried googling for similar discussions but i really don't know how to phrase this.
It is not common practice. In most cases, it offers no benefits but has a drawback: some old browsers do not support the form attribute, so things just don’t work on them.
An input element outside a form element has always been permitted. Such an element just won’t participate in any form submission, if it has no form attribute. But it can be used with client-side scripting.
The form attribute associates, in supporting browsers, the element with a form just as if the element were inside the form. This can be useful in complicated cases where e.g. one row of a table should contain fields of a form, another row fields of another form, etc. You cannot wrap just one row inside a form, and here the attribute comes to rescue: you put a form element inside one cell of the row and refer to that element in fields in other cells with the form attribute.
Yes, you can definitely do this as of HTML5, using the form attribute on inputs that are located outside the form element; just like you did.
For more details and examples, see HTML <input> form Attribute at W3 Schools.
There is nothing wrong with putting them there, and they will be available within the DOM if you are doing something with javascript, etc. but when you submit the form, the values of your fields will not be in the results submitted.
yes you can put input element outside the form but how would you decide how and where you 're going to post values of these elements.
I notice this trend in a lot of frameworks, auto-generated code (Zend) and layout templates. The approach I'm talking about is such:
<label for="someField">
<input id="someField" name="someName" />
</label>
What are the pros and cons of this approach vs. the regular one, and why do people tend to take this approach at all?
It seems to be fine judging by W3C standards in both HTML4.01 and HTML5:
HTML4:
"To associate a label with another control implicitly, the control
element must be within the contents of the LABEL element. In this
case, the LABEL may only contain one control element. The label itself
may be positioned before or after the associated control."
In this example, we implicitly associate a labels with a text input control:
<form action="..." method="post">
<p>
<label>
First Name
<input type="text" name="firstname">
</label>
</p>
</form>
It is still fine as of HTML5:
"The label element represents a caption in a user interface. The
caption can be associated with a specific form control, known as the
label element's labeled control, either using the for attribute, or by
putting the form control inside the label element itself. - W3C.
I've seen lots of ways to label things in a form such as <label>, <div>, <span>, etc. Is there a right or wrong answer for this? Are there any advantages/disadvantages to any of these?
Thank You
Label is best for accessibility (tab order, screen readers, etc)
See more at:
http://www.communitymx.com/content/article.cfm?cid=02310
I tend to prefer this:
<label for="myInput">My Label</label>
<input type="textbox" name="MyInput" value="" />
Take a look at what Phil Haack thinks...
The proper way to provide a label to a form element is to use <label>:
Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
The <label> element is used to specify labels for controls that do not have implicit labels
Since it is a semantic element providing meaning to your markup user agents can make sense of it and tend to helpfully direct clicks on the label to the element itself (very helpful for tiny controls like checkboxes). Also you're providing helpful assistance to people using screen readers or other accessibility features.
You shouldn't use <div> or <span> to actually label an element. For auxiliary help text, however, they might prove useful. But imho you should stick to the semantic capabilities of HTML where possible and sensible. This is such as case in my eyes.
The best way is this one :
<label for="anInput">This is the input</label>
<input type="text" name="anInput" />
This is especially interesting for checkboxes. If you click the label it will check/uncheck the checkbox. If you click on the label of an input field it selects it.
The tag defines a label for an
input element.
The label element does not render as
anything special for the user.
However, it provides a usability
improvement for mouse users, because
if the user clicks on the text within
the label element, it toggles the
control.
The for attribute of the tag
should be equal to the id attribute of
the related element to bind them
together.
via