Формы

Настройка

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

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

База

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

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

    <div class="form-item">
        <label class="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> 

<div id="previewBlock" style="display: none;"><img src="/img/image.jpg" id="previewHolder" class="image" alt="Обложка" /><br/><br/></div>
<input type="file" name="userfile" id="userfile" style="display: none;" onchange="if(this.files[0].size > (1024 * 1024 * 3)) { alert('Размер файла не должен превышать 3 мб'); } else { document.getElementById('previewHolder').src = window.URL.createObjectURL(this.files[0]); document.getElementById('previewBlock').style.display = 'block'; }">
<label for="userfile" class="button">Выбрать файл</label>
 

<form>
    <div class="form-item">
        <label class="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 class="label">City <span class="is-req">*</span></label>
            <input class="input" type="text" required>
        </div>
        <div class="form-item is-col">
            <label class="label">City <span class="is-desc">...</span></label>
            <input class="input" type="text">
            <div class="is-desc">...</div>
        </div>
    </div>
</form> 

Разделитель полей

<form method="post" action="">
        <div class="form-item is-border">
            <label class="label">Имя</label>
            <input class="input" type="text" name="name" class="is-50">
        </div>
        <div class="form-item is-border">
            <label class="label">Телефон</label>
            <input class="input" type="phone" name="phone" class="is-50">
        </div>
</form> 

Fieldset

<form method="post" action="">
    <fieldset class="fieldset">
        <legend class="legend">Форма входа</legend>
        <div class="form-item">
            <label class="label">Имя</label>
            <input class="input" type="text" name="name" class="is-50">
        </div>
        <div class="form-item">
            <label class="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="button">Отправить</button>
        </div>
    </fieldset>
</form> 

Ширина

<form method="post" action="">
    <div class="form-item">
        <input class="input is-25" type="text" value="25%">
    </div>
    <div class="form-item">
        <input class="input is-50" type="text" value="50%">
    </div>
    <div class="form-item">
        <input class="input is-75" type="text" 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 class="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 class="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 class="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 class="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="">
    <div class="form-item">
        <div class="is-appendprepend is-100">
        	<span>Поле</span>
            <input class="input" type="text" name="search" placeholder="Search">
            <button class="button">Отправить</button>
        </div>
    </div>
</form> 

<form method="post" action="">
    <label class="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>