Форма с валидатором / Формы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Формы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 520

Количество символов:

Посмотрели: 4795 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 3.2 / 5 - 8 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, формы, Form, сниппет, Bootstrap, валидатор, html

Поделился: BootstrapТема

Добавлено: 2016-02-06 в 18:15

Метка: 1581670745

⇄ ⇅

<form data-toggle="validator" role="form">
 <div class="form-group">
 <label for="inputName" class="control-label">Ваше имя</label>
 <input type="text" class="form-control" id="inputName" placeholder="Введите Ваше имя" required>
 </div>
 <div class="form-group has-feedback">
 <label for="inputTwitter" class="control-label">Twitter</label>
 <div class="input-group">
 <span class="input-group-addon">@</span>
 <input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="bootstraptema" required>
 </div>
 <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
 <span class="help-block with-errors">Введите ник твиттера</span>
 </div>
 <div class="form-group">
 <label for="inputEmail" class="control-label">Ваш E-mail</label>
 <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Вы не правильно ввели Ваш E-mail" required>
 <div class="help-block with-errors"></div>
 </div>
 <div class="form-group">
 <label for="inputPassword" class="control-label">Введите пароль</label>
 <div class="form-inline row">
 <div class="form-group col-sm-6">
 <input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="123456" required>
 <span class="help-block">Минимум 6 значений</span>
 </div>
 <div class="form-group col-sm-6">
 <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Ошибка! Пароли не совпадают!" placeholder="Повторите пароль" required>
 <div class="help-block with-errors"></div>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="checkbox">
 <label>
 <input type="checkbox" id="terms" data-error="Прежде чем оправить данные" required>
 Докажите что Вы человек
 </label>
 <div class="help-block with-errors"></div>
 </div>
 </div>
 <div class="form-group">
 <button type="submit" class="btn btn-primary">Отправить</button>
 </div>
 </form>

</div></div></div>

BootstrapTema

Форма с валидатором

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0