<Label>标签

The HTML <label> element represents a caption for an item in a user interface.
From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

<Label> is used as a caption for an item. For example, if there is a form and we want to tell our user, this input is for username, this input is for password. Maybe we need to add caption Username and Password in front of form elements, and like this:

image.png

Then we need to use <label> element to implement this. Here is my code:

   <form action="">
        <label>
            Username:
            <input type="text" name="username" placeholder="please input you name">
        </label>        
        <label>
            Password:
            <input type="text" name="password" placeholder="please input you password">
        </label>
    </form>

if we don't want to place <input> inside <label>, we can use for attribute to associate them, just like this:

    <form action="">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" placeholder="please input you name">
        <label for="password">Password:</label>
        <input type="text" name="password" id="password" placeholder="please input you password">
    </form>

attention: the value of for attribute is the related form element's id.