Форми в Bootstrap 4

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

Базова форма

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <form> <fieldset class="form-group"> <label for="first_name">Ім'я</label> <input type="text" class="form-control" id="first_name" name="first_name">
</fieldset> <fieldset class="form-group"> <label for="last_name">Прізвище</label> <input type="text" class="form-control" id="last_name" name="last_name">
</fieldset> <button type="submit" class="btn btn-primary">Надіслати</button>
</form>

Форма в один рядок

Використовуйте клас .form-inline, щоб елементи форми відображалися як рядково-Блочні і вирівнювалися по лівому краю. Використовуйте допоміжні класи (наприклад, mr-sm-2), щоб додати простір між елементами.

Зверніть увагу, все це застосовується тільки тоді, коли область перегляду має ширину не менше 576 пікселів.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <form class="form-inline"> <label class="mr-sm-2 mb-0" for="first_name">Ім'я</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name"> <label class="mr-sm-2 mb-0" for="last_name">Прізвище</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name"> <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Надіслати</button>
</form>

Приховані мітки

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

Тут ми використовуємо .sr-only, щоб приховати мітки, а також додаємо атрибут placeholder, щоб підказувати користувачеві, що вводити. Використання атрибуту placeholder у такий спосіб не рекомендується, оскільки це може викликати проблеми зі зручністю користування.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <form class="form-inline"> <label class="mr-sm-2 mb-0 sr-only" for="first_name">Ім'я</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name" placeholder="Ім'я"> <label class="mr-sm-2 mb-0 sr-only" for="last_name">Прізвище</label> <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name" placeholder="Прізвище"> <button type="submit" class="btn btn-primary mt-2 mt-sm-0">Надіслати</button>
</form>

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

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

Ви також повинні додати клас .col-form-label до елемента <label>, щоб позначка щодо текстових полів розташувалася по центру вертикалі.

< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="container"> <form> <div class="form-group row"> <label for="first_name" class="col-xs-3 col-form-label mr-2">Ім'я</label> <div class="col-xs-9"> <input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div> <div class="form-group row"> <label for="last_name" class="col-xs-3 col-form-label mr-2">Прізвище</label> <div class="col-xs-9"> <input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div> <div class="form-group row"> <div class="offset-xs-3 col-xs-9"> <button type="submit" class="btn btn-primary">Надіслати</button>
</div>
</div>
</form>
</div>

Рядок форми

Ви можете замінити .row на .form-row для більш компактного компонування.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p><code>.row</code>:</p> <form> <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="Ім'я">
</div> <div class="col"> <input type="text" class="form-control" placeholder="Прізвище">
</div>
</div>
</form> <p class="mt-5"><code>.form-row</code>:</p> <form> <div class="form-row"> <div class="col"> <input type="text" class="form-control" placeholder="Ім'я">
</div> <div class="col"> <input type="text" class="form-control" placeholder="Прізвище">
</div>
</div>
</form>

<legend>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="container"> <form> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-3">Фрукти</legend> <div class="col-9"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1"> Яблуко
</label>
</div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked> Апельсин
</label>
</div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3"> Кавун
</label>
</div>
</div>
</div>
</fieldset> <div class="form-group row"> <label for="first_name" class="col-3 col-form-label">Ім'я</label> <div class="col-9"> <input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div> <div class="form-group row"> <label for="last_name" class="col-3 col-form-label">Прізвище</label> <div class="col-9"> <input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div> <div class="form-group row"> <div class="offset-3 col-9"> <button type="submit" class="btn btn-primary">Надіслати</button>
</div>
</div>
</form>
</div>

Розмір полів форми

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="form-group"> <input type="text" class="form-control form-control-sm" placeholder="Маленький">
</div> <div class="form-group"> <input type="text" class="form-control" id="last_name" placeholder="Стандартний розмір">
</div> <div class="form-group"> <input type="text" class="form-control form-control-lg" placeholder="Великий">
</div>

Розмір мітки

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <form> <div class="form-group row"> <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="Маленький">
</div>
</div> <div class="form-group row"> <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="colFormLabel" placeholder="Стандартний розмір">
</div>
</div> <div class="form-group row"> <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label> <div class="col-sm-10"> <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="Великий">
</div>
</div>
</form>

Розмір колонок

Ви можете використовувати систему сітки Bootstrap, щоб задати поля форми бажаної ширини.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="form-row"> <div class="col-5"> <input type="text" class="form-control" placeholder=".col-5">
</div> <div class="col-3"> <input type="text" class="form-control" placeholder=".col-3">
</div>
</div>

Текст довідки

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

Вам також слід використовувати атрибут aria-descriptionby, щоб зв'язати текст довідки із полем форми. Це гарантує, що програми читання з екрана зможуть повідомити текст довідки, коли користувач переведе фокус на поле форми.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <label for="accountId">Ідентифікатор облікового запису</label> <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId"> <span id="helpAccountId" class="form-text text-muted">Ідентифікатор облікового запису знаходиться у верхній частині рахунку.</span>

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <form> <div class="form-group row"> <label class="col-3 col-form-label mr-2">Логін</label> <div class="col-8"> <p class="form-control-plaintext">Bugsy</p>
</div>
</div> <div class="form-group row"> <label for="pwd" class="col-3 col-form-label mr-2">Пароль</label> <div class="col-8"> <input type="password" class="form-control" id="pwd" placeholder="Пароль">
</div>
</div>
</form>

Прапорці та перемикачі

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>.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <!--Прапорці--> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> <label class="form-check-label">1</label>
</div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> <label class="form-check-label">2</label>
</div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> <label class="form-check-label">3</label>
</div> <!--Перемикачі--> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1"> <label class="form-check-label">1</label>
</div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> <label class="form-check-label">2</label>
</div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3"> <label class="form-check-label">3</label>
</div>
</div>