Bootstrap (Часть 4) | Вертикальные формы, горизонтальные формы, встроенные формы
- Введение и установка
- Система сеток
- Кнопки, Глификоны, Таблицы
- Выпадающие и адаптивные вкладки
- Индикатор выполнения и Jumbotron
В этой статье мы научимся создавать формы. Формы используются почти на каждом веб-сайте и используются для сбора пользовательского ввода.
Формы :
Bootstrap предоставляет 3 типа макета формы, а именно:
- Вертикальные формы (по умолчанию)
- Горизонтальные формы
- Встроенные формы
- Разберем каждый из них отдельно:
- Вертикальные формы:
Прежде всего, мы инициализируем форму с помощью тега <form>. Мы заключим все метки и элементы управления формы в тег <div class = ”form-group”>. Это необходимо для оптимального расстояния между компонентами формы.
Теперь мы можем разработать форму в этих тегах в соответствии с нашими потребностями. Мы можем использовать метку, чтобы определить метку для элемента ввода. Помните, что атрибут <for> тега <label> должен быть равен атрибуту id связанного элемента, чтобы связать их вместе. После тега label можно ввести тег <input>, который указывает поле ввода, в которое пользователь может вводить данные. Класс, который будет использоваться внутри входного тега, должен быть class = ”form-control”. Также можно использовать атрибут placeholder, который указывает короткую подсказку, описывающую ожидаемое значение поля ввода.
Пример:<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css "></head><body><divclass="container"style="color:green"><h1>GeeksforGeeks</h1></div><divclass="container"><h4>Vertical Form</h4><formaction=""><divclass="form-group"><labelfor="id1">User Name</label><inputclass="form-control"type="text"id="id1"placeholder="Enter your User Name"></div><divclass="form-group"><labelfor="id2">Password</label><inputclass="form-control"type="password"id="id2"placeholder="Enter your password"></div><divclass="container"><buttontype="button"class="btn btn-success">Login</button><buttontype="button"class="btn btn-secondary">Register</button></div></form></div></body></html>Выход:
- Горизонтальные формы:
Горизонтальные формы отличаются от вертикальных не только количеством разметки, но и представлением формы. Чтобы сделать форму горизонтальной, добавьте class = ”form-horizontal” в элемент <form>. Если вы используете элемент <label>, вы должны использовать class = "control-label". Также помните, что вы можете использовать предопределенные классы сетки Bootstrap для выравнивания меток и групп элементов управления формы в горизонтальной компоновке.
Вы также можете добавить определенные стили к меткам и полю ввода. Добавьте любой из классов has-warning, has-success, has-error и т. Д. в теге <div>, который содержит класс, у которого есть группа форм для придания ему различных эффектов при выборе.
Пример:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css "></head><body><divclass="container"style="color:green"><h1>GeeksforGeeks</h1></div><divclass="container"><h4>Horizontal Form</h4><formaction=""class="form-horizontal"><divclass="form-group has-success"><labelclass="control-label col-sm-2"for="id1">Username</label><divclass="col-sm-6"><inputclass="form-control"type="text"id="id1"placeholder="Enter your User Name"></div></div><divclass="form-group has-success"><labelclass="control-label col-sm-2"for="id2">Password</label><divclass="col-sm-6"><inputclass="form-control"type="password"id="id2"placeholder="Enter your password"></div></div><divclass="container"><buttontype="button"class="btn btn-success">Login</button><buttontype="button"class="btn btn-secondary">Register</button><lebel><inputtype="checkbox">Remember me</lebel></div></form></div></body></html>Выход:
- Встроенные формы:
Как следует из названия, во встроенной форме все элементы встроены, выровнены по левому краю, а метки расположены рядом. Вам просто нужно добавить class = ”form-inline” в элемент формы.
Используя class = ”sr-only”, вы можете скрыть метки встроенных форм, которые иногда могут вызвать проблемы.
Вы также можете добавлять глификоны внутри форм. Для этого вам нужно добавить class = ”has-feedback” и добавить тег span, в котором присутствует глификон, после тега <input>. Не забудьте добавить form-control-feed как класс тега span.
Пример:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css "></head><body><divclass="container"style="color:green"><h1>GeeksforGeeks</h1></div><divclass="container"><h4>Inline Form</h4><br><formclass="form-inline"action="/action_page.php"><labelfor="email">Username:</label><inputtype="email"class="form-control"id="email"placeholder="Enter Username"name="email"><labelfor="pwd">Password:</label><inputtype="password"class="form-control"id="pwd"placeholder="Enter password"name="pswd"><buttontype="button"class="btn btn-danger">Login</button><buttontype="button"class="btn btn-secondary">Register</button></form></div></body></html>Выход:
Статья Харшита Гупты:
Харшит Гупта из Калькутты - активный блоггер, который очень заинтересован в написании о текущих событиях, технических блогах, историях и личном жизненном опыте. Помимо страсти к писательству, он также любит программировать и танцевать. В настоящее время он учится в IIEST и является активным участником блога geeksforgeeks.
Если вы также хотите продемонстрировать здесь свой блог, посетите GBlog, где вы можете писать в гостевом блоге на GeeksforGeeks.