<commit_before>{{addCdnCSS "gallery-2013.01.09-23-24" "gallerycss-cssform"}}
{{activeNav "forms"}}

<h1>Forms</h1>

<h2>Default Form</h2>
{{> forms/default}}

{{#code}}
    {{> forms/default}}
{{/code}}
<commit_msg>update forms docs<commit_after>{{addCdnCSS "gallery-2013.01.09-23-24" "gallerycss-cssform"}}
{{activeNav "forms"}}

{{> header}}


<div class="content">


    <h2>Default Form</h2>

    {{> forms/default}}

    {{#code}}
    {{> forms/default}}
    {{/code}}


    <h2>Multi-Column Form (with YUI Grids)</h2>
    <p>Multi-column forms such as the one below can be created by pulling down YUI Grids.</p>

    {{> forms/multi}}

    {{#code}}
    {{> forms/multi}}
    {{/code}}

    <h2>Inline Form</h2>

    {{> forms/inline}}

    {{#code}}
    {{> forms/inline}}
    {{/code}}


    <h2>Horizontal Form</h2>

    <p>Horizontal forms are great for standard forms that look well-aligned. The labels are right-aligned against the form input controls.</p>

    {{> forms/horizontal}}

    {{#code}}
    {{> forms/horizontal}}
    {{/code}}



    <h2>Grouped Inputs</h2>

    <p>Grouped inputs are great for grouping small sets of text-based input elements. They work well for sign-up forms, and look natural on mobile devices.</p>

    {{> forms/grouped}}

    {{#code}}
    {{> forms/grouped}}
    {{/code}}


    <h2>Input Sizing</h2>

    <p>You can size any input element by adding the classnames below. Since these styles just set <code>width</code>, they can be  applied to more than just form controls.</p>


    {{> forms/input-size}}

    {{#code}}
    {{> forms/input-size}}
    {{/code}}


    <h2>Invalid Inputs</h2>
    <p>Add the <code>required</code> attribute to any form control.</p>


    {{> forms/invalid}}

    {{#code}}
    {{> forms/invalid}}
    {{/code}}


    <h2>Disabled Inputs</h2>
    <p>Add the <code>disabled</code> attribute to any form control.</p>

    {{> forms/disabled}}

    {{#code}}
    {{> forms/disabled}}
    {{/code}}

    <h2>Rounded Inputs</h2>
    <p>Add the <code>yui3-input-rounded</code> classname to any form control.</p>

    {{> forms/rounded}}

    {{#code}}
    {{> forms/rounded}}
    {{/code}}

    <h2>Checkboxes and Radios</h2>
    <p>YUI Forms normalizes and aligns checkboxes and radio inputs for you too. Just add the <code>.yui3-checkbox</code> or <code>.yui3-radio</code> classname to these controls.</p>


    {{> forms/checkbox-radio}}

    {{#code}}
    {{> forms/checkbox-radio}}
    {{/code}}

</div>










{'fraction_non_alphanumeric': 0.18564554931836408, 'fraction_numerical': 0.02044907778668805, 'mean_word_length': 2.9045383411580596, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 80, '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': '4296544', 'n_tokens_mistral': 925, 'n_tokens_neox': 854, 'n_words': 218}