<p>This is a demonstration of how the &lt;label> element is used.  Notice that for examples where the &lt;label> is used correctly, a user can click on the prompt text to put the focus on the input control (or, in the case of radio buttons and check boxes, clicking will check/select the input item).</p>

<!-- INCORRECT: no label at all: when a user tabs to this field, all they'll hear is "edit" and no other indication of what they're supposed to type into the field -->
<form>
  <div>Enter Name: 
    <input type="text" name="txtName" size="15">
  </div>

<!-- INCORRECT: missing for="", input needs a matching id=""; this has the same effect as above: screen-reader-user has no clue what to put into the field -->
  <div>
    <label>Enter Phone#:</label>
    <input type="text" name="txtPhone" size="10">
  </div>

<!-- CORRECT, BUT NOT 100% ACCESSIBLE: using for="" with matching input id=""
 TIP: you could also use aria-labelledby to make this more accessible, see WCAG ARIA16 https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA16 -->
  <div>
    <input type="checkbox" name="chkGotIt" id="chkGotIt">
    <label for="chkGotIt">I understand why we use label elements.</label>
  </div>

<!-- CORRECT, BUT NOT 100% ACCESSIBLE: nesting the input element inside the label element, could also use ARIA16 here but it wouldn't make sense, just use the for/id instead -->
  <div>
    <label>
      <input type="checkbox" name="chkGoodForms">
      My HTML Forms will be accessible to all users.
    </label>
  </div>

<!-- CORRECT AND ACCESSIBLE: nesting and using for="" and id="" - support for everyone -->
  <div>
    <label for="chkBest">
      <input type="checkbox" name="chkBest" id="chkBest">
      This is the best version.
    </label>
  </div>
</form>