Как сделать форму css
Перейти к содержимому

Как сделать форму css

  • автор:

Стили HTML форм

В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!

Почему так сложно стилизовать виджеты форм с помощью CSS?

На заре Интернета, примерно в 1995 году, в HTML 2 были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.

Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.

Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.

Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации HTML форм (en-US) .

Не все виджеты созданы равными, когда задействован CSS

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

Хорошая

Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:

Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.

Плохая

Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.

Они включают в себя элемент , но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент placeholder не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.

Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм». (en-US)

The ugly

Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including , , and elements. The file picker widget is also known not to be stylable at all. The new and elements also fall in this category.

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you’ll be able to style. We explore how to do this in the article How to build custom form widgets (en-US) .

Basic styling

To style elements that are easy to style (en-US) with CSS, you shouldn’t face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.

Search fields

Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you’ll have to tweak it with the -webkit-appearance proprietary property. We discuss this property further in the article: Advanced styling for HTML forms (en-US) .

Example
form> input type="search" /> form> 
input[type="search"]  border: 1px dotted #999; border-radius: 0; -webkit-appearance: none; > 

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the -webkit-appearance property, whereas the second is rendered using -webkit-appearance:none . This difference is noticeable.

Fonts and text

CSS font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). However, browsers’ behaviors are often inconsistent. By default, some widgets do not inherit font-family and font-size from their parents. Many browsers use the system default appearance instead. To make your forms’ appearance consistent with the rest of your content, you can add the following rules to your stylesheet:

button, input, select, textarea  font-family: inherit; font-size: 100%; > 

The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform’s default font style in use. On the right are the same elements, with our font harmonization style rules applied.

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

There’s a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.

Box model

All text fields have complete support for every property related to the CSS box model ( width , height , padding , margin , and border ). As before, however, browsers rely on the system default styles when displaying these widgets. It’s up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you’ll face a little difficulty if you want to give them a consistent size.

This is because each widget has their own rules for border, padding and margin. So if you want to give the same size to several different widgets, you have to use the box-sizing property:

input, textarea, select, button  width: 150px; margin: 0; -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */ -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */box-sizing: border-box; > 

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

In the screenshot above, the left column is built without box-sizing , while the right column uses this property with the value border-box . Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform’s default rules for each kind of widget.

Positioning

Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:

Построение форм

Формы являются неотъемлемой частью Интернета, так как они предлагают сайтам метод сбора информации от пользователей и обработки запросов, а также элементы управления практически для любого мыслимого применения. С помощью элементов управления или полей, формы могут запросить небольшой объём информации — часто это поисковый запрос, имя пользователя или пароль. Или большой объём информации — возможно, данные о посылке, платёжная информация или предложение работы.

Мы должны знать как создавать формы чтобы получить входные данные от пользователя. В этом уроке мы обсудим, как использовать HTML для разметки формы, какие элементы использовать для захвата разных типов данных и как стилизовать формы с помощью CSS. Мы не станем слишком углубляться в то, как информация из формы обрабатывается на стороне сервера. Обработка форм представляет собой глубокую тему, вне области этой книги; здесь мы будем придерживаться создания и стилизации форм.

Инициализация формы

Чтобы добавить форму на страницу мы будем использовать элемент . Данный элемент определяет, где на странице появятся элементы управления. Кроме того, элемент обёртывает все элементы включенные в форму, подобно элементу .

К элементу может применяться горстка различных атрибутов, наиболее распространёнными из которых являются action и method . Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы. Оба эти атрибута имеют отношение к отправке и обработке данных.

Текстовые поля и текстовые области

Когда дело доходит до сбора текстовой информации от пользователей, есть несколько разных элементов, доступных для получения данных в формах. В частности, для сбора данных на основе текста или строки применяются текстовые поля и текстовые области. Эти данные могут включать в себя отрывки текста, пароли, номера телефонов и другую информацию.

Текстовые поля

Одним из основных элементов, используемых для получения текста от пользователей, является элемент . Данный элемент включает атрибут type для определения, какой тип информации будет получен в элементе управления. Наиболее популярное значение атрибута type — это text , который обозначает ввод одной строки текста.

Наряду с установкой атрибута type , хорошей практикой будет также дать элементу атрибут name . Значение атрибута name применяется в качестве имени элемента управления и отправляется вместе с входными данными на сервер.

Демонстрация текстового поля

