betacode

Руководство Bootstrap Form

View more Tutorials:

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

1- Обзор Bootstrap Form

В плане Layout (расположения), Bootstrap имеет 3 способа для расположения элементов на интерфейсе.

  1. Использовать класс .form-group для расположения элементов по-вертикали.
  2. Использовать класс .form-inline для расположения элементов по-горизонтали.
  3. Расположить элементы на Grid (Сетке), и тогда элементы будут отображены по правилам Сетевой системы (Grid System) у Bootstrap.

.form-group

.form-inline

Grid

2- Вертикальная форма (.form-group)

Чтобы расположить элемнты по-вертикали, вам нужно обернуть их (wrap) с помощью тега <div class="form-group">. Эти элементы будут иметь ширину заполняющую (fill) родительский элемент.
Vertical Form (.form-group)

<form>

   <!-- Vertical -->
   <div class="form-group">
      <label for="myEmail">Email</label>
      <input type="email" id = "myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>

</form>
Смотрите полный пример:
form-group-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h2>.form-group (Vertical)</h2>

         <form>
            <!-- Vertical -->
            <div class="form-group">
               <label for="myEmail">Email</label>
               <input type="email" id = "myEmail" class="form-control" placeholder="Email">
               <label for="myPassword">Password</label>
               <input type="password" id="myPassword" class="form-control" placeholder="Password">
               <button type="submit" class="btn btn-primary">Submit</button>
            </div>
         </form>
         
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

3- Горизонтальная форма (.form-inline) **

Чтобы расположить элементы для отображения на 1 ряду, вы можете обернуть их (warp) с помощью тега <div class="form-inline">. При этом они могут быть на разных строках, если родительский элемент имеет слишком малую ширину.
Horizontal Form (.form-inline)

<form>
   <!-- Horizontal -->
   <div class="form-inline">
      <label for="myEmail">Email</label>
      <input type="email" id="myEmail" class="form-control" placeholder="Email">
      <label for="myPassword">Password</label>
      <input type="password" id="myPassword" class="form-control" placeholder="Password">
      <button type="submit" class="btn btn-primary">Submit</button>
   </div>
</form>

4- Form Grid

Сетевая система (Grid System) является сильной системой для расположения элементов на интерфейсе, и вы вполне можете использовать ее для применения к Form.

Grid

Внизу является пример использования сетевой системы для расположения элементов на интерфейсе. Примечание: Класс .row и .form-row работают одинаково, но рекомендуется использовать .form-row для соответствия с контекстом.
Grid example

<form>
   <div class="row">
      <div class="col-6 col-sm-4">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8">
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>

Grid + .form-group

Пример сочетания Grid и класса .form-group:
Grid + .form-group example

<form>
   <div class="form-row">
      <div class="col-6 col-sm-4 form-group">
         <label>Product Code</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-4">
      </div>
      <div class="col-6 col-sm-8 form-group">
         <label>Product Name</label>
         <input type="text" class="form-control" placeholder=".col-6 .col-sm-8">
      </div>
   </div>
</form>

5- Пример сложной Form 

Комбинировать классы .form-group, .form-row, .form-inline,.. чтобы получить Form со сложным расположением.
complex-form-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-2">Complex Form</h4>
         <form>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myEmail">Email</label>
                  <input type="email" class="form-control"
                     id="myEmail" placeholder="Email">
               </div>
               <div class="form-group col-sm-6">
                  <label for="myPassword">Password</label>
                  <input type="password" class="form-control"
                     id="myPassword" placeholder="Password">
               </div>
            </div>
            <div class="form-group">
               <label for="inputAddress">Address</label>
               <input type="text" class="form-control"
                  id="myAddress" placeholder="1234 Main St">
            </div>
            <div class="form-group">
               <label for="inputAddress2">Address 2</label>
               <input type="text" class="form-control"
                  id="myAddress2" placeholder="Apartment, studio, or floor">
            </div>
            <div class="form-row">
               <div class="form-group col-sm-6">
                  <label for="myCity">City</label>
                  <input type="text" class="form-control" id="myCity">
               </div>
               <div class="form-group col-sm-4">
                  <label for="myState">State</label>
                  <select id="myState" class="form-control">
                     <option selected>Choose...</option>
                     <option>...</option>
                  </select>
               </div>
               <div class="form-group col-sm-2">
                  <label for="myZip">Zip</label>
                  <input type="text" class="form-control" id="myZip">
               </div>
            </div>
            <div class="form-group">
               <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="myCheck">
                  <label class="form-check-label" for="myCheck">
                  Check me out
                  </label>
               </div>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

