Radios & Checks

Here's an example of including checkboxes and radio buttons within a <form> element, ensuring each input has unique identifiers (id attributes) and appropriate labels:

 <form>
  <div class="mb-3">
    <label for="checkbox1" class="form-check-label">Default checkbox</label>
    <input type="checkbox" id="checkbox1" class="form-check-input" />
  </div>

  <div class="mb-3">
    <label for="checkbox2" class="form-check-label">Default checkbox (checked)</label>
    <input type="checkbox" id="checkbox2" class="form-check-input" checked />
  </div>

  <div class="mb-3">
    <label for="checkbox3" class="form-check-label">Default checkbox (disabled)</label>
    <input type="checkbox" id="checkbox3" class="form-check-input" disabled />
  </div>

  <div class="mb-3">
    <label for="radio1" class="form-check-label">Default radio button 1</label>
    <input type="radio" id="radio1" name="radioGroup" class="form-check-input" />
  </div>

  <div class="mb-3">
    <label for="radio2" class="form-check-label">Default radio button 2 (checked)</label>
    <input type="radio" id="radio2" name="radioGroup" class="form-check-input" checked />
  </div>

  <div class="mb-3">
    <label for="radio3" class="form-check-label">Default radio button 3 (checked and disabled)</label>
    <input type="radio" id="radio3" name="radioGroup" class="form-check-input" checked disabled />
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>


<label for="flexCheckDefault"> Default checkbox </label>
<input type="radio" value="" id="flexCheckDefault" />
<input type="radio" value="" id="flexCheckDefault" checked />
<input type="radio" value="" id="flexCheckDefault" checked disabled />

Explanation:

  1. Label and Checkbox Pairing:

    • Each <label> is associated with its corresponding <input type="checkbox"> using the for attribute and matching id attribute values. This ensures that clicking on the label toggles the checkbox state.

  2. Checkbox Attributes:

    • id="flexCheckDefault1", id="flexCheckDefault2", id="flexCheckDefault3", id="flexCheckDefault4": Each checkbox has a unique id attribute, which is referenced by the for attribute in the corresponding <label> tags.

    • checked: Indicates that the checkbox should be initially checked (applicable to the second and fourth checkboxes).

    • disabled: Disables the checkbox (applicable to the third and fourth checkboxes), making it unclickable and visually distinct.

  3. Labels:

    • Labels (<label>) provide a clickable area for users to interact with checkboxes. They also improve accessibility by associating text descriptions with form controls.

  4. Readability and Clarity:

    • Each checkbox and label pair is clearly defined and separated, enhancing code readability and maintaining clear association between labels and checkboxes.

    • Label and Radio Button Pairing:

      • Each <label> is associated with its corresponding <input type="radio"> using the for attribute and matching id attribute values. This ensures that clicking on the label selects the radio button.

    • Radio Button Attributes:

      • id="flexRadioDefault1", id="flexRadioDefault2", id="flexRadioDefault3": Each radio button has a unique id attribute, which is referenced by the for attribute in the corresponding <label> tags.

      • name="flexRadioDefault": Radio buttons that share the same name attribute are grouped together, meaning they are mutually exclusive within the same group. This ensures only one radio button can be selected at a time.

    • Radio Button States:

      • checked: Indicates that the radio button should be initially selected (applicable to the second and third radio buttons).

      • disabled: Disables the radio button (applicable to the third radio button), making it unclickable and visually distinct.

    • Labels:

      • Labels (<label>) provide a clickable area for users to interact with radio buttons. They also improve accessibility by associating text descriptions with form controls.

    • Readability and Clarity:

      • Each radio button and label pair is clearly defined and separated, enhancing code readability and maintaining clear association between labels and radio buttons.

PreviousSelectNextRange

Last updated