The relationship between the label for attribute and the corresponding ID

Source: Internet
Author: User

Dreamweaver8 label for property and corresponding ID

The function of the <label> label is to enable the browser to render the text associated with the form object with the focus rectangle, allowing the user to select the form by clicking anywhere in the associated text, not just on the form object.

Inserting a FORM element in DW8 pops up the input Tag Accessibility Properties dialog box, and when you attach a label tag with the for attribute, a label mark "<label>...</label>" is added to both sides of the inserted form item (front or rear)

For example, you can also select a FORM element by clicking the text "username" directly in the following example.

Run Code Box
<form><label for= "Cn_bruce" > Username </label><input type= "text" name= "Cn_bruce" accesskey= "C" Id= "cn _bruce "/></form>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

The main is the label property for= "Cn_bruce" and the input property id= "Cn_bruce", this is the association.

However, when inserting using DW8, the name and ID properties of the default input are the same "TextField N (n=φ,1,2, ...)"

But obviously, after you insert the form object, you need to edit the name of the form item again, such as modifying "TextField" to "Cn_bruce"

, the name and ID of the form item are modified together to "Cn_bruce"

However, the default label's for property value is "TextField", and if you want to implement the label function, you must manually modify the for value

However, the same setting, when set on the Radio radio box, guarantees that the value of the for property for the label always matches the ID value of the corresponding table item

The main reason is that when the Name property value is modified for radio, its ID value is unchanged.

Why doesn't it change?

First of all, the function of radio is to select one of several, then how to distinguish a lot of radio is a group inside, from this group select one. So the HTML tag is the requirement that many of the radio buttons to be in a group, must require the same Name property value, such as the following three radio name value is "s", is a group.

Run Code Box
Male <input type= "Radio" name= "s" value= "n"/> Female <input type= "Radio" name= "s" value= "V"/> Demon <input type= "Radio" Name= "s" value= "Y"/>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

So as long as a name is different, it does not belong to a group

OK, always stating that radio requires a name value, and then cut to the topic

Because the other table items above automatically change the ID value when changing the value of the Name property

So, if radio is also changing the Name property value automatically change the ID value, because the radio name value of the same, so is bound to make the ID value the same

But can id attribute values be the same? ID is the page document in the page element object's ID number, is not recommended the same, so the radio ID value will remain unchanged

So, radio the corresponding label label's for attribute value.

Therefore, when creating a form item in Dreamweaver8, its <label> label's for property value cannot always correspond to the ID value of its table item, causing some trouble for later editors.

Therefore, you manipulate label and table items in DW8:

Otherwise, the <label> label's for property value changes as the table item ID value changes

Otherwise, keep the ID property value unchanged (such as radio) while modifying the table item Name property



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.