Формы bootstrap 4: Формы. Компоненты · Bootstrap. Версия v4.0.0

Содержание

Формы в Bootstrap 4 | WebReference

Bootstrap 4 предлагает стиль по умолчанию, который применяется к большинству полей формы. Bootstrap также предоставляет классы для конкретных целей.

Базовая форма

Используйте класс .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить к ним width: 100%. Вставьте метки и поля формы внутрь <fieldset> с классом .form-group, к которому применяется оптимальное расстояние. В качестве альтернативы можно использовать <div> или другой элемент.

Форма в одну строку

Используйте класс .form-inline, чтобы элементы формы отображались как строчно-блочные и выравнивались по левому краю. Используйте вспомогательные класса (например, mr-sm-2), чтобы добавить пространство между элементами.

Обратите внимание, всё это применимо только тогда, когда область просмотра имеет ширину не меньше 576 пикселей.

Скрытые метки

В полях ввода всегда должны указываться метки, иначе программы чтения с экрана ожидают проблемы. При необходимости вы можете скрыть метку с помощью класса .sr-only.

Здесь мы используем .sr-only, чтобы скрыть метки, а также добавляем атрибут placeholder, чтобы подсказывать пользователю что вводить. Использование атрибута placeholder таким способом не рекомендуется, так как это может вызвать проблемы с удобством пользования.

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

Вы можете использовать классы сетки Bootstrap для создания горизонтальных форм. Просто укажите, сколько колонок должен занимать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждой колонки.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы метка относительно текстовых полей расположилась по центру вертикали.

Bootstrap 4 против Bootstrap 3

Когда речь идёт о горизонтальных формах, имеются некоторые незначительные различия между Bootstrap 4 и Bootstrap 3.

Сетки: При использовании сеток для макета формы, Bootstrap 4 требует класс .row. Этот класс не является обязательным для форм Bootstrap 3 (хотя по прежнему обязателен для сеток Bootstrap 3).
Метки: Bootstrap 4 использует .col-form-label в сетке макета формы, тогда как Bootstrap 3 использует .control-label. Обратите внимание, что Bootstrap 4 изначально использовал .form-control-label, но впоследствии заменил его на .col-form-label.
Класс .form-horizontal: Bootstrap 3 требует класс .form-horizontal, тогда как Bootstrap 4 нет.

Строка формы

Вы можете заменить .row на .form-row для более компактной компоновки.

<legend>

При использовании элементов <legend> в формах вы можете добавить к ним класс .col-form-label. Этот класс стилизует <legeng>, чтобы он больше походил на метку. Это может быть удобно при представлении набора переключателей или флажков в горизонтальной форме.

Смещение полей формы

В некоторых примерах используется класс .offset-* или .offset-*-* для выравнивания полей с метками и без.

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

Вы можете использовать .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует классы .form-control-lg и .form-control-sm для увеличения или уменьшения размера полей ввода. Bootstrap 3 для этого использует .input-lg и .input-sm.

Размер метки

Вы можете добавить к меткам .col-form-label-sm и .col-form-label-lg, чтобы размер метки соответствовал размеру поля формы.

Новое в Bootstrap 4

Классы .col-form-label-sm и .col-form-label-lg являются новыми в Bootstrap 4.

Размер колонок

Вы можете использовать систему сетки Bootstrap, чтобы задать поля формы желаемой ширины.

Текст справки

Bootstrap 4 предоставляет класс .form-text, который можно использовать для обозначения текста справки. Вы можете комбинировать этот класс со служебными классами, такими как .text-muted.

Вам также следует использовать атрибут aria-descriptionby, чтобы связать текст справки с полем формы. Это гарантирует, что программы чтения с экрана смогут сообщить текст справки, когда пользователь переведёт фокус на поле формы.

Bootstrap 4 против Bootstrap 3

Bootstrap 4 использует класс .form-text для отображения текста справки, Bootstrap 3 использует класс .help-block.

Статичные поля формы

Вы можете использовать класс .form-control-plaintext для элемента <p>, чтобы представить простой текст рядом с меткой (например, вместо использования поля ввода).

Bootstrap 4 против Bootstrap 3

Bootstrap 3 использовал класс .form-control-static для отображения статичного текста, в Bootstrap 4 этот класс был заменён на .form-control-plaintext.

Флажки и переключатели

Bootstrap 4 предоставляет классы .form-check, .form-check-label, .form-check-input и .form-check-inline для отображения флажков и переключателей.

Чтобы отобразить флажки или переключатели друг под другом, вложите каждый из них в элемент <div> с классом .form-check. Кроме того, добавьте .form-check-label к элементу <label> и .form-check-input к элементу <input>.

В одну строку

В Bootstrap 4 флажки и переключатели по умолчанию располагаются друг под другом. Вы можете отобразить их в одну строку, добавив .form-check-inline к внешнему <div>. Оставьте .form-check-input в элементе <input>.

Bootstrap 4 против Bootstrap 3

Bootstrap 3 для отображения флажков и переключателей использует .radio, .radio-inline, .checkbox или .checkbox-inline. Bootstrap 4 использует .form-check, .form-check-label, .form-check-input и .form-check-inline.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Bootstrap 4 Forms — формы, валидация форм

С помощью Bootstrap 4 вы можете создавать красивые адаптивные формы. Bootstrap 4 предоставляет стили для оформления большинства элементов форм. В частности, в Bootstrap 4 стили display: block и width: 100% применяются к большинству элементов форм. Это приводит к тому, что все элементы располагаются по вертикали (расположение элементов можно изменить).

Основная форма

Используйте класс .form-control для тегов <input> , <textarea> , и <select> для применения стиля width: 100%.

<form>
<fieldset>
<label for=»first_name»>First Name</label>
<input type=»text» name=»first_name»>
</fieldset>
<fieldset>
<label for=»last_name»>Last Name</label>
<input type=»text» name=»last_name»>
</fieldset>
<button type=»submit»>Submit</button>
</form>

<form>

<label for=»first_name»>First Name</label>

</fieldset>

</fieldset>

<button type=»submit»>Submit</button>

</form>

Inline формы

Используйте класс .form-inline для отрисовки элементов формы как inline blocks и с выравниванием по левому краю.

<form>
<div>
<label for=»first_name»>First Name</label>
<input type=»text» name=»first_name»>
</div>
<div>
<label for=»last_name»>Last Name</label>
<input type=»text» name=»last_name»>
</div>
<button type=»submit»>Submit</button>
</form>

<form>

<div>

<label for=»first_name»>First Name</label>

</div>

<div>

</div>

<button type=»submit»>Submit</button>

</form>

Скрытые элементы label

Тег label в большинстве случаев должен присутствовать в форме, иначе могут возникнуть проблемы с ее восприятием. Скрыть label можно с помощью класса .sr-only. В примере ниже мы использовали класс .sr-only, а также добавили атрибут placeholder, для описания полей формы.

<form>
<div>
<label for=»first_name»>Фамилия</label>
<input type=»text» name=»first_name» placeholder=»Фамилия»>
</div>
<div>
<label for=»last_name»>Имя</label>
<input type=»text» name=»last_name» placeholder=»Имя»>
</div>
<button type=»submit»>Submit</button>
</form>

<form>

<div>

<label for=»first_name»>Фамилия</label>

</div>

<div>

</div>

<button type=»submit»>Submit</button>

</form>

Управление размером форм

Вы можете использовать классы .form-control-lg или .form-control-sm для того, чтобы увеличить или уменьшить размер полей ввода формы.

Различие Bootstrap 4 и Bootstrap 3

Bootstrap 4 использует другие классы для управления размером форм.

Bootstrap 4 — .form-control-lg и .form-control-sm.
Bootstrap 3 — .input-lg и .input-sm.

Подсказки

В Bootstrap 4 есть класс .text-muted, который может быть использован для отображения подсказок. Он может применен к любому inline HTML элементу, например <p> , <span> или <small>. Account Id Your account ID is located at the top of your invoice.

<label for=»accountId»>Account Id</label>
<input type=»text» aria-describedby=»helpAccountId»>
<span>Your account ID is located at the top of your invoice.</span>

<label for=»accountId»>Account Id</label>

<span>Your account ID is located at the top of your invoice.</span>

В Bootstrap 3 этот класс назывался .help-block.

Стили валидации форм

Bootstrap 4 включает в себя стили для валидации элементов формы. Они могут быть использованы отображения одного из трех состояний (успех, ошибка или предупреждение). Для этого есть три класса: .has-success, .has-warning, и .has-error.

Success

Warning

Error

<div>
<label for=»username»>Success</label>
<input type=»text» aria-describedby=»usernameStatus»>
</div>

<div>
<label for=»password»>Warning</label>
<input type=»password» aria-describedby=»passwordStatus»>
</div>

<div>
<label for=»phone»>Error</label>
<input type=»tel» aria-describedby=»phoneStatus»>
</div>

<div>

<label for=»username»>Success</label>

</div>

<div>

<label for=»password»>Warning</label>

</div>

<div>

<label for=»phone»>Error</label>

</div>

Web-разработка • HTML и CSS

Компонент «Формы» — это набор CSS-классов, которые предназначены для оформления HTML форм: form-group, form-control, input-group, input-group-prepend, input-group-text, form-row, form-inline, invalid-feedback, valid-feedback, is-invalid, is-valid.

Правила создания форм:

Поместить каждую группу элементов (например, input и связанный с ним label) в элемент div с классом form-group. Этот класс добавляет нижние отступы к группам элементов.

Добавить к каждому текстовому элементу управления формы input, select и textarea класс form-control. Данный класс добавляет к элементам формы стили визуального оформления, размеры и многое другое.

В Bootstrap три вида форм: вертикальная, горизонтальная (с использованием классов .row и .col) и в одну строку (.form-inline).

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

<form>
    <div>
        <label for="input-email">Почта</label>
        <input type="email" placeholder="Введите email">
    </div>
    <div>
        <label for="input-password">Пароль:</label>
        <input type="password" placeholder="Введите пароль">
    </div>
    <div>
        <input type="checkbox">
        <label for="remember">Запомнить меня</label>
    </div>
    <div>
        <button type="submit">Войти</button>
    </div>
</form>

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

<form>
    <div>
        <label for="input-email">Почта</label>
        <div>
            <input type="email" placeholder="Введите email">
        </div>
    </div>
    <div>
        <label for="input-password">Пароль</label>
        <div>
            <input type="password" placeholder="Введите пароль">
        </div>
    </div>
    <div>
        <div></div>
        <div>
            <div>
                <input type="checkbox">
                <label for="remember">
                    Запомнить меня
                </label>
            </div>
        </div>
    </div>
    <div>
        <div></div>
        <div>
            <button type="submit">Войти</button>
        </div>
    </div>
</form>

Форма в одну строку

<form>
    <label for="input-email">Почта</label>
    <input type="email" placeholder="Введите email">

    <label for="input-password">Пароль:</label>
    <input type="password" placeholder="Введите пароль">

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

    <button type="submit">Войти</button>
</form>

Использование сетки

<form>
    <div>
        <div>
            <input type="text" placeholder="Имя">
        </div>
        <div>
            <input type="text" placeholder="Фамилия">
        </div>
        <div>
            <input type="email" placeholder="Почта">
        </div>
        <div>
            <input type="password" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div>
        <div>
            <input type="text" placeholder="Имя">
        </div>
        <div>
            <input type="text" placeholder="Фамилия">
        </div>
        <div>
            <input type="email" placeholder="Почта">
        </div>
        <div>
            <input type="password" placeholder="Пароль">
        </div>
    </div>
</form>

<form>
    <div>
        <div>
            <label for="input-email">Почта</label>
            <input type="email" placeholder="Введите email">
        </div>
        <div>
            <label for="input-password">Пароль</label>
            <input type="password" placeholder="Введите пароль">
        </div>
    </div>
    <div>
        <div>
            <label for="input-zip">Индекс</label>
            <input type="text" placeholder="Почтовый индекс">
        </div>
        <div>
            <label for="input-city">Город</label>
            <input type="text" placeholder="Город доставки">
        </div>
        <div>
            <label for="input-address">Адрес</label>
            <input type="text" placeholder="Адрес доставки">
        </div>
    </div>
    <button type="submit">Отправить</button>
</form>

Пример вертикального выравнивания элементов формы. Ширина каждого элемента определяется содержимым:

<form>
    <div>
        <div>
            <label for="input-email">Почта</label>
            <input type="email" placeholder="Введите email">
        </div>
        <div>
            <label for="input-password">Пароль</label>
            <input type="password" placeholder="Введите пароль">
        </div>
        <div>
            <input type="checkbox">
            <label for="remember">
                Запомнить
            </label>
        </div>
        <div>
            <button type="submit">Войти</button>
        </div>
        <div>
            Поля со звездочкой обязательны
        </div>
    </div>
</form>

Если не использовать класс align-items-center, то эта форма выглядела бы так:

Иконки для полей формы

<form>
    <div>
        <div>
            <label for="input-name">ФИО</label>
            <div>
                <div>
                    <div>
                        <i></i>
                    </div>
                </div>
                <input type="text" placeholder="Фамилия, имя">
            </div>
        </div>
        <div>
            <label for="input-email">Почта</label>
            <div>
                <div>
                    <div>
                        <i></i>
                    </div>
                </div>
                <input type="email" placeholder="Введите email">
            </div>
        </div>
        <div>
            <label for="input-password">Пароль</label>
            <div>
                <div>
                    <div>
                        <i></i>
                    </div>
                </div>
                <input type="password" placeholder="Введите пароль">
            </div>
        </div>
        <div>
            <label for="input-address">Адрес</label>
            <div>
                <div>
                    <div>
                        <i></i>
                    </div>
                </div>
                <input type="text" placeholder="Адрес доставки">
            </div>
        </div>
    </div>
    <button type="submit">Отправить</button>
</form>

Подсказки для полей формы

<form>
    <div>
        <label for="input-email">Почта</label>
        <input type="email" placeholder="Введите email">
    </div>
    <div>
        <label for="input-password">Пароль</label>
        <input type="password" placeholder="Введите пароль">
        <small>
            Пароль должен быть длиной 8-20 символов, содержать буквы и цифры
            и не должен содержать пробелов.
        </small>
    </div>
    <div>
        <button type="submit">Регистрация</button>
    </div>
</form>

<form>
    <label for="input-email">Почта</label>
    <input type="email" placeholder="Введите email">

    <div>
        <label for="input-password">Пароль:</label>
        <input type="password" placeholder="Введите пароль">
        <small>
            Должен быть не менее 8 символов.
        </small>
    </div>

    <button type="submit">Регистрация</button>
</form>

Валидация на стороне сервера

Если при проверке данных формы на стороне сервера были обнаружены ошибки, нужно снова показать форму и добавить пояснения, какие поля заполнены правильно, а какие — с ошибкой:

<form>
    <div>
        <div>
            <label for="input-name">Имя</label>
            <input type="text"
                   placeholder="Имя" value="Сергей" required>
            <div>Поле заполнено правильно.</div>
        </div>
        <div>
            <label for="input-surname">Фамилия</label>
            <input type="text"
                   placeholder="Фамилия" value="Иванов" required>
            <div>Поле заполнено правильно.</div>
        </div>
        <div>
            <label for="input-email">Почта</label>
                <input type="text"
                       placeholder="Почта" required>
                <div>Это поле обязательно.</div>
        </div>
    </div>

    <div>
        <div>
            <label for="input-zip">Почтовый индекс</label>
            <input type="text"
                   placeholder="Почтовый индекс" required>
            <div>Это поле обязательно.</div>
        </div>
        <div>
            <label for="input-city">Город</label>
            <input type="text"
                   placeholder="Город" required>
            <div>Это поле обязательно.</div>
        </div>
        <div>
            <label for="input-address">Адрес</label>
            <input type="text"
                   placeholder="Адрес" required>
            <div>Это поле обязательно.</div>
        </div>
    </div>

    <button type="submit">Отправить</button>
</form>

Валидация на стороне клиента

Благодаря HTML5, можно выполнить все стандартные задачи проверки входных данных на стороне клиента без JavaScript. Для этого достаточно определить тип input поля (text, email, url и т.п.) и добавить атрибуты required, которые отвечают за обязательность заполнения.

