Forms

Baselayer form elements have simple background and focus styling.

Notes:

  1. In Baselayer, form elements do not have set width. You can control widths them by one of two ways (same as for buttons):
    • By adding the w-100% utility class to the form element, or
    • By involving the form elements as immediate children of flex layout or grid layout wrappers.
  2. Form inputs (exclusing buttons) and textareas have a 1px solid border colored by :root { --b-form: var(--tc-base); }, so that the border will be the same as the default text color (near black on light theme, bear white on dark theme). This border color makes forms stand out more obvious as an interactive element.
  3. Form inputs, textareas, buttons, and the btn class, have font-size: inherit. This means their font sizes can be modified by any font-size class in Baselayer.
  4. The font-family of form elements, buttons, and btn is controlled by var(--ff-base) (default is sans-serif).

Textual form input fields


Expects an email address — on touch screens, this will invoke a keypad for entering emails.


Expects a web address — on touch screens, this will invoke a keypad for entering URLs.

Number inputs

On touch screens, these inputs invoke the numeric keyboard instead of the text keyboard.

Date and time inputs

On some devices (e.g. iOS Safari), these inputs get modified by date pickers, etc. The shape of the input fields gets changed.

Color picker

Invokes the device’s color picker.

File upload

Note: File upload inputs <input type="file"> can break your page layout on the smallest phones in portrait orientation. But if you add class="w100%" that problem goes away.

Select and multi-select

On some devices (e.g. iOS Safari), these inputs get modified by number pickers (dropdowns).

List and datalist

Text area (multiline)


Radio boxes and checkboxes

Radio boxes:



Checkboxes:





Fieldsets and legends

Groups of form elements can be wrapped in <fieldset> tags. Add a <legend> to provide a special title for the entire fieldset.

Example e-newsletter subscribe 
<form action="">
  <fieldset class="flex">
    <legend>Example e-newsletter subscribe</legend>
    <input class="w100%" type="email" id="example-input-email" placeholder="Enter email">
    <input type="submit" name="submit" value="Subscribe">
  </fieldset>
</form>

Note: In the example above, the Baselayer flex class has been used to align these form elements side-by-side, and then grow has been used to expand the email input field. A <legend> is also included — but since its text incorporates with the <fieldset> wrapping border line, it will not be controlled by the flexbox rule.

Form buttons

<form action="">
  <p>
    <button type="button" name="button">Button</button>
    <input type="button" name="input" value="Input Button">
    <input type="submit" name="submit" value="Submit Button">
    <input type="reset" name="reset" value="Reset Button">
  </p>
</form>

See buttons for more information.