Skip to content

Bug: Update objects/input.js so that inputs aren't wrapped in the label element #37

@jameskirkby

Description

@jameskirkby

Markup should look a bit like the markup on the Bootstrap forms page:

https://getbootstrap.com/docs/4.3/components/forms/

Example:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
</form>

htmlFor in the <label> should match the id of the <input>

For checkboxes and radio elements, it makes sense to put the <label> directly after the <input>, so that if the element is checked, we can use the input:checked + label CSS selector to change the style of the <label>

Also ditch the <b> tag around the label text

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions