Form: code & specs

This page documents the expected code output and structure necessary to display forms correctly in the UI.

Form base code

The base form component in Buckholt relies on a specific HTML structure and set of CSS classes to ensure proper layout and consistent styling.

The example below outlines the required elements to construct a basic form. The .form class is used as the main wrapper and contains optional header content, the .form-body section for input fields, and a .form-buttons section for actions.

  • .form: The main wrapper that contains all form content.
  • .text-block (optional): A section used to display a heading and/or description at the top of the form.
  • .form-body: Contains all input components.
  • .form-buttons: A section typically used for form actions such as submit or cancel buttons and links.

Heading text

Validation message
Validation message
Link
html 
<form class="form" id="formExample">
    <div class="text-block">
        <h3 class="headline-03">Heading text</h3>
    </div>

    <div class="form-body">
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput1" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput1">
            </div>
        </div>
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput2" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput2">
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="button" class="btn btn-primary btn-lg">
            <span class="button-label">Button label</span>    
         </button>
        <a class="link-standalone" href="#" target="_self"> 
            <span class="icon">
                <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
            </span>
            Link
        </a>
    </div>
</form>

Extra body sections

Sections can be added to forms by include more than one .form-body. Adding a .text-block at the top to the .form-body

Heading text

Optional text block

Duis non quam et nisi tincidunt fermentum.

Validation message
Validation message

Optional text block

Duis non quam et nisi tincidunt fermentum.

Validation message
Validation message
Link
html 
<form class="form" id="formExample">
    <div class="text-block">
        <h3 class="headline-03">Heading text</h3>
    </div>

    <div class="form-body">
        <div class="text-block">
            <h4 class="headline-01">Optional text block</h4>
            <p>Duis non quam et nisi tincidunt fermentum.</p>
        </div>
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput1" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput1">
            </div>
        </div>
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput2" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput2">
            </div>
        </div>
    </div>

    <div class="form-body">
        <div class="text-block">
            <h4 class="headline-01">Optional text block</h4>
            <p>Duis non quam et nisi tincidunt fermentum.</p>
        </div>
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput1" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput1">
            </div>
        </div>
        <div class="input">
            <div class="input-label">
                <label for="exampleTextInput2" class="form-label">Example text input</label>
            </div>
            <div class="response text-input">
                <input type="text" class="form-control" id="exampleTextInput2">
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="button" class="btn btn-primary btn-lg">
            <span class="button-label">Button label</span>    
         </button>
        <a class="link-standalone" href="#" target="_self"> 
            <span class="icon">
                <i class="fa-regular fa-arrow-right" aria-hidden="true"></i>
            </span>
            Link
        </a>
    </div>
</form>