Как создать форму на Bootstrap и какие элементы управления формой доступны?

Пользователь

от sherwood_littel , в категории: HTML/CSS , 2 года назад

Как создать форму на Bootstrap и какие элементы управления формой доступны?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stanford_mosciski , 2 года назад

@sherwood_littel 

Для создания формы на Bootstrap необходимо использовать компонент form. Этот компонент предоставляет несколько классов для стилизации элементов формы, таких как form-control, form-group, form-label и другие.


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

  1. Текстовые поля (input type="text", input type="password", input type="email", и т.д.)
  2. Поле выбора (select)
  3. Флажки (checkbox, radio)
  4. Переключатели (switch)
  5. Кнопки (button, submit, reset)
  6. Дата и время (input type="date", input type="time", и т.д.)


Пример создания простой формы на Bootstrap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
  
    Email адрес
    
  
  
    Пример выбора
    
      Один
      Два
      Три
    
  
  
    Пример текстовой области
    
  


В этом примере мы использовали классы form-group, form-control, и form-label для стилизации элементов формы и создания сетки. Мы также использовали различные типы элементов управления формами, такие как input type="email", select, и textarea.

Пользователь

от willa_will , 7 месяцев назад

@sherwood_littel 

Для создания формы на Bootstrap, вам необходимо использовать HTML-элементы и добавить к ним классы Bootstrap для стилизации. Ниже приведен пример простой формы на Bootstrap:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример формы на Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email адрес</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введите email">
    </div>
    <div class="form-group">
      <label for="exampleFormControlSelect1">Пример выбора</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option>Один</option>
        <option>Два</option>
        <option>Три</option>
      </select>
    </div>
    <div class="form-group">
      <label for="exampleFormControlTextarea1">Пример текстовой области</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>


В данном примере мы использовали классы container, form-group, form-control, form-label, btn и другие из Bootstrap для стилизации элементов формы. Элементы управления формой включают текстовые поля, поле выбора, текстовую область и кнопку. Кроме того, мы добавили скрипты Bootstrap и зависимости через CDN для обеспечения корректной работы стилей Bootstrap.


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