Чтобы отменить проверку формы браузером, достаточно добавить атрибут novalidate для элемента form. В этом случае проверка данных формы будет уже заботой разработчика.

<form novalidate>
    <div>
        <div>
            <label for="input-name">Имя</label>
            <input type="text"
                   placeholder="Имя" value="Сергей" required>
            <div>Поле заполнено правильно.</div>
        </div>
        <div>
            <label for="input-surname">Фамилия</label>
            <input type="text"
                   placeholder="Фамилия" value="Иванов" required>
            <div>Поле заполнено правильно.</div>
        </div>
        <div>
            <label for="input-email">Почта</label>
                <input type="text"
                       placeholder="Почта" required>
                <div>Это поле обязательно.</div>
        </div>
    </div>

    <div>
        <div>
            <label for="input-zip">Почтовый индекс</label>
            <input type="text"
                   placeholder="Почтовый индекс" required>
            <div>Это поле обязательно.</div>
        </div>
        <div>
            <label for="input-city">Город</label>
            <input type="text"
                   placeholder="Город" required>
            <div>Это поле обязательно.</div>
        </div>
        <div>
            <label for="input-address">Адрес</label>
            <input type="text"
                   placeholder="Адрес" required>
            <div>Это поле обязательно.</div>
        </div>
    </div>

    <button type="submit">Отправить</button>
</form>