Элемент является самостоятельным, то есть он задействует только один тег и не оборачивает какой-либо контент. Значение элемента обеспечивается его атрибутами и их соответствующими значениями.

Первоначально было только два текстовых значения атрибута type — text и password (для ввода паролей), однако HTML5 привёз с собой несколько новых значений атрибута type .

Эти значения были добавлены, чтобы обеспечить чёткое смысловое значение для полей ввода, а также предоставить лучшее управление пользователям. Если браузер не понимает одно из этих HTML5-значений атрибута type , он автоматически вернётся к значению text . Ниже приведён список новых типов HTML5.

Следующие элементы показывают некоторые из этих значений атрибута type из HTML5 в использовании, а на рисунках показано, как эти уникальные значения могут выглядеть в iOS. Обратите внимание, что различные значения обеспечивают разные элементы управления, все они делают сбор информации от пользователей проще.

Элемент <input></p>
<p> со значением date у атрибута type для iOS7″ width=»240″ /></p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<!-- 4tehsnabgenie -->
<script src=

Рис. 10.01. Элемент со значением date у атрибута type для iOS7

Элемент <input></p>
<p> со значением time у атрибута type для iOS7″ width=»240″ /></p>
<p>Рис. 10.02. Элемент со значением time у атрибута type для iOS7</p>
<p><img decoding=

Рис. 10.04. Элемент со значением url у атрибута type для iOS7

Элемент <input></p>
<p> со значением number у атрибута type для iOS7″ width=»240″ /></p>
<p>Рис. 10.05. Элемент со значением number у атрибута type для iOS7</p>
<p><img decoding=

Демонстрация текстовой области

Поля множественного выбора и меню

Помимо текстовых полей, HTML также позволяет пользователям выбирать данные, используя множественный выбор и раскрывающиеся списки. Есть несколько разных вариантов и полей для этих элементов формы, каждый из которых имеет свои отличительные преимущества.

Переключатели

Переключатели — это простой способ, позволяющий пользователям сделать быстрый выбор из небольшого списка вариантов. Переключатели дают пользователю выбрать только один вариант в отличие от нескольких.

Чтобы создать переключатель, используется элемент со значением radio у атрибута type . Каждый переключатель должен иметь одинаковое значение атрибута name , чтобы все они в группе были связаны друг с другом.

С текстовыми полями их значение определяется тем, что пользователь в них набирает; с переключателями пользователь делает множественный выбор. Таким образом, мы должны определить входное значение. Используя атрибут value мы можем установить конкретное значение для каждого элемента .

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

 Пятница Суббота Воскресенье

Демонстрация переключателей

Флажки

Флажки очень похожи на переключатели. Они используют те же атрибуты и шаблоны, за исключением значения атрибута type . Разница между ними состоит в том, что флажки позволяют пользователям выбрать несколько значений и связать их все с одним именем, в то время как переключатели ограничивают пользователей одним значением.

 Пятница Суббота Воскресенье

Демонстрация флажков

Выпадающие списки

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

Для создания выпадающего списка мы будем применять элементы и . Элемент оборачивает все пункты меню, а каждый пункт меню размечен с помощью элемента .

Атрибут name располагается в элементе , а атрибут value располагается в элементах , вложенных в элемент . Таким образом, атрибут value в каждом элементе связан с атрибутом name элемента .

Каждый элемент оборачивает текст (который виден пользователям) отдельного пункта в списке.

Подобно логическому атрибуту checked у переключателей и флажков, для выпадающего меню можно использовать логический атрибут selected , чтобы предварительно выделить пункт для пользователей.

 

Демонстрация выпадающего списка

Множественный выбор

Логический атрибут multiple при добавлении к элементу для стандартного выпадающего списка позволяет пользователю выбрать более одного варианта из списка одновременно. Кроме того, с помощью логического атрибута selected , добавленного к более чем одному элементу , в меню можно заранее выбрать несколько вариантов.

Размером элемента можно управлять с помощью CSS и он должен быть скорректирован соответствующим образом для множественного выбора. Возможно, есть смысл информировать пользователей, что для выбора нескольких вариантов они должны удерживать клавишу Shift во время щелчка, чтобы сделать выбор.

 

Демонстрация множественного выбора

Кнопки в форме

После того, как пользователь вводит запрашиваемую информацию, кнопки позволяют пользователю пустить эту информацию в дело. Чаще всего для обработки данных используются поле или кнопка для отправки.

Поле для отправки

