Home>

label and input tags are

<label>hello!
    <input type = "text">
</label>
<label for = "hello">hello!</label>
<input type = "text">


I learned from progate that there are two ways of writing

Error message Question 1
<label for = "hello">hello!
    <input type = "text">
</label>


Can you write it?

Question 2 What is the difference between using the for attribute and enclosing it in

label tags?
It would be helpful if you could tell me which is better, recommended, etc. m (_ _) m

Question 3

When I want to divide the form input into two by phone number etc., how is Shokuno in general?
I thought about it like this, and clicking on the label will focus on the first input tag, so I thought it would be fine, so far I used this

<label>
    hello!
    <input type = "text">
    <input type = "text">
</label>
Applicable source code
<label for = "hello">hello!
    <input type = "text">
</label>
Tried Supplemental information (FW/tool version etc.)

Please teach me

  • Answer # 1

    TL;DR;

    Combined association method ⇒ Yes

    Difference method ⇒ Almost the same

    Associating multiple form elements with one label ⇒ No

    Combined association method

    Yes.

    When two methods of association are used together, the elements that can be associated (labelable element) included in thelabel elementareIt must be an element withid attributeof the value specified in for attribute. Iflabelable elementwithoutid attributeof the value specified infor attributeis included inlabel elementIn that case, thelabelable elementis not thelabelable elementspecified by thefor attribute, so it violates the HTML5 grammar. I will.

    Difference between the two association methods

    None. Both areindicates the correspondence between the label and the element being labeled.

    However, each of the two methods has some advantages and disadvantages. Based on that, it ’s a good idea to choose which association method to use.

    How to associate usingfor attribute

    label elementassociated with the element to be labeled can be described at multiple locations in the HTML document.

    It is necessary to assignid attributethat must be unique in the HTML document, so it is necessary to consider whetherid attributeis already used .

    It is difficult to know where and how manylabel elementsare associated with the element to be labeled in the HTML document.

    Method of including the element to be associated inlabel element

    Easily understand whichlabel elementis associated with the element to be labeled in the document.

    There is no need to manage

    id attribute.

    Clickable range may be wider than usingfor attribute.

    Thelabel elementassociated with the element to be labeled cannot be described in multiple places.

    Assign multiplelabelable elementsto onelabel element

    Either way of association isnot possible.
    The following code in the question sentence violates the grammar becauselabelable elementthat is not associated with a label is inlabel element.

    <label>hello!
        <input type = "text">
        <input type = "text">
    </label>


    Therefore, it is necessary to associate one label with multiplelabelable elementsby a method other thanlabel element. One way is to use thearia-labelledby attribute. Ifaria-labelledby attributeis used, an element withid attributehaving the same value as the value specified in this attribute can be used as a label. However, thearia-labelledby attributeperforms the operation of "focusing on the associated form element when the label is clicked", as in association with thelabel element. Note that there is no.

    <label for = "hello" id = "label-hello">text</label>
    <input type = "text" id = "hello" aria-labelledby = "label-hello">
    <input type = "text" aria-labelledby = "label-hello">

  • Answer # 2

      

    Question 1

    There is no problem with enclosing input with a label with for
    Simply put, for takes precedence

    <label for = "hello">hello!
    <input type = "text">
    </label>
    <input type = "text" id = "hello">
      

    Question 2

    Since they are used differently, they will be used by themselves
    If adjacent text (or image) and input are linked, it is better to enclose
    Because id doesn't have to be wasted full
    The only option is to specify what is in a remote location

      

    Question 3

    The example process is fine, but the focus is only on the front.
    Ordinarily, only the front side should be enclosed with a label.