🏷️HTML labels

giving each form field a label

Looking closer into the <form> at our fields and their labels:

<form action="destination.html" method="post">

    <label for="fname">First name</label>
    <input type="text" name="fname" id="fname">
    
    <label for="lname">Last name</label>
    <input type="text" name="lname" id="lname">
    
    <label for="gender">Gender</label>
    <select name="gender" id="gender">
        <option value="m">Male</option>
        <option value="f">Female</option>
        <option value="n">Other</option>
    </select>
    
    <input type="submit" value="Go!">
    
</form>

Above most form fields, we have a <label> tag that points to each of those fields, with the for attribute:

• The "First name" label matches the <input> field that has the name fname

• The "Last name" label matches the <input> field that has the name lname

• The "Gender" label matches the <select> field that has the name gender

Note that we click on a <label> tag, it becomes equivalent to clicking on the field itself!

Also note that the input field with the type of submit (i.e. a button) does not need a label as the text in the value attribute serves as the label!