Когда пользователь щёлкает по кнопке, данные формы обрабатываются после её заполнения. Кнопка для отправки создаётся с помощью элемента со значением submit у атрибута type . Атрибут value применяется для указания текста, который отображается внутри кнопки.

Демонстрация поля для отправки

Кнопка для отправки

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

Элемент выполняет то же самое, что и элемент со значением submit у атрибута type . Однако, он включает в себя открывающий и закрывающий теги, которые могут обернуть другие элементы. По умолчанию, элемент действует, как если у атрибута type задано значение submit , поэтому атрибут type и его значение можно по желанию опустить.

Вместо использования атрибута value для управления текстом в кнопке для отправки, будет показан текст, который пишется между открывающим и закрывающим тегами элемента .

  

Демонстрация кнопки для отправки

Другие поля

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

Скрытое поле

Скрытые поля предоставляют способ передачи данных на сервер без отображения их пользователям. Скрытые поля обычно используются для отслеживания кодов, ключей или другой информации, которая не имеет отношения к пользователю, но может быть полезна при обработке формы. Эта информация не отображается на странице, однако может быть найдена путём просмотра исходного кода страницы. По этой причине она не должна применяться для уязвимой или защищённой информации.

Чтобы создать скрытое поле используйте значение hidden атрибута type . Дополнительно включает в себя соответствующие значения атрибутов name и value .

Поле для файла

Чтобы позволить пользователям добавить файл в форму, вроде прикрепления файла к письму, используйте значение file атрибута type .

Демонстрация поля для файла

К сожалению, стилизация с помощью CSS элемента , у которого значение атрибута type задано как file , является трудной задачей. Каждый браузер содержит свой собственный стиль поля по умолчанию и ни один не даёт много свободы, чтобы переопределить этот стиль. JavaScript и другие решения могут быть использованы для этого, но они несколько сложны для построения.

Организация элементов формы

Знать, как получить данные с полей формы, это лишь половина дела. Другая половина — это организация элементов формы и полей в удобном порядке. При взаимодействии с формами пользователи должны понять что от них требуется и как предоставить запрашиваемую информацию.

С помощью , и мы можем лучше организовать формы и направлять пользователей правильно их завершать.

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

могут включать в себя атрибут for , его значение должно быть таким же, как значение атрибута id у элемента, с которым связан . Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на и передать фокус нужному полю формы.

 

Демонстрация label

При желании, может обернуть поля формы, такие как переключатели или флажки. Это позволяет опустить атрибуты for и id .

    

Демонстрация label с вложением

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

 
Имя пользователя Пароль

Демонстрация fieldset

Элемент предоставляет подпись или заголовок для элемента . Элемент оборачивает текст, описывающий элементы управления формы, которые находятся внутри . Разметка должна включать в себя элемент сразу после открывающего тега . На странице подпись появится в левом верхнем углу рамки .

 
Вход в систему Имя пользователя Пароль

Демонстрация legend

Атрибуты формы и полей

Для настройки всех различных форм, полей и элементов управления, существует ряд атрибутов и соответствующих значений. Эти атрибуты и значения выполняют несколько разных функций, таких как отключение полей и добавление проверки форм. Далее описаны некоторые часто используемые и полезные атрибуты.

disabled

Логический атрибут disabled выключает элемент управления таким образом, что он не доступен для взаимодействия или ввода. Заблокированные элементы не будут отправлять никакого значения на сервер для обработки формы.

Применение атрибута disabled к элементу отключит все элементы управления формы внутри группы.

 Имя пользователя 

Демонстрация disabled

placeholder

Атрибут placeholder в HTML5 предлагает подсказку или совет внутри элемента или , которая исчезает при щелчке по элементу управления или при получении фокуса. Это применяется, чтобы дать пользователям дальнейшую информацию о том, как поле формы должно быть заполнено, к примеру, использовать формат электронной почты.

 Email 

Основное различие между атрибутами placeholder и value в том, что текст value остаётся на месте, когда элемент управления получает фокус, пока пользователь не удалит его вручную. Это очень удобно для предварительно заполненных данных, таких как личная информация, но не для предоставления указаний.

Демонстрация placeholder

required

Логический атрибут required в HTML5 утверждает, что элемент формы должен содержать значение при отправке на сервер. Если у элемента формы нет значения, будет отображаться сообщение об ошибке с просьбой пользователю заполнить обязательное поле. В настоящее время стили сообщения об ошибке контролируются браузером и не могут быть оформлены в CSS. Некорректные элементы формы, с другой стороны, могут быть стилизованы с помощью псевдоклассов :optional и :required .

