Большая часть нашей работы в качестве дизайнеров веб-сайтов — это умение хорошо выглядеть и хорошо функционировать. Мы тратим много времени, чтобы сделать каждый аспект нашего сайта визуально привлекательным, интуитивно понятным, удобным для пользователя, доступным и в целом красивым. Наши формы не являются исключением! Наши формы должны быть красивыми, простыми в использовании и должны соответствовать остальной части нашего сайта. Мы можем сделать это легко с помощью CSS.
Процесс не сложный, вы просто можете узнать, что делает каждый тег, и как его стилизовать. Первое, что нам нужно сделать, это ввести наш HTML. Ниже приведен HTML-код в нашем образце формы.
<form> <div> <h1>Contact Form :</h1> <label> <span>Your name</span><input id="name" type="text" name="name" /> </label> <label> <span>Email Address</span><input id="email" type="text" name="email" /> </label> <label> <span>Subject</span><input id="subject" type="text" name="subject" /> </label> <label> <span>Message</span><textarea id="feedback" name="feedback"></textarea> <input type="button" value="Submit Form" /> </label> </div> </form> Вы заметите, что в HTML я использовал слова, имена и идентификаторы, которые имеют смысл. Они соответствуют тому, что вы ожидаете, что каждое поле будет называться. Каждое поле обернуто в метку тега, чтобы нам было проще его стилизовать. Наша форма выглядит довольно просто без какого-либо стиля, как вы можете видеть из примера ниже:
Наша форма не имеет структуры, цвета и индивидуальности. Мы можем изменить это с помощью небольшого кода. Во-первых, мы собираемся стилизовать сам тег формы.
form { background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px); background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px); background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px); margin: auto; position: relative; width: 550px; height: 450px; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; font-style: italic; line-height: 24px; font-weight: bold; color: #09C; text-decoration: none; border-radius: 10px; padding: 10px; border: 1px solid #999; border: inset 1px solid #333; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); }
Приведенный выше код может выглядеть как глоток, но он довольно прост, когда разбит. Плоские цвета могут быть очень скучными, поэтому добавление небольшого градиента может нарушить монотонность и придать вашему дизайну некоторое измерение. Это делается с помощью стиля фона. При использовании этого свойства и градиентов, вы должны включить определенные префиксы для определенных браузеров, таких как Firefox, иначе они не будут отображаться. Оба говорят одно и то же. Создайте линейный градиент, начните снизу, используйте средне-серый и светло-серый цвета и растушуйте его до 175 пикселей.
Так как именно здесь будет храниться вся ваша форма, я решил центрировать форму в браузере, установив поле auto. Установка позиции на Относительная предназначена для выравнивания элемента позже, так что объяснение еще впереди. Я указал ширину и высоту формы, используемые шрифты и назначил ее жирным шрифтом, курсивом, размером 14px и высотой строки (расстояние между строками текста) 24px.
Радиус границы дает нам закругленные углы для наших коробок. Увеличьте число для более закругленных углов. Отступы дают некоторое пространство между текстом и краем формы, чтобы текст не выходил за границы вашей формы и ее закругленных углов.
Вы можете создать тонкие границы для контраста и размерности. Я также добавил тени блока в общую форму, поэтому, если это станет всплывающей формой, это добавит измерение и заставит форму выглядеть так, как будто она плавает на остальной части сайта. Это популярная техника сейчас. Это еще один стиль, который требует, чтобы вы указали правильный префикс, чтобы он появился. Ваша форма должна выглядеть примерно так:
Далее мы должны стилизовать область ввода. Вот где текст фактически вводится в каждое поле.
input { width: 375px; display: block; border: 1px solid #999; height: 25px; -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); }
Код, показанный выше, выделяет все области ввода текста и устанавливает их ширину 375 пикселей, а настройка дисплея блокирует их наложение по вертикали. Добавление границы в 1 пиксель помогает выделить каждую область ввода, а установка высоты 25 пикселей дает пользователю достаточно места для визуального ввода текста.
Я добавил тень для измерения, но не забудьте включить префикс для каждого браузера. Первые 2 цифры определяют смещение тени. Положительные числа толкают тень вправо и вверх, а отрицательные числа толкают ее влево и вниз. 3-е число определяет, насколько размыта тень. Чем выше число, тем больше размытие. Внутри круглых скобок первые три числа определяют красные, зеленые и синие значения тени, а десятичное число определяет непрозрачность самой тени. 1 — непрозрачность 100%, а 0,1 — непрозрачность 10%. После добавления этих стилей ваша форма должна начать обретать форму и выглядеть как на рисунке ниже:
Все выровнено, но обратите внимание, что кнопка отправки была затронута b стилизацией ширины. Мы исправим это позже. Область сообщений выглядит неправильно, но мы можем легко это исправить.
textarea#feedback { width: 375px; height: 150px; }
Вы можете указать ширину и высоту напрямую, но это по-прежнему не приводит к тому, что текстовая область совпадает с другими полями.
Мы должны установить свойство display для block вручную, чтобы оно выполнялось так же, как области ввода.
textarea#feedback { width: 375px; height: 150px; display: block; }
Теперь, когда все выровнено правильно, мы можем приступить к исправлению кнопки отправки. CSS, который нам нужно исправить, довольно прост:
button { width: 100px; position: absolute; right: 20px; bottom: 20px; background: #09C; color: #fff; font-family: Tahoma, Geneva, sans-serif; height: 30px; border-radius: 15px; border: 1p solid #999; } input.button:hover { background: #fff; color: #09C; }
Мы выбираем кнопку с именем submit и определяем ее ширину в 100px и устанавливаем ее абсолютную позицию. Как мы упоминали ранее, мы разработали форму, чтобы иметь относительную позицию. Это работает так, что когда вы устанавливаете что-то, чтобы иметь абсолютную позицию, он ищет последний элемент, у которого его позиция установлена в относительную позицию. Если этот элемент вложен в элемент с относительной позицией, его абсолютная позиция относительно этого элемента. Другими словами, кнопка отправки будет расположена где-то внутри границ контейнера формы. Я определил, что это будет 20px справа и снизу с этими соответствующими стилями.
Я установил синий фон, а текст белый. Я дал ему определенную высоту 30 пикселей и закругленные углы. У меня также есть 1px серая рамка. Это нормальное состояние для вашей кнопки отправки.
Вы заметите, что я определил состояние наведения для кнопки отправки. Определенные здесь стили переопределяют исходный стиль, когда пользователь наводит курсор на кнопку. Я изменил фон на белый, а текст — на синий, давая пользователю очень контрастный эффект, когда он наводит курсор на кнопку.
Вот нормальное состояние:
Вот состояние наведения:
Структура нашей формы готова. Вы можете остановиться здесь, и у вас будет отличная форма, все стилизованные под CSS. Тем не менее, вы можете сделать еще один шаг, добавив немного удобного для пользователя стиля в области ввода текста, чтобы пользователь мог определить, где он печатает. Вы можете сделать это с небольшим количеством CSS:
textarea:focus, input:focus { border: 1px solid #09C; }
Это говорит браузеру, что если у человека выбран текстовый ввод или текстовая область, ему необходимо добавить синюю рамку размером 1 пиксель вокруг активной области ввода, чтобы пользователь знал, где он находится в форме. Это всего лишь немного больше, что очень ценится многими пользователями.
Вывод
Вы можете делать замечательные вещи с помощью CSS, включая создание красивых веб-форм для ваших пользователей. Приложив немного CSS и немного фантазии, вы можете сделать что-то столь же скучным, как заполнение формы, гораздо более приятным для любого, кто посещает ваш сайт.
Ниже вы найдете демонстрацию CodePen с примером, который мы создали в этом посте:
Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как « Формирование стилей с помощью CSS» .
Создавайте собственные формы с нуля с помощью HTML5 и CSS3 — наш курс по формам CSS уже здесь, и он бесплатный с пробной версией SitePoint Premium !
Комментарии к этой статье закрыты. У вас есть вопрос о CSS? Почему бы не спросить об этом на наших форумах ?