Bootstrap - Компоненты форм: Полное руководство для начинающих

Здравствуйте, будущие веб-разработчики! Я рад отправиться в это путешествие с вами, когда мы исследуем чудесный мир компонентов форм Bootstrap. Как someone, кто teaches computer science на протяжении более десяти лет, я могу заверить вас, что овладение этими концепциями изменит вашу карьеру в веб-разработке. Так что погружаемся в!

Введение в компоненты форм Bootstrap

Прежде чем мы начнем, позвольте поделиться быстрой историей. У меня был студент, который мучался с созданием форм. Он тратил часы на выравнивание вводов и их красивое оформление. Затем он discovered Bootstrap form controls, и это было как если бы лампочка зажглась над его головой! Вот сила Bootstrap - он делает сложное простым.

Компоненты форм Bootstrap - это предварительно стилизованные элементы, которые позволяют пользователям вводить данные на вашей веб-странице. Они адаптивны, настраиваемы и невероятно просты в использовании. Давайте рассмотрим каждый тип подробнее.

Размеры

Одна из первых вещей, которую вы хотите learn, это как изменять размер ваших компонентов форм. Bootstrap предлагает три размера: малый, стандартный и большой.

<input class="form-control form-control-lg" type="text" placeholder="Large input">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder="Small input">

В этом примере мы создали три поля ввода разных размеров. Класс form-control является базовым классом для всех компонентов форм в Bootstrap. Добавление form-control-lg делает его большим, а form-control-sm делает его маленьким.

Текст формы

Иногда вам нужно предоставить дополнительную информацию о поле формы. Вот где текст формы comes in handy.

<label for="inputPassword5" class="form-label">Пароль</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Ваш пароль должен быть от 8 до 20 символов, содержать буквы и цифры и не должен содержать пробелов, специальных символов или emoji.
</div>

Здесь мы добавили полезный текст под вводом пароля. Класс form-text стилизует этот текст соответствующим образом, делая его выделенным как дополнительную информацию.

Отключено

Может быть, у вас возникнут ситуации, когда вы хотите отключить определенные компоненты форм. Bootstrap делает это легко:

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<textarea class="form-control" placeholder="Disabled textarea" aria-label="Disabled textarea example" disabled></textarea>

Добавив атрибут disabled, мы сделали эти компоненты форм неудаляемыми. Они будут отображаться серыми,indicating пользователю, что их нельзя изменить.

Только для чтения

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

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

Атрибут readonly делает ввод неудаляемым, но позволяет фокусироваться на нем.

Простой текст только для чтения

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

<div class="mb-3 row">
<label for="staticEmail" class="col-sm-2 col-form-label">Электронная почта</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
</div>
</div>

Класс form-control-plaintext удаляет стилизацию поля формы по умолчанию, делая его appear как простой текст.

Ввод файла

Вводы файлов позволяют пользователям загружать файлы. Вот как вы можете создать один:

<div class="mb-3">
<label for="formFile" class="form-label">Пример стандартного ввода файла</label>
<input class="form-control" type="file" id="formFile">
</div>

Это создает поле ввода файла, стилизованное Consistently с другими компонентами форм Bootstrap.

Ввод файла с использованием размеров

Как и другие компоненты форм, вводы файлов могут быть изменены по размеру:

<div class="mb-3">
<label for="formFileSm" class="form-label">Пример малого ввода файла</label>
<input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
<label for="formFileLg" class="form-label">Пример большого ввода файла</label>
<input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

Мы используем те же классы для изменения размера, что и раньшe: form-control-sm и form-control-lg.

Ввод файла с использованием атрибутов

Вы также можете настраивать вводы файлов с использованием атрибутов:

<div class="mb-3">
<label for="formFileMultiple" class="form-label">Пример ввода нескольких файлов</label>
<input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

Атрибут multiple позволяет пользователям выбирать более одного файла.

Цвет

Bootstrap даже поддерживает вводы цвета:

<label for="exampleColorInput" class="form-label">Выбор цвета</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Выберите ваш цвет">

Это создает ввод выбора цвета, стилизованный Consistently с другими компонентами форм Bootstrap.

Списки данных

Списки данных предоставляют list predefined options для поля ввода:

<label for="exampleDataList" class="form-label">Пример списка данных</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Начните ввод...">
<datalist id="datalistOptions">
<option value="San Francisco">
<option value="New York">
<option value="Seattle">
<option value="Los Angeles">
<option value="Chicago">
</datalist>

Это создает поле ввода с предложениями автозаполнения из списка данных.

Итог методов компонентов форм Bootstrap

Вот таблица, summarizing методы, которые мы рассмотрели:

Метод	Описание
Размеры	Изменение размера компонентов форм с использованием классов, таких как form-control-lg и form-control-sm
Текст формы	Добавление дополнительного текста к компонентам форм с использованием класса form-text
Отключено	С деление компонентов форм неудаляемыми с использованием атрибута disabled
Только для чтения	С деление компонентов форм неудаляемыми, но фокусируемыми с использованием атрибута readonly
Простой текст только для чтения	Отображение информации как простого текста с использованием класса form-control-plaintext
Ввод файла	Создание вводов для загрузки файлов с использованием type="file"
Ввод файла с использованием размеров	Изменение размера вводов файлов с использованием классов для изменения размера
Ввод файла с использованием атрибутов	Настройка вводов файлов с использованием атрибутов, таких как multiple
Цвет	Создание вводов выбора цвета с использованием type="color"
Списки данных	Предоставление предложений автозаполнения с использованием элемента <datalist>

И вот и все! Вы только что узнали о компонентах форм Bootstrap. Помните, что практика делает мастера. Попробуйте интегрировать эти элементы в свои собственные проекты, и вскоре вы будете создавать красивые, адаптивные формы с легкостью.

Счастливого кодирования, будущие веб-разработчики!

Credits: Image by storyset