Проверка также специфична для конкретного типа элемента управления. Например, элемент со значением email у атрибута type потребует не только чтобы значение в поле существовало, но также чтобы это был корректный адрес электронной почты.

 Email 

Демонстрация required

Дополнительные атрибуты

Элементы форм также включают следующие атрибуты, но не ограничиваются ими. Пожалуйста, не стесняйтесь исследовать эти атрибуты при необходимости.

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

Пример формы для входа

Ниже приведён пример полной формы авторизации, которая включает в себя несколько разных элементов и атрибутов для иллюстрации того, что мы изучали до сих пор. Эти элементы затем стилизуются с помощью CSS.

 
Имя пользователя
*, *:before, *:after < box-sizing: border-box; >form < border: 1px solid #c6c7cc; border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; overflow: hidden; width: 240px; >fieldset < border: 0; margin: 0; padding: 0; >input < border-radius: 5px; font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; >.account-info < padding: 20px 20px 0 20px; >.account-info label < color: #395870; display: block; font-weight: bold; margin-bottom: 20px; >.account-info input < background: #fff; border: 1px solid #c6c7cc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); color: #636466; padding: 6px; margin-top: 6px; width: 100%; >.account-action < background: #f0f0f2; border-top: 1px solid #c6c7cc; padding: 20px; >.account-action .btn < background: linear-gradient(#49708f, #293f50); border: 0; color: #fff; cursor: pointer; font-weight: bold; float: left; padding: 8px 16px; >.account-action label

Демонстрация формы для входа

На практике

С пониманием того как строить формы, давайте создадим страницу регистрации для нашего сайта Styles Conference, чтобы мы могли начать собирать интерес и продавать билеты на мероприятие.

Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента с классом row чуть ниже вступления и вложенный элемент с классом grid непосредственно внутри элемента .

Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:

В качестве напоминания — класс row добавляет белый фон и обеспечивает некоторый вертикальный padding , в то время как класс grid выравнивает по центру наш контент в середине страницы и обеспечивает некоторый горизонтальный padding .

Внутри элемента с классом grid мы собираемся создать две колонки, одна 2/3, а другая 1/3 от ширины страницы. Колонка 2/3 будет элементом с левой стороны, которая говорит пользователям, почему они должны зарегистрироваться на нашей конференции. Колонка 1/3 будет элементом справа и предоставляет пользователям возможность регистрироваться на нашей конференции.

Мы добавим эти два элемента и соответствующие им классы col-2-3 и col-1-3 непосредственно внутрь элемента с классом grid . Так как эти элементы будут строчно-блочными, мы должны открыть комментарий сразу после закрывающего тега колонки 2/3, а затем закрыть этот комментарий непосредственно перед открывающим тегом колонки 1/3.

В целом, наш код должен выглядеть следующим образом:

Теперь внутри нашей колонке 2/3 добавим некоторые детали о нашем мероприятии и почему поучаствовать в нём будет хорошей идеей для начинающих дизайнеров и фронтенд-разработчиков. Мы сделаем это, используя несколько разных уровней заголовков (вместе с заранее установленными для них стилями), абзацем и маркированным списком.

В нашем элементе с классом col-2-3 код должен выглядеть следующим образом:

  • Более двадцати спикеров мирового класса
  • Один полный день мастер-классов и два полных дня презентаций
  • Состоится в Театре Чикаго, исторической достопримечательности
  • Август в Чикаго просто поражает

В данный момент наш маркированный список не содержит маркеры списка. Все стили браузера по умолчанию были выключены сбросом CSS, мы добавили всё обратно в уроке 1. Давайте создадим несколько пользовательских стилей специально для этого списка.

Чтобы сделать это, добавим класс why-attend к маркированному списку.

С этим добавленным классом создадим новый раздел для стилей страницы Регистрация в нижней части нашего файла main.css. В этом разделе мы будем использовать класс, чтобы выбрать маркированный список и добавить list-style как square , а также некоторые margin .

Новый раздел в нижней части нашего файла main.css должен выглядеть следующим образом:

/* ======================================== Регистрация ======================================== */ .why-attend

