<commit_before>---
layout: documentation
title: Forms
description: Form building nightmare made easy.
tags: grid
site_root: ../../
---

<section id="#basic-principles">
    <h1 class="fw-300">Basic principles</h1>
    <p>
        Forms are a tough thing to implement, especially if you want to include them in a fluid layout, so we made everything work as painlessly as possible while giving you multiple layout choices as you build your forms.
    </p>
    <p>Please note that forms, like other components in Ink, use the <a href="{{ site.url }}ui-elements/grid/">grid</a> css classes to create form layouts. So if you haven't looked at the <a href="{{ site.url }}ui-elements/grid/">grid</a> documentation yet, we suggest that you give <a href="{{ site.url }}ui-elements/grid/">it</a> a read.</p>

    <table class="props css">
        <caption>CSS CLASSES</caption>
        <thead>
            <tr>
                <th>Class name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>ink-form</code></td>
                <td>The form root class. <span class="label mandatory"></span></td>
            </tr>
            <tr>
                <td><code>control-group</code></td>
                <td>Defines the container for a label / form control pair. Used with a <code>&ltdiv&gt</code> element. <span class="label mandatory"></span></td>
            </tr>
            <tr>
                <td><code>control</code></td>
                <td><commit_msg>Fixes basic principles forms section id.<commit_after>---
layout: documentation
title: Forms
description: Form building nightmare made easy.
tags: grid
site_root: ../../
---

<section id="basic-principles">
    <h1 class="fw-300">Basic principles</h1>
    <p>
        Forms are a tough thing to implement, especially if you want to include them in a fluid layout, so we made everything work as painlessly as possible while giving you multiple layout choices as you build your forms.
    </p>
    <p>Please note that forms, like other components in Ink, use the <a href="{{ site.url }}ui-elements/grid/">grid</a> css classes to create form layouts. So if you haven't looked at the <a href="{{ site.url }}ui-elements/grid/">grid</a> documentation yet, we suggest that you give <a href="{{ site.url }}ui-elements/grid/">it</a> a read.</p>

    <table class="props css">
        <caption>CSS CLASSES</caption>
        <thead>
            <tr>
                <th>Class name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>ink-form</code></td>
                <td>The form root class. <span class="label mandatory"></span></td>
            </tr>
            <tr>
                <td><code>control-group</code></td>
                <td>Defines the container for a label / form control pair. Used with a <code>&ltdiv&gt</code> element. <span class="label mandatory"></span></td>
            </tr>
            <tr>
                <td><code>control</code></td>
                <td>
{'fraction_non_alphanumeric': 0.14147286821705427, 'fraction_numerical': 0.003229974160206718, 'mean_word_length': 2.163432073544433, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 109, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2241116', 'n_tokens_mistral': 898, 'n_tokens_neox': 849, 'n_words': 304}