Статья связана с репозиторием на GitHub.
В предыдущей статье я показал какие тэги есть в форме. Сейчас будет только кодинг: покажу как создать форму анкеты пользователя на основе описанного ранее.
Для начала надо понять что в анкете будет.
Итак, очевидно это фамилия, имя и отчество. Пол пользователя тоже нужно знать. Еще дата рождения и место рождения. Ну и пусть загрузит своё фото. Будет первым блоком вопросов.
Давайте проведем опрос пользователя о составе его семьи. Тут мы уточним состоит ли в браке наш пользователь. И еще, пожалуй, количество детей. Второй блок вопросов.
Сделаем третий блок вопросов о благосостоянии нашего пользователя. Работает или нет. Доход в месяц. Имеет ли квартиру и дачу.
Пожалуй хватит. Эти вопросы позволят показать использование input'ов и select'ов.
Приступим.
Для начала спроектируем нашу страницу. Создам новый index.html и index.css. У нас три условных блока информации: в первом спросим основную информацию, во втором - о семье, в третьем - о материальном положении.
Верстать буду на div полностью, поэтому сразу надо подумать как именно будут формироваться элементы. Существует такая "штука", как Bootstrap - его разработчики позиционируют свой продукт как многофункциональный интерфейсный инструментарий - крайне любопытный и на самом деле удобный продукт. Но... Не стану сейчас останавливаться на нём - просто использую их подход к формированию "координатной сетки" (ниже - описание класса .col).
Итак, чтобы подписи к полям и сами поля выглядели ровно на экране, создам в index.css такой набор классов:
form - форма будет 60% от ширины экрана, по центру стрницы с небольшим отступом сверху.
label - ширина поля с названием будет всегда 30% родительского элемента
.row - класс строки - здесь я определил, что ширина будет 100% от родителя и дочерние элементы располагаем в строку
.col - класс, описывающий "ячейку", содержащую заголовок и само поле ввода
.fill100 - класс для полей ввода, которые должны заполнить оставшееся пространство ячейки
Да, без примера не очень понятно. Сейчас будет HTML.
По простому если, то что я сделал: я объявил класс, как в таблице тэг tr (.row) и в него добавляю классы, аналогичные td в таблице (.col). В классах .col пишем всего две вещи: заголовок и поле ввода.
Исключение - указание пола пользователя. Тут у меня вложенные .col потому, что мне нужно указать два пола - мужской и женский, каждый со своим label. Также в CSS добавил класс .left для сдвига вложенного элемента влево (выровнял поля таким образом, хотя тут может быть и альтернативные варианты).
.left {margin-left: -12px;}
Теперь по аналогии сделаю вторую часть - про семью:
Так как я не переопределял все параметры в CSS, а оганичился только "склейкой" в строку и расстояниями между элементами, то вылез сдвиг во второй и последующих колонках, если в них обнаруживался checkbox или select. Разделил класс .col на .col2 (не имеющий сдвига) и .col - со сдвигом.
И добавлю третью часть:
В итоге у меня получилась вот такая форма:
Теперь займусь общими преобразованиями. Во-первых надо выделить анкету на экране - сделаю это рамкой с тенью. Добавлю цвет экрана:
body {background-color: lightgray;}
А у стилей формы допишу вот такие строки:
Здесь я объявил, что у формы заливка будет белого цвета, рамка толщиной 2 пикселя, с закруглением в 6 пикселей и путь будет тень в нижной правый угол тёмно-серого цвета.
Теперь содержимое формы откорректирую: сделаю расстояние между строками, добавлю отступы, сделаю название формы и добавлю загрузку файла.
а также добавил правило в стили для тэга h2 и контейнера с загрузкой файла:
h2, #fileContainer {width: 100%; text-align: center;}
Далее добавлю расстояние между строками и отступы по краям формы.
Теперь изменю внешний вид элементов (input и select). Кстати, пишу "вживую", так что... забыл кнопку отправки формы! Добавлю её и визуально разделю блоки.
По порядку стилизации:
[type="text"], [type="date"], select {
padding: 6px;
font-style: italic;
border-radius: 6px;
border: 1px solid darkgray;
}
Для всех текстовых полей и выпадающих списков: внутренний отступ в 6 пикселей со всех сторон, наклонный шрифт, и заменяю рамку на закруглённую темно серого цвета.
Добавил кнопку отправки формы: тёмно синего цвета, белым шрифтом, со светло-голубой закругленной рамкой, шрифт 18 пикселей, жирным шрифтом и внутренним отступом со всех сторон в 6 пикселей.
Осталось реализовать визуальное разделение. Тут все вообще просто. В коде там, где нужно, добавил
<div class="separator"></div>
И прописал для него стили:
.separator {
border-bottom: 1px solid darkgray;
margin: 30px 0 30px 0;
}
Тут указывется, что рамка должна быть видна только снизу блока. Она должны быть тёмно-серой. А также выше и ниже этого разделителя нужно сделать отступ в 30 пикселей.
Ну что, смотрим что получилось?
Все статьи попадают в "Оглавление канала". Не пропускаем новости!