Раздел нашей страницы Регистрация завершён, так что теперь пришло время обратиться к регистрационной форме. Начнём с добавления атрибутов action и method к элементу . Так как мы не создали обработчик нашей формы, эти атрибуты будут просто служить заполнителем и должны быть пересмотрены.

Код для нашего элемента должен выглядеть следующим образом:

Далее, внутри элемента мы добавим элемент . Внутри него вставим набор элементов , которыми мы обернём поля формы.

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

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

  

Здесь мы видим, что каждое поле формы вложено в элемент . Поле для «Имя» использует элемент со значением атрибута type как text , в то время как поле «Email» использует элемент со значением email у атрибута type .

Оба поля формы — «Имя» и «Email» включают в себя логический атрибут required и атрибут placeholder .

Для поля «Количество билетов» применяется элемент и вложенные элементы . Сам элемент включает в себя логический атрибут required , а первый элемент включает логический атрибут selected .

Для поля комментариев используется элемент без каких-либо специальных модификаций. И, наконец, за пределами элемента содержится поле для отправки формы, которое формируется с помощью элемента со значением submit у атрибута type .

Форма на месте, пора добавить к ней стили. Мы начнём с нескольких стилей по умолчанию для самого элемента и для элементов , и .

В разделе Регистрация нашего файла main.css мы хотим добавить следующие стили:

form < margin-bottom: 22px; >input, select, textarea < font: 300 16px/22px "Roboto", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; >

Мы начали с размещения 22-пиксельного margin снизу формы, чтобы вертикальное пространство помогло отделить его от других элементов. Затем добавили некоторые шрифтовые свойства, в том числе насыщенность, размер, высота строки и семейство для всех элементов , и .

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

Добавим некоторые стили для элементов внутри . Поскольку мы можем добавить дополнительные элементы позже, добавим класс register-group к нашему существующему элементу , оттуда мы можем применить уникальные стили к элементам вложенных в него.

После того, как класс register-group находится на месте, мы добавим несколько стилей для элементов, вложенных в . Эти стили появятся в нашем файле main.css, ниже существующих стилей формы.

.register-group label < color: #648880; cursor: pointer; font-weight: 400; >.register-group input, .register-group select, .register-group textarea < border: 1px solid #c6c9cc; border-radius: 5px; color: #888; display: block; margin: 5px 0 27px 0; padding: 5px 8px; >.register-group input, .register-group textarea < width: 100%; >.register-group select < height: 34px; width: 60px; >.register-group textarea

Вы заметите, что большинство из этих свойств и значений вращаются вокруг блочной модели, которую мы рассмотрели в уроке 4. Мы, прежде всего, настроили размеры разных полей формы, гарантируя, что они располагаются должным образом. Помимо добавления некоторых стилей блочной модели, мы настроили color и font-weight у нескольких элементов.

Пока всё идёт хорошо и наша форма становится довольно красивой. Единственный оставшийся элемент, который ещё не стилизован — это кнопка для отправки. Для кнопок у нас уже есть некоторые существующие стили и мы можем применить их здесь. Если мы мысленно перенесёмся к нашей главной странице, наш раздел hero содержит кнопку, которая получает несколько стилей через класс btn .

Добавим значение btn к атрибуту class , наряду с новым классом btn-default к нашей кнопке для отправки. Мы будем использовать имя класса btn-default специально, так как эта кнопка выводится на белом фоне и стиль для кнопок по умолчанию передвинется вперёд.

Теперь наша кнопка для отправки делит некоторые общие стили с кнопкой на главной странице. Мы воспользуемся классом btn-default чтобы применить некоторые новые стили конкретно к нашей кнопке.

Возвращаясь назад к разделу с кнопками в нашем файле main.css, добавим следующее:

.btn-default < border: 0; background: #648880; padding: 11px 30px; font-size: 14px; >.btn-default:hover

Эти новые стили определяют размер и фон нашей кнопки, затем комбинируются с существующими стилями класса btn и создают финальную презентацию нашей кнопки.

Наша страница Регистрация закончена и посетители теперь могут начать бронировать билеты.

Наша страница регистрации с формой

Рис. 10.07. Наша страница регистрации с формой

Демонстрация и исходный код

Ниже вы можете скачать исходный код сайта на данный момент.

Резюме

Формы играют большую роль в том, как пользователи взаимодействуют с сайтами, предоставляют им информацию и работают с ними. Мы предприняли все правильные шаги, чтобы не только узнать как создавать формы, но и как их стилизовать.

