Overview #

The form controls in UX4G add classes to the Rebooted form designs. For a rendering that is more uniform across browsers and devices, use these classes to choose into their customized displays.

To take use of newer input controls like email verification, number selection, and more, make sure to utilize an appropriate type property on all inputs (e.g., email for email addresses or number for numerical information).

Here is a little illustration of how UX4G's form styles work. For information about necessary courses, form formatting, and other topics, continue reading.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"/>
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1"/>
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1"/>
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

RESULT

Form text #

Block-level or inline-level form text can be created using .form-text.

CAUTION

With .form-text, form text may be styled beneath inputs. For simple spacing from the inputs above, a top margin is added if a block-level element will be utilized.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock"/>
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

RESULT

With only the .form-text class, inline text can use any common inline HTML element (such as a <span>, <small>, or another type).

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline"/>
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

RESULT

Disabled forms #

To prevent user interactions and make an input appear lighter, use the disabled boolean attribute.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

To disable all the controls in a <fieldset>, add the disabled property. All native form controls (<input>, <select>, and <button> elements) included in a <fieldset disabled> are seen by browsers as disabled, making keyboard and mouse interactions with them impossible.

The custom button-like components in the form, such as a class="btn btn-*">.../a>, will only be assigned a style of pointer-events: none, which means they are still focusable and keyboard-operable. In this situation, developer will need to manually change these controls by adding the attributes tabindex="-1" to stop them from obtaining focus and aria-disabled="disabled"to let assistive technologies know they are disabled.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"/>
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled/>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

RESULT

Accessibility #

Make sure that every form control has an appropriate accessible name so that assistive technology users can understand what it does. Using a label element or, in the case of buttons, including adequate descriptive language as part of the content of the <button>...</button> is the simplest method to accomplish this.

There are several approaches of still giving an accessible name in circumstances where it is not possible to include a visible <label> or relevant text content, such as:

• <label> elements with the .visually-hidden class hidden
• Utilizing aria-labelledby to point to an existing element that can serve as a label
• The title attribute being provided
• Utilizing aria-label to explicitly set an element's accessible name

As a backup for the accessible name on <input> and <textarea> elements, assistive technologies may fall back to utilizing the placeholder property if none of these are available. This section's examples offer a few suggested, case-specific strategies.

While assistive technology users will benefit from using visually hidden content (.visually-hidden, aria-label, and even placeholder content, which vanishes once a form field has content), some users may still experience issues if label text is not made visible. The best method is typically some sort of clearly visible label, both for usability and accessibility.

Sass #

Numerous form variables are predefined at the general level so that they can be reused and expanded by other form components. These are most frequently represented by the variables $input-btn-* and $input-*.

Variables #

The buttons and form elements share global variables called $input-btn-*. These are routinely given new values as values for other component-specific variables.

                                            
$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;