(function() {
    'use strict';
    window.addEventListener('load', function() {
        var forms = document.getElementsByClassName('needs-validation');
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

Поиск:
Bootstrap • CSS • HTML • Web-разработка • Верстка • Форма • Фреймворк • Form • Валидация

Bootstrap Бутстрап 4 Forms — формы

Параметры по умолчанию Bootstrap 4

Элементы управления формы автоматически получают некоторый глобальный стиль с помощью Bootstrap:

Все текстовые <input>, <textarea> и <select> элементы с классом .form-control имеют ширину 100%.

Bootstrap 4 макеты форм

Bootstrap предоставляет два типа макетов форм:

Форма с накоплением (полная ширина)
Встроенная форма

Bootstrap 4 сложенная форма

В следующем примере создается сложенная форма с двумя полями ввода, одним флажком и кнопкой Submit.

Добавьте элемент-оболочку .form-group, вокруг каждого элемента управления формы, чтобы обеспечить правильные поля:

Пример

<form action=»/action_page.php»>
<div>
    <label for=»email»>Email address:</label>
    <input type=»email»>
</div>
<div>
    <label for=»pwd»>Password:</label>
    <input type=»password»>
</div>
  <div>
    <label
class=»form-check-label»>
      <input
class=»form-check-input» type=»checkbox»> Remember me

</label>
</div>
<button type=»submit»>Submit</button>
</form>

Встроенная форма Bootstrap

Во встроенной форме все элементы являются встроенными и выровненными по левому краю.

Примечание: это относится только к формам в видовых экранах, которые по крайней мере 576пкс в ширину. На экранах меньше, чем 576пкс, он будет стек горизонтально.

Дополнительное правило для встроенной формы:

Добавить класс .form-inline к <form> элементу

В следующем примере создается встроенная форма с двумя полями ввода, один флажок и одна кнопка отправки:

Пример

<form action=»/action_page.php»>
  <label for=»email»>Email address:</label>
  <input type=»email»>
  <label for=»pwd»>Password:</label>
  <input type=»password»>
<div>
    <label
class=»form-check-label»>
      <input
class=»form-check-input» type=»checkbox»> Remember me

</label>
</div>
<button type=»submit»>Submit</button>
</form>

Встроенная форма с утилитами

Встроенная форма выше чувствует себя «сжатой», и будет выглядеть гораздо лучше с интервалом утилиты Bootstrap. В следующем примере добавляется правое поле ( .mr-sm-2 ) для каждого входа на всех устройствах (Small и up). А нижний класс Margin ( .mb-2 ) используется для стиля поля ввода при разрыве (переход от горизонтального к вертикальному из-за недостаточного пространства/ширины):

Пример

<form action=»/action_page.php»>
  <label for=»email»
class=»mr-sm-2″>Email address:</label>
  <input type=»email»>
  <label for=»pwd»
class=»mr-sm-2″>Password:</label>
  <input type=»password»>
<div>
    <label
class=»form-check-label»>
      <input
class=»form-check-input» type=»checkbox»> Remember me

</label>
</div>
<button type=»submit»>Submit</button>
</form>

Формы в Bootstrap 4 (form)

Bootstrap 4 предоставляет стили по умолчанию, которые применяются к большинству элементов управления формы. Он также предоставляет классы для определенных целей, которые мы подробнее рассмотрим ниже.

Базовая форма

Используйте класс Bootstrap .form-control для текстовых элементов <input>, <textarea> и <select>, чтобы применить базовое оформление и ширину элемента в 100%.

Так же, оберните лэйблы (<label>)и элементы управления формы внутри тега <fieldset> с помощью класса Bootstrap .form-group, применяемого для выставления оптимального расстояния между элементами. В качестве альтернативы fieldset вы можете использовать <div> или другой блоковый элемент.

Пример простой формы в Bootstrap 4:

<form action="">
  <fieldset>
    <label for="first_name">First Name</label>
    <input type="text">
  </fieldset>
  <fieldset>
    <label for="last_name">Last Name</label>
    <input type="text">
  </fieldset>
  <button type="submit">Submit</button>
</form>

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

В предыдущем примере, элементы форм располагались вертикально (один под другим). Давайте рассмотрим пример, где элементы формы располагаются горизонтально.

блок 1

Используйте класс Bootstrap .form-inline, чтобы элементы формы отображались как inline-block и выравнивались по левому краю. Чтобы добавить пробел между элементами, используйте утилиту spacer (например, mr-sm-2).

<form action="">
  <label for="first_name">First Name</label>
  <input type="text">
  <label for="last_name">Last Name</label>
  <input type="text">
  <button type="submit">Submit</button>
</form>

Скрытые метки (label)

В полях ввода всегда должны указываться метки, иначе люди с ограниченными возможностями столкнутся с проблемой при использовании вашей страницы.

Здесь мы используем .sr-only, чтобы скрыть метки. Мы также добавляем атрибут-заполнитель placeholder, чтобы подсказывать пользователю, что вводить в конкретное поле.

<form action="">
  <label for="first_name">First Name</label>
  <input type="text" placeholder="First name">
  <label for="last_name">Last Name</label>
  <input type="text" placeholder="Last name">
  <button type="submit">Submit</button>
</form>

Горизонтальные метки (label)

Вы можете использовать сетку Bootstrap для расположения элементов форм и их меток (лэйблов) горизонтально. Просто укажите, сколько столбцов должен охватывать каждый элемент. В частности, добавьте класс .row к .form-group и класс .col-*-* или .col-* для каждого столбца.

Вы также должны добавить класс .col-form-label к элементу <label>, чтобы расположить метку вертикально по середине, относительно элементов ввода текста.

<div>
  <form action="">
    <div>
      <label for="first_name">First Name</label>
      <div>
        <input type="text">
      </div>
    </div>
    <div>
      <label for="last_name">Last Name</label>
      <div>
        <input type="text">
      </div>
    </div>
    <div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </div>
  </form>
</div>

Вы можете заменить .row на .form-row чтобы уменьшить отступы между столбцами и сделать форму более компактной.

Размеры элементов форм

Вы можете использовать .form-control-lg и .form-control-sm в Bootstrap 4 для увеличения или уменьшения размера элемента управления вводом (input, select).

<div>
  <input type="text" placeholder="Малый размер">
</div>
<div>
  <input type="text" placeholder="Размер по умолчанию">
</div>
<div>
  <input type="text" placeholder="Большой размер">
</div>

Размер элементов label

Вы можете добавить .col-form-label-sm и .col-form-label-lg к вашим меткам, чтобы размер метки соответствовал элементу управления формы.

<form>
  <div>
    <label for="colFormLabelSm">Малый размер</label>
    <div>
      <input type="email" placeholder="Малый размер">
    </div>
  </div>
  <div>
    <label for="colFormLabel">Размер по умолчанию</label>
    <div>
      <input type="email" placeholder="Размер по умолчанию">
    </div>
  </div>
  <div>
    <label for="colFormLabelLg">Большой размер</label>
    <div>
      <input type="email" placeholder="Большой размер">
    </div>
  </div>
</form>

Текст подсказки для элементов формы

Bootstrap 4 предоставляет класс .form-text, который можно использовать для обозначения текста подсказки. Вы можете комбинировать этот класс с служебными классами, такими как .text-muted или .text-danger.

Вам также следует использовать атрибут .aria-descriptionby, чтобы связать текст справки с элементом управления формы. Это гарантирует, что программы чтения с экрана смогут продиктовать текст подсказки, когда пользователь сосредоточится на элементе управления формы.

<label for="accountId">Поле формы</label>
<input type="text" aria-describedby="helpAccountId">
<span>Текст подсказки или пояснения.</span>

блок 3

Как изменить ширину формы Bootstrap 4? — Хабр Q&A

Всем привет.
В общем есть страничка обратной связи с формой Bootstrap

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
	<title>october</title>
</head>
<body>


<div>
  <div>
      <div>
        <h2>Связь</h2>
        <form>
          <input type="email" name="email" placeholder="email"><br>
          <input type="text" name="name" placeholder="name"><br>
          <input type="phone" name="phone" placeholder="phone"><br>
          <textarea name="message" placeholder="message"></textarea><br>
          <button type="button" name="button">Отправить</button>
        </form>
        <div></div>
    </div>
  </div>  
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../js/formMail.js"></script>

<?php require "../blocs/footer.php"; ?>
</body>
</html>

Форма выглядит вот так
Лезу значит в браузер просмотреть код и вижу, что к id mailForm привязан стиль стиль width:100px
Ok, захожу в css файл, а там никакого width:100px и в помине нет.
Форма отображается в нужном размере только когда полностью отключаю css файл, но с его отключением пропадают другие стили.

P.s вчера всё работало нормально, ничего не изменял, может Open Server тупит.

Отбой, разобрался, баба отвлекала всё время, разводитесь пацаны!

Оформляем формы с Bootstrap | Vaden Pro

На повестке дня оформление форм с использованием Twitter Bootstrap. Будем рассматривать насколько это вообще удобно, какие имеются возможности для работы с элементами форм и разбирать типичные примеры из практики.

В тему: Урок по созданию собственной формы обратной связи

В целом выделяют следующие разновидности оформления:

Формы с вертикальной ориентацией элементов;
С располагающимися в строку элементами;
Горизонтально ориентированные формы.

Остановимся на них подробнее:

Оформление стандартных (вертикальных) форм

Синтаксис:

Чтобы все корректно работало все теги необходимо поместить внутрь <form role="form">…</form>
Отдельные группы тегов внутри form помещаются внутрь обертки <div>…</div>
Для применения оформления к основным тегам формы (input, textarea, select) им присваивается класс .form-control

Если все сделано верно, то теги внутри form станут блочными и расширятся до размеров родительского контейнера.

Чтобы лучше понять давайте рассмотрим пример:

<form role="form">
 <div>
    <input name="name" type="text"  placeholder="Имя"/>
    <p>Введите имя на русском языке</p>
 </div>
 <div>
    <label for="email">E-mail</label>	  
    <input name="email" type="email" placeholder="E-mail"/> 
 </div>
 <div>
   <textarea name="comment" placeholder="Сообщение"></textarea>
 </div>
 <div>
    <input type="submit" value="Отправить" />
 </div>
</form>

Как видим, мы получили ненавязчивое оформление input и textarea, лейблы внутри .form-group располагаются вблизи полей.

При желании мы можем добавлять подписи и подсказки внутри форм воспользовавшись классом .help-block тега <p>. Это можно применять внутри любых видов форм.

Для придания нормального вида input type=»submit» мы воспользовались классами из урока о оформлении кнопок.

Строчные формы

Синтаксис:

Главному тегу формы присваивается .form-inline класс: <form role="form">
Остальные требования аналогичны стандартным (см. выше).

Рассмотрим простейшую форму в которой элементы располагаются в строку:

<form role="form">
   <div>
      <label for="name">Имя</label>	 
      <input name="name" type="text"  placeholder="Имя"/> 
   </div>
   <div>
      <label for="email">E-mail</label>	  
      <input name="email" type="email" placeholder="E-mail"/> 
   </div>
   <div>
      <input type="submit" value="Отправить" />
   </div>
</form>

Как можно заметить, наши поля и подписи полей теперь отображаются в строку и выровнены по левому краю. В целом теги внутри формы растягиваются до границ контейнера в котором находятся. При разрешении экрана менее 768 px начинают располагаться друг под другом.

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

Синтаксис:

К form присваивается соответствующий класс — .form-horizontal
К label добавляется класс .control-label
Для группировки полей по-прежнему присваиваем .form-group соответствующему диву

Чтобы форма выглядела более представительно можно воспользоваться классами относящимися к блочной верстке в Bootstrap:

<form role="form">
   <div>
      <label for="name">Имя</label>	
	  <div>
         <input name="name" type="text"  placeholder="Имя"/> 
	  </div>
   </div>
   <div>
      <label for="email" >E-mail</label>	  
	  <div>
         <input name="email" type="email" placeholder="E-mail"/> 
	  </div>
   </div>
   <div>
      <div>
         <input type="submit" value="Отправить" />
      </div>
   </div>
</form>

Чекбоксы

Если нам необходимо выбрать из списка значений несколько, то мы прибегаем к помощи <input type="checkbox">.

Синтаксис:

Группа элементов относящихся к чекбоксу располагается внутри дива с соответствующим классом — .checkbox.

Сам инпут помещается внутрь тега <label>.

Чтобы сделать выбор чекбокса невозможным, ему необходимо присвоить атрибут disabled, при желании можно добавить такой же класс родительскому диву, это заблокирует не только саму кнопку выбора, а и сделает не активным текст кнопки.

В конечном счете у нас должна выйти следующая конструкция:

<div>
   <label>
      <input type="checkbox" value="check1">
      Активный чекбокс
   </label>
</div>
 
<div>
   <label>
      <input type="checkbox" value="check2" disabled>
      Неактивный чекбокс
   </label>
</div>

Радиокнопки

Отличаются от чекбоксов только тем, что из перечня можно выбрать только один вариант. В остальном все правила оформления сохраняются, за вычетом того, что класс родительского дива меняется с .checkbox на .radio:

<div>
   <label>
      <input type="radio" name="optionsRadios" value="option1" checked>
      Активная радиокнопка
   </label>
</div>
 
<div>
   <label>
       <input type="radio" name="optionsRadios" value="option2" disabled>
       Неактивная кнопка
   </label>
</div>

Чекбоксы и радиокнопки расположенные в строку

Для того, чтобы расположить в линию несколько кнопок не нужно изобретать велосипед заново. Достаточно присвоить соответствующие классы .checkbox-inline и .radio-inline наему родительскому контейнеру:

<label>
   <input type="checkbox" value="option1"> Чекбокс 1
</label>
<label>
   <input type="checkbox" value="option2"> Чекбокс 2
</label>
<label>
   <input type="checkbox" value="option3"> Чекбокс 3
</label>
 
<label>
   <input type="radio" name="radio" value="option1"> Радио 1
</label>
<label>
   <input type="radio" name=" radio " value="option2"> Радио 2
</label>
<label>
   <input type="radio" name=" radio " value="option3"> Радио 3
</label>

Выпадающие списки

Один из самых незамысловатых разделов нашего урока. Для оформления селекту достаточно добавить .form-control :

<select>
   <option>Первый пункт</option>
   <option>Второй пункт</option>
   <option>Третий пункт</option>
</select>

В случае же, когда мы хотим организовать список с отображением не одного, а нескольких полей достаточно прибегнуть к атрибуту multiple:

<select multiple>
   <option>Первый пункт</option>
   <option>Второй пункт</option>
   <option>Третий пункт</option>
</select>

Результат проделанных манипуляций будет следующим:

Оформляем поля с разными «состояниями»

Добавляя родительскому для группы полей диву соответствующие классы мы можем получить подходящее в конкретной ситуации оформление полей формы.

Так, прибегнув к .has-success выделить, к примеру, верно заполненные поля в форме, а при помощи .has-error поля с ошибками. .has-warning может отмечать поле пароля при регистрации пользователя, когда вместо рекомендуемых требований к паролю он начинает вводить что-то простенькое.

В общем к чему их добавлять это уже другой вопрос, наше дело рассказать как это сделать:

<div>
   <label for="succ">Оформление success</label>
   <input type="text">
</div>
 
<div>
   <label for="warn">Оформление warning</label>
   <input type="text">
</div>
 
<div>
   <label for="err">Оформление error</label>
   <input type="text">
</div>

Как мы видим, стилизуются не только поля, а и лейблы.

Для чекбоксов картина обстоит аналогичным образом:

<div>
   <div>
      <label>
         <input type="checkbox" value="option1">Оформление success
      </label>
   </div>
</div>
 
<div>
   <div>
      <label>
         <input type="checkbox" value="option1">Оформление warning
      </label>
   </div>
</div>
 
<div>
   <div>
      <label>
         <input type="checkbox" value="option1">Оформление error
      </label>
   </div>
</div>

Изменение размеров полей

Присваивая полям формы классы .input-lg и .input-sm мы можем их делать больше и меньше соответственно. В данном случае я имею ввиду размер шрифта, паддинги и тд:

<div>
   <input name="email" type="email" placeholder="E-mail"/> 
</div>
<div>
   <input name="email" type="email" placeholder="E-mail"/> 
</div>
<div>
   <input name="email" type="email" placeholder="E-mail"/> 
</div>

Для работы с горизонтальными размерами форм можно использовать моменты из блочной верстки от Bootstrap:

<div>
  <div>
     <input name="email" type="email" placeholder="E-mail"/> 
  </div>
  <div>
     <input name="email" type="email" placeholder="E-mail"/> 
  </div>
</div>

Добавление иконок полям

Воспользовавшись группирующим классом .input-group у родительского дива и спаном с классом .input-group-addon мы можем добавить иконку к нашему полю формы:

   <div>
      <span>@</span>	  
      <input name="email" type="email" placeholder="E-mail"/> 
   </div>

Подводя итоги

В уроке мы рассмотрели основные моменты связанные с оформлением форм в Bootstrap. Насколько удобен этот инструмент в применении на практике решать уже Вам.

Если же Вы еще не знаете какие возможности предлагает данный html/css фреймворк, то предлагаю вам просмотреть вводный урок этого курса.

Оценок: 6 (средняя 4.3 из 5)

Bootstrap 4 группы ввода

Поддерживаемые элементы управления формами

Bootstrap поддерживает следующие элементы управления формой:

ввод
текстовое поле
флажок
радио
выберите

Вход начальной загрузки

Bootstrap поддерживает все типы ввода HTML5:
текст, пароль, datetime, datetime-local, дата, месяц, время, неделя, число,
электронная почта, URL, поиск, тел. и цвет.

Примечание: Входные данные НЕ будут полностью стилизованы, если их тип не объявлен должным образом!

Следующий пример содержит два элемента ввода; один из type = "text" и один из
type = "пароль" .Как мы упоминали в главе о формах, мы используем класс .form-control для стилизации входных данных с полной шириной и правильным заполнением и т. Д .:

Пример

Имя:

Пароль:

Попробуй сам »

Bootstrap Textarea

В следующем примере содержится текстовое поле:

Пример

Комментарий:

Попробуй сам »

Флажки начальной загрузки

Флажки используются, если вы хотите, чтобы пользователь выбирал любое количество вариантов из
список предустановленных опций.

В следующем примере есть три флажка. Последняя опция отключена:

Пример

Вариант 1

Вариант 2

Вариант 3

Попробуй сам »

Объяснение примера

Используйте элемент оболочки с class = "form-check" , чтобы обеспечить правильные поля для меток и флажков.

Добавьте класс .form-check-label к элементам метки и .form-check-input для правильного оформления флажков внутри контейнера .form-check .

Встроенные флажки

Используйте класс .form-check-inline , если вы хотите, чтобы флажки отображались на
та же линия:

Пример

Вариант 1

Вариант 2

Вариант 3

Попробуй сам »

Bootstrap Radio Buttons

Радиокнопки используются, если вы хотите ограничить пользователя только одним выбором
из списка предустановленных опций.

В следующем примере используются три переключателя. Последняя опция отключена:

Пример

Вариант 1

Вариант 2

Вариант 3

Попробуй сам »

Как и в случае с флажками, используйте .form-check-inline , если вы хотите
радиокнопки появятся на
та же линия:

Пример

Вариант 1

Вариант 2

Вариант 3

Попробуй сам »

Список выбора начальной загрузки

Выберите список (выберите один):
1234
Список множественного выбора (удерживайте ctrl или shift (или перетащите мышью), чтобы выбрать более одного):
12345

Списки выбора используются, если вы хотите, чтобы пользователь мог выбирать из нескольких вариантов.

В следующем примере содержится раскрывающийся список (список выбора):

Пример

Список выбора:

Попробуй сам »

Контроль размеров формы

Измените размер элемента управления формой на .form-control-sm или .form-control-lg :

Пример

Попробуй сам »

Элемент управления формой с обычным текстом

Используйте .form-control-plaintext , если вы хотите оформить поле ввода как обычный текст:

Файл управления формой и диапазон

Добавьте .form-control-range class к input type "range" или .form-control-file с по введите тип «файл» для стилизации элемента управления диапазоном или поля файла с полной шириной:

Пример

Попробуй сам »

Bootstrap 4 Forms — примеры и руководство. Базовое и расширенное использование

Компиляция и настройка

Чтобы еще больше уменьшить вес пакета MDBootstrap, вы можете скомпилировать свой собственный пакет, содержащий только
эти компоненты и
функции, которые вам нужны.

Если вам нужна дополнительная помощь в компиляции пользовательского пакета, воспользуйтесь нашим руководством по компиляции и настройке.

Руководство по компиляции и настройке

Карта зависимостей файлов SCSS в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро /
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

Карта зависимостей модулей JavaScript в MDBootstrap:

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── Chips.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js

Bootstrap 4 | Формы — GeeksforGeeks

< html lang = "ru" >

< head >

< title > Bootstrap Form title >

< meta charset = "utf-8" >

< meta name = "viewport" content = "width = device-width, initial-scale = 1" >

< ссылка отн. = "таблица стилей" href =

< скрипт src =

скрипт >

< скрипт src =

сценарий >

< сценарий src =

сценарий >

головка >

< корпус >

< h2 класс = "текст-успех текст-центр" > GeeksforGeeks < / h2 >

< h3 class = "text-center" > Проверка формы h3 >

< div class = "контейнер" >

< форма действие = "#" класс = "прошел валидацию" >

< div class = "form-group" >

< label для = "fname" > Имя: этикетка >

< ввод тип = «текст» 90 029 class = "form-control" id = "fname"

placeholder = "Enter First Name" name = "fname " требуется>

< div class = " valid-feedback " > Valid div >

< div class = «invalid-feedback» >

Заполните это поле

div >

< div class = "form-group" >

< label для = "lname" > Фамилия: < / метка >

< ввод тип = "текст" класс = "form-control" id = " lname "

заполнитель = " Введите фамилию " имя = " lname " требуется>

< div class = "действительный-обратная связь" > Действительно div >

9002 9 < div class = «invalid-feedback» >

Заполните это поле

div >

< div class = "form-group" >

< label для = «электронная почта» > Идентификатор электронной почты: метка >

< ввод тип = «электронная почта» класс = "form-control" id = "email" 900 30

заполнитель = «Введите адрес электронной почты» имя = «электронная почта» требуется>

< div class = "valid-feedback" > Valid div >

< div class = "invalid-feedback" >

Пожалуйста заполните это поле

div >

< div class = "группа форм" >

< этикетка для = «контакт» > Контактный номер: этикетка >

< вход тип = «текст» класс = «form-control» id = «контакт»

заполнитель = «Введите контактный номер» имя = «контакт»

требуется>

< div class = «valid-feedback» > Valid div >

< дел класс 9002 9 = «invalid-feedback» >

Заполните это поле

div >

< div class = «form-group form-check» >

< label class = «форма-проверка-этикетка» >

< ввод класс = «форма-проверка-ввод» тип = «флажок»

имя = «запомнить» 9 0029 требуется> Согласен

< div class = "valid-feedback" > Valid div >

< div class = «invalid-feedback» >

Установите флажок

div >

этикетка >

div >

< кнопка тип = «отправить» класс = «бтн бг-успех» 900 29> Отправить кнопка >

форма >

div >

корпус >

html >

`Bootstrap (Часть 4) | Вертикальные формы, горизонтальные формы, встроенные формы`

< html lang = "en" >

< head >

< title > Пример начальной загрузки title >

< meta charset = "utf-8" >

< meta name = "viewport" content = "width = device-width, initial-scale = 1" >

< ссылка отн. = "таблица стилей"

href =

< скрипт src =

скрипт >

< скрипт src =

скрипт >

головка >

< корпус >

< div class = «контейнер» style = «цвет: зеленый» >

< h2 > GeeksforGeeks h2 >

div >

< div class = «контейнер» >

900 30 < h5 > Горизонтальная форма h5 >

< форма действие = "" класс = "форма- горизонтальный " >

< div class = " form-group has-success " >

< label class = "control-label col-sm-2"

для = "id1" > Имя пользователя label >

< div класс = "col-sm-6" >

< вход класс = «form-control»

тип = «текст»

id = «id1»

заполнитель = «Введите свое имя пользователя» >

div >

< div class = "form-group has-success" >

< label class = "control-label col-sm-2"

для = "id2" > Пароль la bel >

< div class = "col-sm-6" >

< input class = "form-control"

тип = "пароль"

id = "id2"

заполнитель = "Введите свой пароль " >

div >

< div class = «контейнер» >

< button type = «button» class = «btn btn-success» >

Login

кнопка >

< кнопка тип = «кнопка» класс = «btn btn-secondary» >

Регистрация

кнопка >

< lebel >

< ввод тип = "флажок" > Запомнить меня

lebel >

div >

форма >

div >

body >

html >

`Как реализовать формы в Bootstrap 4`

Введение

В этой статье будет продемонстрировано, как можно использовать классы Bootstrap 4 для разработки входных данных формы HTML 5.Bootstrap поддерживает все типы ввода HTML5: текст, пароль, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel и color. Обязательно используйте соответствующий атрибут типа для всех входов (например, email для адреса электронной почты или номер для числовой информации), чтобы воспользоваться преимуществами новых элементов управления вводом, таких как проверка электронной почты, выбор номера и т. Д.

Чтобы использовать всплывающее окно Bootstrap 4 в вашем проекте, вам необходимо иметь следующие загруженные скрипты или скрипты cdn link.

Пример ввода HTML5 в Bootstrap 4

Form
Входные данные формы HTML 5 в bootstrap 4
HTML 5 из входов