Напомним быстро, что мы обсудили в этом уроке:

  • как инициализировать форму;
  • способы получения текстовой информации от пользователей;
  • разные элементы и методы для создания нескольких вариантов выбора и меню;
  • какие элементы и атрибуты лучше всего использовать для отправки данных формы на обработку;
  • как лучше организовать формы, задать структуру и значение полям формы;
  • набор атрибутов, которые помогают собрать больше подходящих данных.

Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.

Ресурсы и ссылки

  • Forms на HTML Dog
  • Form Element наa Mozilla Developer Network
  • Input Element на Mozilla Developer Network

См. также

  • Выравнивание элементов форм
  • Загрузка файлов
  • Кнопки
  • Кнопки
  • Отправка данных формы
  • Отправка данных формы
  • Переключатели
  • Переключатели
  • Поле для ввода пароля
  • Поле для пароля
  • Поле со списком
  • Поле со списком
  • Пользовательские формы
  • Скрытое поле
  • Создание форм
  • Стилизация переключателей
  • Стилизация флажков
  • Сумасшедшие формы
  • Текстовое поле
  • Текстовое поле
  • Флажки
  • Флажки
  • Формы
  • Формы в Bootstrap 4
  • Формы в Bootstrap 5
  • Формы в HTML

Формы — Основы верстки контента

Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Для этого в HTML существуют специальные конструкции, которые говорят браузеру, какие поля может использовать пользователь и как их обрабатывать.

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

Создание формы

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

Сервер — удаленный компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определенному адресу. Этот адрес указан сейчас в вашем браузере.

Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдает вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках верстки мы не можем влиять на то, как обработается результат. Результат верстки — набор тегов, с помощью которых браузер соберет данные и отправит их на сервер.

Тег может принимать несколько различных атрибутов. Они не являются обязательными, но их использование может серьезно повлиять на работу. Самым главным из них является атрибут action . Этот атрибут позволяет указать путь к файлу на сервере, который будет обрабатывать отправленные данные. Если этот атрибут не указан, то данные будут отправлены на ту же страницу, где форма и находится.

 action="/forms/helper.php"> 

Смысл этого действия вы лучше поймете, если будете заниматься Backend разработкой. Например, на языке PHP или Python. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.

Поля формы

Одного тега недостаточно для полноценного создания формы, ведь пользователь должен ввести какие-то данные. Самый простой способ — дать какое-то поле для ввода текста, куда пользователь может ввести информацию. В HTML для этого используется два тега:

  • — одиночный тег, в котором располагается небольшая информация. Это может быть телефон, email, дата рождения, имя и так далее.
  • — парный тег, позволяющий пользователю ввести длинное сообщение. Это могут быть комментарии к заказу, отзыв.

textarea

Самый простой тег — . Его задача — создать большое поле для ввода текста.

В примере вы можете увидеть два атрибута тега : cols и rows . Они отвечают за количество символов и строк, которые доступны внутри . Если контента будет больше, то появится полоса прокрутки.

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

Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:

  • Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.
  • Использовать свойство resize со значением none . Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте Can I use .

input

Большую группу полей можно создать, используя тег , главным атрибутом которого является type . Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если ее не использовать.

В этом уроке рассмотрим одни из самых популярных значений атрибута type .

type="text"

Самый простой вид , который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение — удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег .

  type="text">  

Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю. Первое, что приходит в голову — добавить перед полем заголовок или параграф. Да, это создаст видимость описания поля. Но только видимость! С точки зрения семантики в таком варианте нет никакой связи между текстом и полем ввода. Это критично для пользователей, которые пользуются скринридерами, так как они не смогут связать название и поле для ввода.

Скринридер (Screen Reader) — устройство для чтения текста с экрана. Используется слепыми или слабовидящими людьми.

Для связи поля и его названия используется тег , внутри которого вставляется текст. Чтобы связать и используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.

  • Связь по идентификатору. Для этого тегу устанавливается уникальный id . Для тега устанавливается атрибут for , значением которого является идентификатор ввода.
  for="name">Ваше имя  id="name" type="text">  
  • Вложение внутрь . Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.
  Ваше имя  type="text">   

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

Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймете все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only . Такой элемент будет невидимым для пользователя, но его сможет «прочитать» скринридер. Название класса является сокращением от screen reader only .

.sr-only  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; > 
  for="name" class="sr-only">Ваше имя  id="name" type="text"> 

