Getting started Introduction Download Contents Browsers and devices Components Navbar Slider Alert Collapse Button Forms Modals Ajax Toasts ScrollTo Charts Add-ons Magazine - Slider Magazine - Display Article Magazine - Newsletter Magazine - Footer Magazine - Button Background Moving With A Mouse Effect Title

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

LaarmWork’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate LaarmWork’s form styles. Keep reading for documentation on required classes, form layout, and more.


<link href="https://laarmwork.arnaudjacques.fr/res/css/forms.css" rel="stylesheet">
<link href="https://laarmwork.arnaudjacques.fr/res/css/button.css" rel="stylesheet">
<script src="https://laarmwork.arnaudjacques.fr/res/js/laarmwork.js"></script>
We'll never share your email with anyone else. 

<form action="" method="POST" class="item p-2 shadow-hover-1 border-1 flex column">
    <div class="form-group flex column m-t-1">
        <label for="exampleInputEmail">Email address</label>
        <input type="email" class="form-text" id="exampleInputEmail" aria-describedby="emailHelp">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group flex column">
        <label for="exampleInputPassword">Password</label>
        <input type="email" class="form-text" id="exampleInputPassword">
    </div>
    <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck">
        <label class="form-check-label" for="exampleCheck">Check me out</label>
    </div>
    <button type="submit" class="btn primary mgl-auto">Submit</button>
</form>

Checkbox

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.


<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheckDefault">
    <label class="form-check-label" for="exampleCheckDefault">Default</label>
</div>
<div class="form-group form-check success">
    <input type="checkbox" class="form-check-input" id="exampleCheckSuccess">
    <label class="form-check-label" for="exampleCheckSuccess">Success</label>
</div>
<div class="form-group form-check danger">
    <input type="checkbox" class="form-check-input" id="exampleCheckDanger">
    <label class="form-check-label" for="exampleCheckDanger">Danger</label>
</div>
<div class="form-group form-check warning">
    <input type="checkbox" class="form-check-input" id="exampleCheckWarning">
    <label class="form-check-label" for="exampleCheckWarning">Warning</label>
</div>
<div class="form-group form-check primary">
    <input type="checkbox" class="form-check-input" id="exampleCheckPrimary">
    <label class="form-check-label" for="exampleCheckPrimary">Primary</label>
</div>
<div class="form-group form-check info">
    <input type="checkbox" class="form-check-input" id="exampleCheckInfo">
    <label class="form-check-label" for="exampleCheckInfo">Info</label>
</div>
<div class="form-group form-check secondary">
    <input type="checkbox" class="form-check-input" id="exampleCheckSecondary">
    <label class="form-check-label" for="exampleCheckSecondary">Secondary</label>
</div>
<div class="form-group form-check dark">
    <input type="checkbox" class="form-check-input" id="exampleCheckDark">
    <label class="form-check-label" for="exampleCheckDark">Dark</label>
</div>

Textarea

For textarea.


<div class="form-group flex column m-t-1 w-100">
    <label for="exampleTextarea">Email address</label>
    <textarea class="form-text" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-group flex column">
    <label for="exampleFormControlSelect">Example select</label>
    <select class="form-text" id="exampleFormControlSelect">
        <option selected disabled>Choose an option</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</div>
<div class="form-group flex column">
    <label for="exampleFormControlSelectMulti">Example multiple select</label>
    <select multiple class="form-text" id="exampleFormControlSelectMulti">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

For file inputs, swap the .form-text for .form-file.


<form>
    <div class="form-group form-file flex column preview-content">
        <label for="exampleUploadFile">Please upload a picture !</label>
        <div class="input text-center">
            <input name="input" id="exampleUploadFile" class="file" type="file">
        </div>
    </div>
</form>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        previewContent("Browse another pic", ".preview-content", "success")
    });
</script>

Sizing

Set heights using classes like .large and .small.


<input type="text" class="form-text large" placeholder=".large">
<input type="text" class="form-text" placeholder="Default input">
<input type="text" class="form-text small" placeholder=".small">
            

<select class="form-text large">
    <option>Large</option>
</select>
<select class="form-text">
    <option>Default select</option>
</select>
<select class="form-text small">
    <option>Small</option>
</select>

Icon in input text

Add a text or icon in input text.

@
@

<div class="flex flex-wrap item p-2 shadow-hover-1 border-1 m-b-1 space-evenly">
    <div class="input-group flex">
        <div class="input-group-prepend flex">
            <div class="input-group-text margin-auto">@</div>
        </div>
        <input type="text" class="form-text" placeholder="Username">
    </div>
    <div class="input-group flex">
        <div class="input-group-prepend flex">
            <div class="input-group-text margin-auto">@</div>
        </div>
        <input type="text" class="form-text" placeholder="Username">
    </div>
</div>

Server side

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes.

Looks good!
Bad.