6- HTML Input Types

Элемент <input> это один из компонентов участвующих в Form, перед HTML5 имеется 9 видов <input>button, checkbox, file, hidden, image, password, radio, reset, submit, text (кнопка, флажок, файл, скрыто, изображение, пароль, радио, перезагрузка, загрузка, текст) . В октябре 2014 года, вышел HTML5, который представил 12 других видов <input> это color, date, datetime-local, email, month, number, range, search, tel, time, url, week (цвет, дата, местное время дата, электронная почта, месяц, число, диапазон, поиск, телефон, время, ссылка, неделя). Все эти виды поддерживаются с помощью Bootstrap, и созданы заранее для применения:
Класс Bootstrap Вид (Type)Описание
.btnbuttonОпределяет кнопку, на которую можно нажать (clickable)
resetОпределяет кнопку  reset (Кнопка перезагрузки), чтобы перезагрузить (reset) значения Form.
submitОпределяет кнопку  submit (загрузить).
.form-check-input
.form-check-label
checkboxОпределяет  checkbox (флажок).
radioОпределяет  radio button (кнопка радио).
.form-controltext(По-умолчанию). Определяет поле (field) для введения текстовой строки.
passwordОпределяет поле для введения пароли.
https://www.w3schools.com/images/html5_badge20.pngemailОпределяет поле для введения email.
https://www.w3schools.com/images/html5_badge20.pngsearchОпределяет поле текста для введения ключевого слова в поиске.
https://www.w3schools.com/images/html5_badge20.pngurlОпределяет поле для введения URL (ссылки).
https://www.w3schools.com/images/html5_badge20.pngtelОпределяет поле для введения номера телефона.
https://www.w3schools.com/images/html5_badge20.pngnumberОпределяет поле для введения числа.
.form-controlhttps://www.w3schools.com/images/html5_badge20.pngcolorОпределяет color picker (Палитр цветов)
.form-control-filefileОпределяет поле изображающее выбранный файл, и кнопку "Browse" для выбора файла.

hiddenОпределяет скрытое поле.
imageОпределяет image (изображение), как кнопку submit.
 .form-control-rangehttps://www.w3schools.com/images/html5_badge20.pngrangeОпределяет  control чтобы выбрать значение в диапазоне (range) (Похож на slider)
.form-controlhttps://www.w3schools.com/images/html5_badge20.pngdateОпределяет  control чтобы выбрать дату (год, месяц, день, не включая время)
https://www.w3schools.com/images/html5_badge20.pngtimeОпределяет  control чтобы выбрать время (Не влючая часовой пояс)
https://www.w3schools.com/images/html5_badge20.pngdatetime-localОпределяет  control чтобы выбрать дату и время (год, месяц, день, время, не влючая часовой пояс (timezone))
https://www.w3schools.com/images/html5_badge20.pngmonthОпределяет  control чтобы выбрать месяц и год.
https://www.w3schools.com/images/html5_badge20.pngweekОпределяет  control чтобы выбрать неделю и год (Не включая часовой пояс).

button, reset, submit

Элементы <input type="button|reset|submit"> на самом деле являются кнопкой, Bootstrap использует класс .btn для применения. Вы можете посмотреть детали в статье про Bootstrap Button.

