How can I make a form label activate (focus) the form field it coincides with?
use the for attribute on the label. It references the id attribute of the form input/field you want it to focus.
eg. <input type="text" id="txt1" /><label for="txt1">Text 1</label>
Related
I have a form with mainly all simple textboxes and I am using the required attribute for the fields that are required. However, I have a textarea that only needs to be required if the previous radio button is selected as "Yes", otherwise I don't want the textarea to be required. Here is the code for those 2 fields:
<input id="ElecWiFi" name="ElecWiFi" required type="radio"
value="Yes" />
<textarea id="WiFiNeeds" cols="50" name="WiFiNeeds" rows="3"
placeholder="Electricity or Wi-Fi Needs"></textarea>
How would I make the textarea required only if Yes was selected in ElecWiFi field? Thanks in advance for any help.
dr1054
add javascript to the click attribute
like so
<input id="ElecWiFi" name="ElecWiFi" required type="radio"
value="Yes" onclick="document.getElementById('WiFiNeeds').setAttribute('required', 'required')" />
I have the following form, where users can choose to enter either the ID or the name:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName"></label>
When I click on "Member ID or Last Name, this switches the radio buttons. However when I click on the text inputs, this has no effect on the radio buttons.
Is this the expected behavior? If so, is there any way to tweak the html to make it work?
Note: this is not a JavaScript question.
Fiddle: https://jsfiddle.net/3by5wqzw/
Yes, this seems to be the expected behaviour on chrome, microsoft edge and firefox on windows 10 and on chrome for android lollipop.
You can use a bit of javascript to solve the problem:
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="document.getElementById('ID').checked = true;"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="document.getElementById('Name').checked = true;"></label>
When you click on a text input, the client will automatically check the matching radio button looking it up by its id.
As an alternative, you could put the Javascript code in a function, so it looks better and is easier to edit if you have lots of radio buttons with text input associated with it:
function check_radio(element_id){
document.getElementById(element_id).checked = true;
}
<label for="ID"><input type="radio" name="Member" id="ID"> Member ID <input id="MemberID" onclick="check_radio('ID');"></label><br/>
<label for="Name"><input type="radio" name="Member" id="Name"> Last Name <input id="LastName" onclick="check_radio('Name');"></label>
In regular html, radio input types are not related to anything other than the label associated with it. Therefore any other input text fields before or after need to be hooked up via some sort of javascript.
I think I found the answer.
The w3 recommendation states:
In an HTML document, an element must receive focus from the user in order to become active and perform its tasks
The issue is that when the user clicks on the text input, the radio button loses focus and is not activated.
Source (html4): http://www.w3.org/TR/html4/interact/forms.html#focus
we are useing IBM rational policy test to scan our codes and it is giving us a defect on the username and password, asking for a label with for attribute, is there a way to add a label with for and the label wont show on the screen? if i use empty label, the software still giving me a defect again but the different message
Sign In
<input class="user-name" placeholder="Username" type="text" id="username" name="username"></input>
<input class="password" placeholder="Password" type="password" id="password" name="password"></input>
<input type="checkbox" id="chkRememberMe" name="chkRememberMe"></input>
and this is the message which i get from the software:
Each form control should have associated text
Associate text with each FORM control that is not of type "hidden". INPUT controls of type "submit", "reset", and "button" require text to be set in the "value" attribute. INPUT controls of type "image" require text to be set in the "alt" attribute. All other FORM controls are associated with text via the LABEL element. A LABEL is attached to a specific form control through the use of the "for" attribute. The value of the "for" attribute must be the same as the value of the "id" attribute of the form control.
Simply adding them and hiding them via CSS should do what you need --
<label for="username">Username</label>
<label for="password">Password</label>
and in CSS:
label {display:none;}
Do note though, that it is generally better to have labels associated with your items that are visible - it makes it much easier for accessibility as well.
I want to make textarea non-editable and non-clickable using html.
I have given the "readonly=true" for the tags; however, it is still clickable but non-editable. The readonly textarea are getting selected in Safari browser. Please help. I do not want the text area and text box to get selected.
Thanks
Using readonly attribute on element means that the element is not editable, however the value of field gets submitted when the form is submitted.
While disabled element is not editable as readonly but its value doesn't get submitted on form submission.
so, if you want to submit the value of the field, use:
<input type="text" name="textbox1" readonly />
else
<input type="text" name="textbox1" disabled="disabled" />
Try disabled="disabled". This will disable textbox / textarea, so it won't be selected. Also, the value won't be submitted on form submission.
For textbox :
<input type="text" name="textbox1" disabled="disabled" />
For textarea :
<textarea name="textarea1" disabled="disabled" /></textarea>
In HTML5, only disabled attribute will also work. The value is not compulsory. However, for XHTML Strict you will need key & value pair.
<textarea disabled="disabled"></textarea>
Try this i hope it works,
<input type="text" name="country" value="anytext" readonly>
Why don't you try with
disabled="disabled"
I have seen this in jQuery - what does it do?
<label for="name"> text </label>
<input type="text" name="name" value=""/>
The for attribute is used in labels. It refers to the id of the element this label is associated with.
For example:
<label for="username">Username</label>
<input type="text" id="username" name="username" />
Now when the user clicks with the mouse on the username text the browser will automatically put the focus in the corresponding input field. This also works with other input elements such as <textbox> and <select>.
Quote from the specification:
This attribute explicitly associates the label being defined with
another control. When present, the value of this attribute must be the
same as the value of the id attribute of some other control in the
same document. When absent, the label being defined is associated with
the element's contents.
As far as why your question is tagged with jQuery and where did you see it being used in jQuery I cannot answer because you didn't provide much information.
Maybe it was used in a jQuery selector to find the corresponding input element given a label instance:
var label = $('label');
label.each(function() {
// get the corresponding input element of the label:
var input = $('#' + $(this).attr('for'));
});
To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id:
<label for="username">Click me</label>
<input type="text" id="username">
The for attribute associates a <label> with an <input> element; which offers some major advantages:
1. The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
2. You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
<label>Click me <input type="text"></label>
Notes:
One input can be associated with multiple labels.
When a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control.
Accessibility concerns
Don't place interactive elements such as anchors or buttons inside a label. Doing so, makes it difficult for people to activate the form input associated with the label.
Headings
Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.
If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.
Buttons
An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.
Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I feel the need to answer this. I had the same confusion.
<p>Click on one of the text labels to toggle the related control:</p>
<form action="/action_page.php">
<label for="female">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
I changed the for attribute on the 'male' label to female. Now, if you click 'male' the 'female' radio will get checked.
Simple as that.
a fast example:
<label for="name">Name:</label>
<input id="name" type="text" />
the for="" tag let focus the input when you click the label as well.
You use it with labels to say that two objects belong together.
<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>
This also means that clicking on that label will change the value of the checkbox.
FYI - if you are in an typescript environment with e.g.
<label for={this.props.inputId}>{this.props.label}</label>
you need to use htmlFor
<label htmlFor={this.props.inputId}>{this.props.label}</label>
it is used for <label> element
it is used with input type checkbox or redio to select on label click
working demo
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
It associates the label with an input element. HTML tags are meant to convey special meaning to users of various categories. Here is what label is meant for:
For people with motor disabilities (also for general mouse users): Correctly used label tags can be clicked to access the associated form control. Eg. Instead of particularly clicking the checkbox, user can click on more easily clickable label and toggle the checkbox.
For visually-challenged users: Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.
More about labelling -> https://www.w3.org/TR/WCAG20-TECHS/H44.html
it is used in <label> text for html
eg.
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
It's the attribute for <label> tag : http://www.w3schools.com/tags/tag_label.asp