Формы

Простой CSS для форм.

Стандартная инлайн-форма

Для создания стандартной инлайн-формы добавьте к тегу <form> класс pure-form.

Стандартная инлайн-форма
<form class="pure-form">
    <fieldset>
        <legend>Стандартная инлайн-форма</legend>

        <input type="email" placeholder="Email">
        <input type="password" placeholder="Пароль">

        <label for="remember">
            <input id="remember" type="checkbox"> Запомнить
        </label>

        <button type="submit" class="pure-button pure-button-primary">Войти</button>
    </fieldset>
</form>

Вертикальная форма

Вертикальная форма - это форма, элементы которой располагаются под соответствующими метками. Для её создания присвойте тегу <form> два класса: pure-form и pure-form-stacked.

Вертикальная форма Это обязательное поле.
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Вертикальная форма</legend>

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">
        <span class="pure-form-message">Это обязательное поле.</span>

        <label for="password">Пароль</label>
        <input id="password" type="password" placeholder="Пароль">

        <label for="state">State</label>
        <select id="state">
            <option>Москва</option>
            <option>Новосибирск</option>
            <option>Кыштовка</option>
        </select>

        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Запомнить
        </label>

        <button type="submit" class="pure-button pure-button-primary">Войти</button>
    </fieldset>
</form>

Горизонтальная форма

Для создания горизонтальной формы присвойте тегу <form> классы pure-form и pure-form-aligned. В горизонтальной форме метки выравниваются по правому краю относительно полей ввода формы, но на самых малых экранах горизонтальная форма превращается в вертикальную.

Это обязательное поле.
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Логин</label>
            <input id="name" type="text" placeholder="Логин">
            <span class="pure-form-message-inline">Это обязательное поле.</span>
        </div>

        <div class="pure-control-group">
            <label for="password">Пароль</label>
            <input id="password" type="password" placeholder="Пароль">
        </div>

        <div class="pure-control-group">
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email">
        </div>

        <div class="pure-control-group">
            <label for="foo">СуперПупердлинная метка</label>
            <input id="foo" type="text" placeholder="Напишите что-нибудь...">
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> Я согласен с Условиями
            </label>

            <button type="submit" class="pure-button pure-button-primary">Отправить</button>
        </div>
    </fieldset>
</form>

Многоколоночная форма

Для создания такой формы, поместите её элементы внутрь ячеек Сетки Pure. Для создания адаптивных многоколоночных форм (как на примере ниже) потребуется адаптивная сетка Pure.

Многоколоночная форма
<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>Многоколоночная форма</legend>

        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-3">
                <label for="first-name">Имя</label>
                <input id="first-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="last-name">Фамилия</label>
                <input id="last-name" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="email">E-Mail</label>
                <input id="email" class="pure-u-23-24" type="email" required>
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="city">Область</label>
                <input id="city" class="pure-u-23-24" type="text">
            </div>

            <div class="pure-u-1 pure-u-md-1-3">
                <label for="state">Город</label>
                <select id="state" class="pure-input-3-4">
                    <option>Москва</option>
                    <option>Новосибирск</option>
                    <option>Кыштовка</option>
                </select>
            </div>
        </div>

        <label for="terms" class="pure-checkbox">
            <input id="terms" type="checkbox"> Я согласен с условиями
        </label>

        <button type="submit" class="pure-button pure-button-primary">Отправить</button>
    </fieldset>
</form>

Группы полей

Чтобы сгруппировать текстовые поля ввода, оберните их в тег <fieldset> с классом pure-group. Сгруппированные поля хороши для форм входа / регистрации и выглядят естественными на мобильных устройствах.

<form class="pure-form">
    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Логин">
        <input type="text" class="pure-input-1-2" placeholder="Пароль">
        <input type="email" class="pure-input-1-2" placeholder="Email">
    </fieldset>

    <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" placeholder="Поле Input">
        <textarea class="pure-input-1-2" placeholder="Textarea тоже группируются"></textarea>
    </fieldset>

    <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Регистрация</button>
</form>

Размеры полей формы

Полям ввода можно задавать размеры, подобно ячейкам в Сетках Pure. Присваивайте класс pure-input-* нужным полям ввода.






<form class="pure-form">
    <input class="pure-input-1" type="text" placeholder=".pure-input-1"><br>
    <input class="pure-input-2-3" type="text" placeholder=".pure-input-2-3"><br>
    <input class="pure-input-1-2" type="text" placeholder=".pure-input-1-2"><br>
    <input class="pure-input-1-3" type="text" placeholder=".pure-input-1-3"><br>
    <input class="pure-input-1-4" type="text" placeholder=".pure-input-1-4"><br>
 </form>

Можно дополнительно управлять размерами полей ввода, оборачивая их в ячейки сетки Pure. В примере ниже, поля <input> имеют классы pure-input-1, и дополнительно обернуты в теги <div> с разными «сеточными» классами pure-u-*.

<form class="pure-form pure-g">
    <div class="pure-u-1-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
    </div>
    <div class="pure-u-3-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-3-4">
    </div>

    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>
    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>

    <div class="pure-u-1-8">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
    </div>
    <div class="pure-u-1-8">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-8">
    </div>
    <div class="pure-u-1-4">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-4">
    </div>
    <div class="pure-u-1-2">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-2">
    </div>

    <div class="pure-u-1-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1-5">
    </div>
    <div class="pure-u-2-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
    </div>
    <div class="pure-u-2-5">
        <input class="pure-input-1" type="text" placeholder=".pure-u-2-5">
    </div>

    <div class="pure-u-1">
        <input class="pure-input-1" type="text" placeholder=".pure-u-1">
    </div>
</form>

Обязательные поля

Для маркировки поля как обязательного добавьте ему атрибут required.

<form class="pure-form">
    <input type="email" placeholder="Требует ввода email" required>
</form>

Заблокированные поля

Чтобы заблокировать элемент формы, добавьте атрибут disabled.

<form class="pure-form">
    <input type="text" placeholder="Заблокированный input..." disabled>
</form>

Поля «только для чтения» (read-only)

Чтобы придать полю состояние «read-only», добавьте атрибут readonly. Отличие между disabled и readonly в том, что поля «read-only» могут получать фокус. Это позволяет посетителям взаимодействовать с полем, выделяя текст, в то время как disabled-поля (Заблокированные поля) не интерактивны.

<form class="pure-form">
    <input type="text" value="Поле read-only..." readonly>
</form>

Поля со скруглёнными углами

Для скругления углов поля добавьте класс pure-input-rounded.

<form class="pure-form">
    <input type="text" class="pure-input-rounded">
    <button type="submit" class="pure-button">Найти</button>
</form>

Чекбоксы и радио-кнопки

Для чекбоксов (флажков) и радио-кнопок используйте классы pure-checkbox и pure-radio соответственно.

<form class="pure-form">
    <label for="option-one" class="pure-checkbox">
        <input id="option-one" type="checkbox" value="">
        Я флажок. Поставьте мне галочку.
    </label>

    <label for="option-two" class="pure-radio">
        <input id="option-two" type="radio" name="optionsRadios" value="option1" checked>
        Я радиокнопка. Вы можете выбрать это..
    </label>

    <label for="option-three" class="pure-radio">
        <input id="option-three" type="radio" name="optionsRadios" value="option2">
        ..Или это!
    </label>
</form>
Перевод c оригинального сайта purecss.io
© 2017 Aharito