text, password, email, search, url, tel, number

Элемент <input> с видами выши является полем (field) чтобы пользователь ввел данные в виде текста (textual). Bootstrap использует класс .form-control, чтобы применить к этим элементам.
text, password, email, search, url, tel, number

<form>
   <div class="form-group">
      <label for="myTel1">Input Tel (Default)</label>
      <input type="tel" id="myTel1">
   </div>
   <div class="form-group">
      <label for="myTel2">Bootstrap Input Tel</label>
      <input type="tel" id="myTel2" class="form-control">
   </div>
</form>

color

Bootstrap использует класс .form-control для применения к <input type="color">. Но выглядит словно работает не так, как ожидалось (минимум до версии 4.1).
Например ниже являются 2 элемента <input type="color">, к одному элементу не применен класс .form-control, и к одному элементу применен класс .form-control:
Ниже является пример решения вышеупомянутой проблемы:

input[type=color].form-control {
     height: 40px;
}
input-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         input[type=color].form-control {
         height: 40px;
         }
      </style>
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="color"</h4>
         <form>
            <div class="form-group">
               <label for="myColor1">Input Color (Default)</label>
               <input type="color" id="myColor1">
            </div>
            <div class="form-group">
               <label for="myColor2">Bootstrap Input Color (.form-control)</label>
               <input type="color" class="form-control input-sm" id="myColor2">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

checkbox, radio

Для Bootstrap полный компонент checkbox (Или radio) включает 2 элемента, как <input> и <label> обернутые (wrap) с помощью <div class="form-check">. Bootstrap использует класс .form-check-input для применения к <input>, и использует класс .form-check-label для применения к <label>.
Примечание: <label> должен быть расположен сразу после <input type="checkbox|radio">.
checkbox/radio

<form>
   <div class="form-group">
      <div class="form-check">
         <input type="radio" id="myRadio1" class="form-check-input">
         <label for="myRadio1">Bootstrap Input Radio</label>
      </div>
   </div>
   <div class="form-group">
      <div class="form-check">
         <input type="checkbox" id="myCheckbox2" class="form-check-input">
         <label for="myCheckbox2" class="form-check-label">Bootstrap Input Checkbox</label>
      </div>
   </div>
</form>
Использовать атрибут disabled применить к <input type="checkbox|radio">, чтобы отключить его, пользователь не сможет взаимодействовать с данным элементом. Одновременно он отключает элементы <label> в одном .form-check с вышеупомянутым <input>.
disabled checkbox/radio

<form>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
      <label class="form-check-label" for="defaultCheck1">
      Default checkbox
      </label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
      <label class="form-check-label" for="defaultCheck2"
      Disabled checkbox
      </label>
   </div>
</form>

range

<input type="range"> представлен в HTML версии 5, он позволяет пользователю выбрать значение в диапазоне. Bootstrap использует класс .form-control-range для применения к данному элементу.
Input range

<form>
   <div class="form-group">
      <label for="myRange1">Input Range (Default)</label>
      <input type="range" id="myRange1" min="5" max="10" step="0.01">
   </div>
   <div class="form-group">
      <label for="myRange2">Bootstrap Input Range</label>
      <input type="range" id="myRange2" min="5" max="10" step="0.01"
         class="form-control-range">
   </div>
</form>

file

<input type="file"> позволяет пользователю выбрать файл для загрузки. Bootstrap использует класс .form-control-file для применения к данному элементу.
Form file

<form>
   <div class="form-group">
      <label for="myFile1">Input File (Default)</label>
      <input type="file" id="myFile1">
   </div>
   <div class="form-group">
      <label for="myFile2">Bootstrap Input File</label>
      <input type="file" class="form-control-file" id="myFile2">
   </div>
</form>

date, time, datetime-local, week, month

Версия HTML5 представляет некоторые виды <input> позволяющие пользователю ввести информацию связанную с датой и временем. Bootstrap использует класс .form-control для применения к данным видам.
Input Date

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Form Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid mt-3">
         <h4 class="mb-5">Input type="date" (.form-control)</h4>
         <form>
            <div class="form-group">
               <label for="myDate1">Input Date (Default)</label>
               <input type="date" id="myDate1">
            </div>
            <div class="form-group">
               <label for="myDate2">Bootstrap Input Date</label>
               <input type="date" id="myDate2" class="form-control"
                  min="2018-01-01" max="2018-12-31" value="2018-05-18">
            </div>
         </form>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>
<input type="date">
Input Date

<div class="form-group">
   <label for="myDate2">Bootstrap Input Date</label>
   <input type="date" id="myDate2" class="form-control"
      min="2018-01-01" max="2018-12-31" value="2018-05-18">
</div>
<input type="datetime-local">
Input Datetime-Local

<div class="form-group">
   <label for="myDateTimeLocal2">Bootstrap Input DateTimeLocal</label>
   <input type="datetime-local" id="myDateTimeLocal2" class="form-control"
      min="2018-06-07T00:00" max="2018-06-14T00:00" value="2018-06-08T14:02">
</div>
<input type="time">
Input Time

<div class="form-group">
   <label for="myTime2">Bootstrap Input Time</label>
   <input id="myTime2" class="form-control"
      type="time"
      min="9:00" max="18:00" value="13:07">
</div>
<input type="week">
Input Week

<div class="form-group">
   <label for="myWeek2">Bootstrap Input Week</label>
   <input id="myWeek2" class="form-control"
      type="week"
      min="2018-W27" max="2018-W35" value="2018-W30">
</div>
<input type="month">
Input Month

<div class="form-group">
   <label for="myMonth2">Bootstrap Input Month</label>
   <input id="myMonth2" class="form-control"
      type="month"
      min="2018-03" value="2018-05">
</div>

7- Form Textarea, Select

Элемент <textarea> используется для создания зоны позволяющей пользователю вводить текстовые данные на одной или нескольких строках. Bootstrap использует класс .form-control для применения к данному элементу.
Textarea

<form>
   <div class="form-group">
      <label for="myTextarea1">Textarea (Default)</label>
      <textarea id="myTextarea1" rows="3">Line1<br>Line2</textarea>
   </div>
   <div class="form-group">
      <label for="myTextarea2">Bootstrap Textarea</label>
      <textarea id="myTextarea2" class="form-control" rows="3"></textarea>
   </div>
</form>
Элемент <select> используется для создания списка выборов и пользователь может сделать один или более выборов из этого списка.
Form Select

<form>
   <div class="form-group">
      <label for="mySelect1">Select (Single Select)</label>
      <select id="mySelect1" class="form-control">
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
   <div class="form-group">
      <label for="mySelect2">Select (Multi Select)</label>
      <select id="mySelect2" class="form-control" multiple>
         <option value="js">Javascript</option>
         <option value="css">Css</option>
         <option value="bootstrap" selected>Bootstrap</option>
      </select>
   </div>
</form>

8- Disabled Form

В основном, вы можете испоьзовать атрибут disabled для <input>,<texarea>,<select> чтобы отключить их. Но если вы хотите отключить все эти элементы, оберните (wrap) их с помощью <fieldset disabled>.
Примечание: Атрибут disabled у <fieldset> может не работать с некоторыми браузерами. Например IE версии 11 или старее. Поэтому вам нужно использовать кастомизированный Javascript для данных браузеров.
fieldset disabled

<form>
   <fieldset disabled>
      <div class="form-group">
         <label for="myEmail">Email</label>
         <input type="email" id = "myEmail" class="form-control" placeholder="Email">
         <label for="myPassword">Password</label>
         <input type="password" id="myPassword" class="form-control" placeholder="Password">
         <button type="submit" class="btn btn-primary">Submit</button>
      </div>
   </fieldset>
</form>

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.