type="radio"

Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприемников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приемников.

Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть еще один важный атрибут — name . Он является уникальным для группы радиокнопок.

  Выберите радиостанцию   type="radio" name="radio-fm" value="87.1 FM"> 87.1 FM   type="radio" name="radio-fm" value="95.5 FM"> 95.5 FM   type="radio" name="radio-fm" value="101.4 FM"> 101.4 FM   type="radio" name="radio-fm" value="103.2 FM"> 103.2 FM   

Помимо атрибута name у радиокнопок используется атрибут value . Внутри него находится то значение, которое отправится на сервер.

type="checkbox"

Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие — возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего, это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью , но грамотнее будет использовать чекбоксы.

  Ваши любимые блюда   type="checkbox" name="dishes" value="pizza"> Пицца   type="checkbox" name="dishes" value="burger"> Бургеры   type="checkbox" name="dishes" value="pasta"> Паста   

Списки

Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть еще один способ — использование списка.

Создание списка очень похоже на создание списка текста. В формах для этого используется тег , пункты которого лежат внутри тегов .

  Категория  name="category">  value="computer">Компьютеры  value="phone" selected>Телефоны  value="appliances">Бытовая техника   

В примере появился новый атрибут — selected . Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.

Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked

Для списков доступен еще один интересный атрибут — multiple . С его помощью список становится похож на чекбоксы и позволяет выбрать сразу несколько пунктов.

  Категория  name="category" multiple>  value="computer">Компьютеры  value="phone" selected>Телефоны  value="appliances" selected>Бытовая техника   

Отправка формы

В прошлом разделе мы рассмотрели различные способы взаимодействия пользователя и формы. Но это не имеет никакого смысла, если форма не будет отправлена. Для этого нужно создать элемент, при взаимодействии с которым будет отправлена форма.

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

  • Создание с типом submit . В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value .
  • Использование парного тега . Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.

Разделение участков формы

Cтрашный сон пользователя — длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Можно отделять секции с помощью заголовков или визуально. Но браузеры предоставляют специальный механизм для разделения участков формы на логические секции — fieldset . Их можно рассматривать как альтернативу тегу , но только для форм. В качестве заголовка выступает тег .

   Данные о пользователе Имя  type="text" name="name">   Фамилия  type="text" name="surname">    Способ доставки Курьер  type="radio" name="delivery" value="courier">   Самовывоз  type="radio" name="delivery" value="pickup">   Заказать  

Текст внутри текстового поля

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

За вывод такого текста отвечает атрибут placeholder , значением которого является текст, выводимый до ввода символов в поле

   Данные о пользователе Имя  type="text" name="name" placeholder="Введите ваше имя">   Фамилия  type="text" name="surname" placeholder="Введите вашу фамилию">   Отправить  

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Создание HTML форм

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки , подсказки и т.д. Весь код формы заключается в элемент .

Большая часть информации веб-форм передаётся с помощью элемента . Для ввода одной строки текста применяется элемент , для нескольких строк — элемент . Элемент создает выпадающий список.

Элемент создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.

   

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

 
Контактная информация Имя E-mail

fieldset

Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:

input:focus

Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и (только в один элемент каждой формы).

Пример создания формы регистрации

 

Регистрация

Пол

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

form-default

Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.

.form-wrap < width: 550px; background: #ffd500; border-radius: 20px; >.form-wrap * .profile < width: 240px; float: left; text-align: center; padding: 30px; >form < background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; >.form-wrap:after, form div:after < content: ""; display: table; clear: both; >form div < margin-bottom: 15px; position: relative; >h1 < font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; >h1:after < content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); >/********************** стилизация элементов формы **********************/ label, span < display: block; font-size: 14px; margin-bottom: 8px; >input[type="text"], input[type="email"] < border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; >input[type="text"]:focus, input[type="email"]:focus < box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); >.radio label < position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; >.radio input < position: absolute; opacity: 0; >.radio-control < position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; >.male:before < content: "\f222"; font-family: FontAwesome; font-weight: bold; >.female:before < content: "\f221"; font-family: FontAwesome; font-weight: bold; >.radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control < box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); >.radio input:checked ~ .radio-control < color: red; >select < width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ >select::-ms-expand < display: none; /*убираем галочку в IE*/ >.select-arrow < position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; >button < padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; >/********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) < .form-wrap .profile, form h1 form >

Файл form.php

" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)) < mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; >?>

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *