I wonder when I was using <label> tag. Where for attribute used for name. I can't understand. What is the exactly difference between for and name in html.
If you are using for attribute for label tag then it must be in form.
This will work with its associative id within the form.
Ex
<label for="name"> First Name </label>
<input type="text" id="name" name="firstname">
AND
name attribute can not be used in label. It can be used for those input for textarea or for those tag which are used to get or pass the value from the form.
A label must be associated with a form control.
You can use a for attribute to create this association. If you do, then the value of the for attribute must be the same as the value of the id attribute of the form control.
There is no name attribute for label elements. The name attribute for form controls has nothing to do with labels (and is used as part of the algorithm used to construct the data to be sent to the server when the form is submitted).
The for= attribute in the label is used to link the label to one specific input on the page.
Since name= is not unique for inputs (I can have multiple inputs with the same name), the for= element on the label links to an id= attribute on the input.
The name attribute is used to determine under what name to submit the input.
Related
I am attempting to fill in the persons name field on a page using puppeteer but cannot find the ID
<input placeholder="Enter Persons Name" type="text" data-marker="root/appPage/create/form/nameInput" class="sc-bdnxRM sc-dlMDgC sc-csTbgd jaediC hjOJya" value="Hello world">
How do I change "Hello World" without knowing the input's ID?
Thanks
You can test if another attribute of input is consistent in this site and try to use it (like a group of classes, the "data-marker" attribute, and others)
Otherwise, if you don't trust in these attributes, you can see around that input's parent elements, and use a selector like "#fatherElementId > input", for example.
In the first input tag, what is the purpose of the "placeholder" and "aria-label" attributes? Are they the same as the "name" and "value" in the second input tag
<input type="search" placeholder="Search" aria-label="Search">
<input type="search" name="Search" value="Search">
No , they work differently.
I suppose you are talking about inputs. Placeholders are the gray texts inside the fields, and they are only for display. You can actually access an element by its name and not the placeholder.
Aria-label allows us to specify a string to be used as the accessible label. This overrides any other native labeling mechanism, such as a label element — for example, if a button has both text content and an aria-label, only the aria-label value will be used.
While values are , well , values
The aria-label attribute is used to define a string that labels the current element.
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
No, they are not same
This is best illustrated with an example:
<label for="myInput">This is an external label</label>
<br>
<label>
This label is wrapped arround the input
<input type="text" id="myInput">
</label>
Is this correct in HTML5? I understand multiple labels can point at one input field, but a label can only point at one field. In the example it are two labels pointing at the same input, only one is wrapping around the input.
Is this correct in HTML5?
Yes.
I understand multiple labels can point at one input field, but a label
can only point at one field
Yes, again.
From the specs here: https://www.w3.org/TR/html5/forms.html#the-label-element
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.
When there is no for attribute and the label is nested with its labelable control, then the first such descendant becomes its labelable control. But, a label should not be nested with other labels.
The label.control property returns the form control that is associated with this element. Vice-versa, .labels is a readonly property on labelable controls which return a nodelist of all applicable labels on that control.
Example 1:
In the example below, the input.labels property returns a nodeList which contains both the labels.
var inp = document.getElementById('myInput');
console.log(inp.labels);
<label for="myInput">This is an external label</label>
<br>
<label>
This label is wrapped around
<input type="text" id="myInput">
</label>
Example 2:
In this example, I have purposefully associated one label to two inputs. See that only the first one encountered i.e. with the for attribute here gets associated, and the second one is ignored even though it has a nested control.
var myInput = document.getElementById('myInput'),
yourInput = document.getElementById('yourInput')
;
console.log(myInput.labels);
console.log(yourInput.labels);
<label for="myInput">
This is an external label
<input id="yourInput">
</label>
<br>
<input type="text" id="myInput">
I read about value attributes documentation here. It does not clearly mention why is it required for the input tag.
According to the documentation
"value attribute specifies the value of an element" what exactly does it mean by "value"?
Is it a just for humans to know what exactly a checkbox is for?
Or does the value has anything to do with the backend database?
Is the value attribute just for front end purpose only?
I know this question has been asked previously, but not all aspects of what a "value attribute" is were discussed. So I would like to raise the question again, and have another discussion about it.
Is it a just for humans to know what exactly a checkbox is for?Does value attribute is just for frontend purpose only?
The value property sets or returns the value of the value attribute of a checkbox/radiobutton.
For checkboxes and radiobuttons, the contents of the value property do not appear in
the user interface. The value property only has meaning when
submitting a form. If a checkbox/radiobuttons is in checked state when the form is
submitted, the name of the checkbox/radiobuttons is sent with along with the value
of the value property (if the checkbox/radiobuttons is not checked, no information
is sent).
For example, when you are using <input type="button" name="foo" value="Click"/>, this will assign name 'Click' to your button. Same goes for text field: <input name="subject" type="text" value="Default text" /> will show you a text field with 'Defaul text' in it.
Value is where the actual value of the field is stored. Try changing it with jQuery or even with firebug and you will see that the submitted value will be changed!
Given <input type="checkbox" name="foo" value="bar"> the submitted data for the checkbox will be foo=bar if the form it is inside is submitted and the checkbox is successful (the main additional criteria for which is that it is checked). The server side form handler can then use that information.
The value is not exposed to the user of the browser (unless they use a developer tool of some kind). That is the job of the <label> element.
If I have the following:
<label for="deletetxt">Delete This Text</label>
What is the 'for' attribute here? Is that the id?
Assuming that I cannot set a class for the label element to style the label element, how do i set css for this element?
The for attribute contains the ID of the element that the label is for. I always thought this would be quite intuitive...
<label for="SomeTextField" id="SomeLabel">Some text field</label>
<input type="text" id="SomeTextField">
You style a label like any other element:
label {
font-weight: bold;
color: red;
}
I always thought this would be quite intuitive, as well. So - what are you really trying to do, the questions you ask are a sign that you have a different problem, actually.
Two question, two answers:
What is the 'for' attribute here?
It's here to tell the ID of the <input> element that label refers to. Some browsers will use it to set focus on that <input> element when user clicks on that <LABEL>
how do i set css for this element?
A. If you want to CSS all label elements :
label {
/* your styles */
}
B. If you want to label that element, just use IDs or classnames as you usually do.
The for attribute is the input/textarea/select that the label refers to.
You can still assign an id to the label:
<label id="myLabel" for="deletetxt">Delete This Text</label>
You can also wrap the input/textarea/select with the label in order to associate them without the for attribute.
<label id="myLabel">Delete This Text <input ... /></label>
The For tells the label which element to belong to (which really means that when the label is clicked the element will get the focus).
As for your second question - you can use jQuery:
- If your html is static use $("label:eq(index)")
- If your html is dynamic and you know the id of the element the label belongs to, you can use $("label[for='thatid']")
HTML Label Tag is used for forms and submittion. it is not the ID, this 'for' should have the same name as the ID of the object connected to it - for example
<form>
<label for='ford'>Ford Car</label>
<input type="radio" name="fordCar" id="ford" />
</form>
Its a usability object really.
"for" is the id of the form element that the label should be associated with.
You can add an id to the label to reference it directly.
<label for="fname" id="lbl-fname">First:</label>
<input type="text" id="fname" />
you can set an id as well as a class http://www.w3schools.com/tags/tag_label.asp
the for "Specifies which form element a label is bound to" so when a user clicks on the label it focuses on the target input.
With razor in Html I don´t find the best way for assign the id of a label, but you can assign the id in this way:
#Html.Label("© Integrantes Grupo:",new { #id="TitleIntegrants"} )