Framework Averin.pro

CSS Framework дизайн студии Артемия Аверина

Формы

Настройка

Основные классы: .input .label .textarea .select .is-desc .fieldset .legend

Дочерние свойства: размеры is-col, is-*

База

<form method="post" action="" autocomplete="off">

    <div class="form-item">
        <label>Имя</label>
        <input class="input" type="text" name="name" class="is-50">
    </div>

    <div class="form-item">
        <label>Страна</label>
        <select class="select">
            <option value="">---</option>
        </select>
    </div>

    <div class="form-item">
        <label class="is-checkbox"><input type="checkbox"> Выбрать</label>
        <label class="is-checkbox"><input type="radio"> Выбрать</label>
    </div>

    <div class="form-item">
        <textarea class="textarea" rows="6"></textarea>
    </div>

    <div class="form-item is-buttons">
        <button class="button">Отправить</button>
        <button class="button gray">Отменить</button>
    </div>

</form> 
Краткое описание под полем.
<form>
    <div class="form-item">
        <label>Город</label>
        <input class="input" type="text">
        <div class="is-desc">...</div>
    </div>
</form> 
Краткое описание под полем.
<form>
    <div class="is-row">
        <div class="form-item is-col">
            <label>City <span class="is-req">*</span></label>
            <input class="input" type="text" required>
        </div>
        <div class="form-item is-col">
            <label>City <span class="is-desc">...</span></label>
            <input class="input" type="text">
            <div class="is-desc">...</div>
        </div>
    </div>
</form> 

Fieldset

Форма входа
<form method="post" action="">
    <fieldset class="fieldset">
        <legend class="legend">Форма входа</legend>
        <div class="form-item">
            <label>Имя</label>
            <input class="input" type="text" name="name" class="is-50">
        </div>
        <div class="form-item">
            <label>Телефон</label>
            <input class="input" type="phone" name="phone" class="is-50">
        </div>
    </fieldset>
</form> 
О себе
<form method="post" action="">
    <fieldset class="fieldset">
        <legend class="legend">О себе</legend>
        <div class="form-item">
            <textarea class="textarea" name="user-about" rows="5"></textarea>
        </div>
        <div class="form-item">
            <button class="botton">Отправить</button>
        </div>
    </fieldset>
</form> 

Ширина

<form method="post" action="">
    <div class="form-item">
        <input class="input" type="text" class="is-25" value="25%">
    </div>
    <div class="form-item">
        <input class="input" type="text" class="is-50" value="50%">
    </div>
    <div class="form-item">
        <input class="input" type="text" class="is-75" value="75%">
    </div>
    <div class="form-item">
        <input class="input" type="text" value="100% по стандарту">
    </div>
</form> 

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

<form method="post" action="">
    <div class="form-item">
        <label>E-Mail <span class="is-req">*</span></label>
        <input class="input" type="email" name="user-email" required>
    </div>
</form> 

Перед и после

рублей
<form method="post" action="">
    <div class="form-item">
        <label>Стоимость</label>
        <div class="is-prepend is-50">
            <span>рублей</span>
            <input class="input" type="text">
        </div>
    </div>
</form> 
рублей
<form method="post" action="">
    <div class="form-item">
        <label>Стоимость</label>
        <div class="is-append is-50">
            <input class="input" type="text">
            <span>рублей</span>
        </div>
    </div>
</form> 

Кнопка после

<form method="post" action="">
    <div class="form-item">
        <label>Поле</label>
        <div class="is-append is-50">
            <input class="input" type="text" name="search" placeholder="Search">
            <button class="button">Отправить</button>
        </div>
    </div>
</form> 
Год
Месяц
Число
<form method="post" action="">
    <label>Много полей</label>
    <div class="is-row">
        <div class="form-item is-col">
            <select class="select"><option>---</option></select>
            <div class="is-desc">Год</div>
        </div>
        <div class="form-item is-col">
            <select class="select"><option>---</option></select>
            <div class="is-desc">Месяц</div>
        </div>
        <div class="form-item is-col">
            <select class="select"><option>---</option></select>
            <div class="is-desc">Число</div>
        </div>
    </div>
</form> 
Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

4.6 - 18 сентября 2019 года

Старт

Типографика
Сетка
Формы
Таблицы
Кнопки
Метки
Пагинация
Крошки
Мобильное меню
Окна
Аниматор
Подсказки
Наверх
Уведомления
Помощники
Плагины
Виджеты

Шаблоны

Редактор WYSIWYG

Новости обновлений

Скачать

Версия 4.6 - 18 сентября 2019 года