Предыдущий ролик Следующий ролик  

Видео урок: Размещение текстового поля ввода

Bootstrap 3: добавь интерактивность на свой сайт

В последней части курса мы создадим контактную форму для сайта отеля Лэндон, и я дам вам для этого исходный файл. Он называется "contact.html". Через минуту я покажу вам, где он находится в Sublime Text, но сначала я хочу обратить ваше внимание на отличный курс Джо Марини "HTML5: Веб-формы в деталях". Это та область HTML, с которой не все могут быть знакомы, - как закодировать форму с нуля. И если вы не знаете, как это сделать, но хотели бы узнать больше, то этот курс прекрасно вам подойдет.

Все стили для формы, которые я собираюсь использовать здесь, включены в стандартную документацию Bootstrap на сайте getbootstrap.com. Если вы нажмете на ссылку CSS, а затем прокрутите страницу вниз до заголовка "Forms", то найдете инструкцию по созданию различных элементов формы самыми разными способами. Кое-что мы будем использовать, но здесь куча полезных вещей, и я бы советовала вам заглянуть на сайт и просмотреть их, особенно теперь, когда вы уже умеете работать с Bootstrap.

Итак, наша исходная страница HTML выглядит следующим образом. Это страница обратной связи, она очень просто оформлена, и честно говоря, ее немного трудно воспринимать. На ней запрашивается информация, которая может быть полезной отелю, например, ваше имя, какой номер вас интересует, но нам очень трудно ориентироваться на этой странице, так как мы не можем быть уверены, где заканчиваются вопросы и где начинаются переключатели. Итак, нам нужно привести в порядок внешний вид этой страницы и ее код HTML. Давайте перейдем в Sublime Text и откроем contact.html.

Верхняя часть страницы кажется очень знакомой. Она такая же, как и в двух других документах, с которыми мы работали. Итак, первые десять строк - это секция head. Затем начинается код для панели навигации. И только в строке 42 мы переходим к основной части страницы, которая начинается с блока с классом row и формы под названием "Contact Us". Итак, мы начинаем со строки 44. Вот сам тег form, и как видите, ему присвоен атрибут role со значением form.

Это для целей доступности. Чего здесь не хватает, так это действия для формы. Что произойдет, когда мы нажмем кнопку "Submit"? Создание кода отправки данных выходит далеко за рамки этого курса. Вам понадобится посмотреть какой-нибудь другой курс, чтобы понять, как писать код для отправки информации, скажем, на электронную почту, или записи ее в базу данных, например. Эти темы рассматриваются в других курсах на lynda.com. Мы же будем иметь дело только с внешним видом формы, а не с ее функциональностью.

Также я сделала для вас кое-что еще. Я поместила каждый из элементов, или большинство из них, во всяком случае, в блок div с классом form-group. Это класс Bootstrap, и я использую его по следующей причине. Дело в том, что когда я смотрю на эту страницу, то без дополнительной разметки я не могу понять, где начинается тот или иной набор виджетов, и где он заканчивается.

Мне не совсем понятно, как отделить эти элементы друг от друга. Поэтому я добавила эти блоки с классом form-group, который используется, когда нужно объединить несколько элементов вместе. Итак, одна группа начинается на строке 47 и включает метку "Your name" и поле, в которое вы должны ввести ваше имя. Вот еще одна группа, которая начинается на строке 51. Метка "What kind of room are you interested in" и несколько переключателей. Другая группа начинается на строке 66, и она содержит переключатели "да/нет", которые позволяют выбрать комнату для курящих или для некурящих.

И у нас есть еще одна группа, которая начинается на строке 75. Здесь можно выбрать континент из вариантов, доступных в выпадающем списке. Наконец, на строке 88 начинается группа для ввода комментариев. В нее входят метка "Comments" и текстовая область. И на строке 92 есть еще одна группа, которая содержит флажок для подписки на новостную рассылку и поле для адреса электронной почты. ОК, вот как эта страница настроена по умолчанию, и вы уже видели, как она выглядит.

По умолчанию метки находятся слишком близко к полям ввода. И в этом видео я хочу рассмотреть эти связки и изменить расположение элементов с помощью табличной системы Bootstrap, с которой к настоящему моменту вы уже хорошо знакомы. Мы использовали эту табличную систему в некоторых классах, которые присваивали к блокам div при создании целых веб-страниц, а также для работы с неупорядоченным списком миниатюр и расположения их на странице.

Мы можем использовать тот же набор классов в формах. Таким образом, с помощью этой табличной системы я могу разместить метку "Your Name" напротив поля ввода - так она будет выглядеть лучше, чем сейчас. Давайте сейчас перейдем в Sublime Text и добавим эту разметку. На строке 47 есть div с классом form-group. В него мы и добавим необходимый код. Прежде всего, в теге label добавьте атрибут for со значением name.

Это способ ассоциировать метку с соответствующим ему полем ввода, которое в нашем случае называется "name". Мы также добавим к этой метке класс, и на этот раз я хочу добавить col-sm-2. Таким образом, слова "Your Name" будут занимать две колонки. Теперь давайте спустимся ниже и заключим поле ввода в блок div, а затем присвоим ему класс col-sm-10.

Вот наше поле ввода, и после него мы закрываем div. Итак, теперь мы должны увидеть слова "Your Name" с левой стороны экрана в относительно узкой колонке, и вероятно, поле ввода для нас будет слишком широким. Поэтому нам нужно добавить к тегу input на строке 50 класс form-control. ОК, давайте сохраним эту страницу, вернемся в браузер и нажмем "Обновить".

И здесь вы увидите, что метка "Your Name" занимает две колонки, и напротив нее находится поле ввода, которое занимает десять колонок. Давайте посмотрим, как это будет выглядеть при меньшем размере экрана. Как видите, элементы адаптируются, как и ожидалось, пока мы не встретим точку перехода к маленькому разрешению, около 768 пикселей. В этот момент элементы разместятся вертикально, метка "Your Name" будет сверху, а поле ввода - снизу.

Так они будут выглядеть намного лучше на маленьких экранах мобильных телефонов. ОК. Таким образом, вы можете использовать табличную систему для оформления каких угодно элементов в формах. Пока это был только один пример того, где вы можете ее применять.