Красивые формы для сайта – Красивая форма для сайта — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Коллекция из 15+ красивых форм регистрации и авторизации

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

Сегодня хотел поделиться своей подборкой красивых форм. Они могут стать прекрасным стартом для создания ваших, оригинальных web-элементов. В эту коллекцию попали наиболее удачные на мой взгляд формы. Они просты для установки, имеют большое разнообразие «свистелок», легко впишутся в адаптивную верстку, и просто эффектно смотрятся. Представленные формы соответствуют разным стилям: плоские, объемные, и ряд других. Все же, лучше один раз увидеть, чем 100 раз услышать.

Nice dark sign in form

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

Демо

Скачать

Red Login Form

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

Демо

Скачать

Log in/Sign up screen animation

Login Form on HTML5

Форма авторизации в виде стопки листов бумаги.

Демо

Скачать

Material Compact Login Animation

Sign In

Interactive Sign Up Form

Пошаговая форма регистрации. Хорошо смотрится с анимацией переходов.

Демо

Скачать

Fancy Forms

LogIn Form

DailyUI Challenge 001

Красивая фора с полупрозрачным фоном.

Демо

Скачать

Sign Up Form UI

Login Form — Modal

Log In Form CSS 2017

Sign In/Up Form Transitions

Authorization badge

Apple Login Form

А какая форма понравилась вам?

codyshop.ru

60 бесплатных HTML5 и CSS3 форм авторизации для сайта

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

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

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

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.

Скачать

Предварительный просмотр

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Скачать

Предварительный просмотр

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы.

Скачать

Предварительный просмотр

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных.

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

Если хотите выделиться и сохранить оригинальность, используйте форму входа №18. Кому-то нравятся простые страницы входа, в то время как другие хотят иметь дополнительные преимущества.

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Скачать

Предварительный просмотр

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

Скачать

Разработано для форм подписки с использованием вкладок и меток.

Скачать

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

Скачать

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Скачать

Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое.

Скачать

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Скачать

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и :before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

Скачать

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

Скачать

Блочная форма авторизации — это небольшой сюрприз.Попробуйте ввести имя пользователя “admin” и пароль “1234”, чтобы увидеть ее в действии.

Скачать

Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации.

Скачать

Данная публикация представляет собой перевод статьи «60 Free HTML5 And CSS3 Login Forms For Your Website 2018» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Формы

24.07.2018 5 865 Form

Stepper.js — увеличение/уменьшение значений в input type=»number» заданным шагом

Скрипт позволяющий кастомизировать кнопки плюс/минус у поля input type=»number» в соответствии с дизайном. Настройки интервала значений и шага задаются через привычные атрибуты поля: step, max, min. Поля такого рода часто используются при указании количества товара помещаемого в корзину, а также управление товаром в самой корзине.

26.12.2017 10 188 Form

Веб форма авторизации и регистрации на сайте

Концепт формы авторизации и регистрации на сайте. Переключение между двумя видами взаимодействия происходит с приятной анимацией.

07.12.2017 6 691 Form

JQuery nice select — заменяем стандартный select

Легкий jQuery плагин, который заменяет стандартный select на кастомизированный dropdown.

14.04.2016 2 414 Form

Superplaceholder — другой взгляд на placeholder

superplaceholder.js — библиотека, которая покажет пользователю дополнительную информацию по заполнению полей форм за счет циклической смены подсказки placeholder в поле. Весит около 2кб. Хорошо работает на последних версиях браузеров. Для не поддерживаемых браузеров будет, так называема, graceful degradation.

22.03.2015 2 760 Form

Эффекты для текстовых полей

Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи. В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.

24.06.2014 1 878 Form

FancyText — текстовые эффекты для инпутов

FancyText — jQuery плагин плюс CSS3 анимация. Плагин позволяет из обычного текстового поля (input) получить составной элемент (input + label) с разнообразным количеством эффектов на выбор. Использование плагина очень простое: нужно добавить в HTML документ текстовое поле, добавить пользовательские атрибуты и вызвать функцию FancyText.

13.03.2014 4 321 Form

Selectric — пользовательский select

Быстрый, простой и легкий jquery плагин позволяющий оформить html тег select в том стиле, который пришел на ум вашему дизайнеру.

09.02.2014 2 662 Form

Пользовательский input type file

FileInput — это плагин заменяющий стандартный input type=»file», позволяя его стилизовать с помощью CSS.

14.01.2013 2 813 Form

Красивое оформление кнопок-переключателей

Toggles — это легкий jQuery плагин позволяющий создать простые и красиво оформленные кнопки переключения.

09.01.2013 2 023 Form

Пользовательское оформление input

Плагин customInput позволит оформить теги input так, как вздумается дизайнеру.

13.12.2012 3 495 Form

Стильная форма регистрации на CSS3

Простая и стильная регистрационная форма для сайта. Для её работы требуется jQuery и плагин placeholder.

28.10.2012 8 437 Form

Формы входа для сайта

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

pcvector.net

20 бесплатных наборов HTML UI элементов для сайта / HTML шаблоны / Постовой

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

В чем плюсы использования готовых UI элементов сайта в проекте?

Вся нудная работа выверстывания мелких элементов сделана уже за вас.
Анимация форм, кнопок и прочих элементов уже внедрена и настроена в соответствии с современными тенденциями веб-дизайна.
Каждый набор HTML UI компонентов — это, как правило, уже не первый релиз. Весь JS отдебажен и стабильно работает. При этом опытным путем выявлены наиболее юзабильные решения того или иного элемента из набора.

Где можно использовать наборы HTML UI элементов?

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

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

Итак. К вашему вниманию 20 бесплатных наборов HTML UI элементов для вашего сайта. Не забываем подписываться на соц. сети.

Смотрите также:

Shards

Бесплатный набор из элементов пользовательского интерфейса. Он базируется на css-фреймворке Bootstrap 4. Его базисом являются принципы и правила Material Design, который за все время своего существования успел хоть частично внедриться практически в каждый современный проект.

Element

Довольно приятный HTML тулкит для сайта. Содержит в себе практически все элементы пользовательского интерфейса, включая диалоговые окна, формы, собственные сетки для адаптивного веб-дизайна, уведомления, меню и много чего другого. Все элементы и их анимация воспринимаются легко и не грузят страницу. Базируется на Vue.js 2.0

Design Blocks

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

Material Design for Bootstrap

Бесплатный шаблон для css-фреймворка Bootstrap 3 в оформлении Google Material Design. К сожалению, он не обладает такой динамикой как оригинальный Google Material Design на Angular, но пытается ее имитировать.

Bootflat UI Kit

Основанный на Twitter Bootstrap 3.1.0 набор пользовательских элементов в плоском стиле. Это стилизация стандартного набора из Bootstrap 3.

Responsive Flat UI kit

Адаптивный набор элементов интерфейса в HTML, который базируется на Bootstrap 3. Содержит кнопки, формы поиска, элементы для электронной коммерции и пр.

Flat UI

Достаточно качественный UI набор в плоском стиле, который основан на адаптивном CSS фреймворке Bootstrap 3. Огромным плюсом является наличие PSD исходников.

Pure UI Kit

Если вам нужны сетки, формы, кнопки, таблицы или меню, то этот UI фреймворк может вам подойти. Он очень легкий. Вес всего 3.8KB.

Flat design UI – HTML5 + CSS3

Не отличающийся особым качеством минимальный набор UI элементов в исполнении HTML5 + CSS3. Помимо этого имеет оригинальный дизайн.

Photon

Это набор десктопных элементов интерфейса MAC OS в исполнении HTML/CSS.

Metro UI CSS

Метро-интерфейсы отошли в прошлое, но даже сегодня данная стилистика привлекает огромную аудиторию. Признаюсь, я один из них. Даже сегодня существуют задачи, где METRO UI может понадобиться. К вашему вниманию довольно большой и качественный UI Фреймворк на HTML в стиле METRO. Практически все элементы в своеобразном оформлении доступны бесплатно: это плиточные экраны, формы, чекбоксы, радиокнопки, кнопки, меню, пагинации и еще огромное количество всякого интересного. Всего фреймворк вмещает в себя 70+ компонентов UI. А еще это работа украинского разработчика.

Propeller

Бесплатный CSS-фреймворк в стиле Material Design на Bootstrap. Включает в себя около 25 компонентов, которые, как ни странно, имеют довольно большое сходство с оригинальной динамикой Material Design на Angular. Также есть премиум-версия.

Material Design Lite

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

Semantic UI

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

UIkit

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

INK

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

Uilang

Очень легкая минималистичная библиотека для создания ненагруженного легкого пользовательского интерфейса.

HTML KickStart

Качественный и простой в плане дизайна HTML UI фреймворк для создания хороших прототипов. Распространяется абсолютно бесплатно и, я думаю, в нем также можно найти что-то интересное.

YAUI Kit v2

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

postovoy.net

Веб-формы на сайте — виды форм, советы по их улучшению и примеры

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

Основные виды форм на сайте

Расскажем о видах форм и их особенностях, которые могут встретится на сайте.

Форма для обратной связи

Встречается почти на всех коммерческих сайтах. Цель данной формы — получить данные клиента для дальнейшего звонка менеджера. Как правило форма открывается после нажатия кнопки вверху сайта:

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

Форма для подписки на рассылку

Еще один способ получить данные клиента и осуществлять продажи через email-маркетинг.

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

Форма для заказа

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

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

Форма оформления покупки

Встречается в интернет-магазинах. После перехода в корзину или в личный кабинет открывается форма для оформления заказа и покупки товаров, оплаты, указания способа доставки и прочее:

Хорошим тоном считается разделение формы для новых и старых клиентов. Если пользователь постоянно пользуется продукцией интернет-магазина, поля с доставкой и другими персональными полями заполняются автоматически. Например, в интернет-магазине «Лабиринт» уже знают последний адрес доставки и предлагают использовать его снова:

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

Форма авторизации и регистрации

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

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

Форма для заказа консультации

Для тех клиентов, которые хотят «только спросить» маркетологи придумали форму консультации — если у пользователя есть вопросы, они могут написать их в специальную форму и получить ответ по e-mail или телефону.

Иногда такие решения заменяет встроенный онлайн-консультант, который оформлен в виде чата со специалистом:

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

Совет 1. Разместите форму в заметном месте

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

Как лучше размещать формы на сайте?

1. Использовать шапку сайта

Хедер — первый элемент, который клиент видит на сайте и обращается к нему в случае перехода на другую страницу, поиска информации. В хедере размещают яркие кнопки для вызова формы. Лучше делать это рядом с контактными данными в правом верхнем углу. Например, на сайте заказа пиццы выделили кнопку «Корзина», после нажатия переход в форму оформления покупки:

2. Главный экран

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

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

3. В контенте

Чтобы «поймать» клиента, формы размещают в середине контента:

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

4. Футер

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

Совет 2. Сократите количество полей

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

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

Также можно упростить ввод настройками — автоматическим определением города, выпадающими списками, маску ввода по телефонному номеру, подсказками и прочим:

Если ваша форма все же подразумевает большое количество вопросов (например, в форме оформления покупки), лучше разбить ее заполнение на несколько шагов.

Совет 3. Продумайте названия полей

Если пользователю непонятно, какую информацию от него хотят, он не будет заполнять форму и совершать целевое действие. Названия полей должны быть короткими, четкими и понятными для клиента. Также лучше избегать лишних слов в названиях, например, вместо «Введите имя» просто существительное «Имя» и так далее. Исключение — поля, где глагол обязателен для понимания сути запроса, к примеру, «Повторите пароль» или «Забыли пароль?».

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

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

Надписи на кнопках также должны быть конкретными — не «Записаться» а «Записаться на консультацию». Так клиент понимает, какое действие совершает.

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

Названия полей обычно располагаются слева или сверху.

Совет 4. Учитывайте все состояния полей

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

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

Так мы обозначили ошибку пользователя, если он не поставил галочку в форме:

Также важно указывать, какие поля являются обязательными для заполнения. Обычно их обозначают *.

Совет 5. Оформите подтверждение после корректного заполнения формы

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

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

Совет 6. Позаботьтесь о безопасности

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

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

Совет 7. Добавьте мотивации

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

Люди заполняют формы ради результата. Какую еще мотивацию можно добавить для клиента?

1. Что-то материальное

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

2. Быстрые результаты

Укажите сроки, в которые клиент получит заказ. «Сделаем и доставим через 3 дня» лучше чем «Сроки и доставка рассчитываются индивидуально». Также работают такие формы как «Перезвоним через 40 секунд». Клиенту станет интересно проверить, так ли это на самом деле.

3. Персонализированное предложение

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

Совет 8. Я не робот!

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

Если есть потребность в использовании капчи, наилучший вариант — reCaptcha от Google. Это простая кнопка, которая не требует усилий при заполнении.

Совет 9. Подбирайте цвета

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

Что касается полей и кнопок, лучше разделять их по цвету на главные и второстепенные. Например, использовать яркий цвет для кнопки «Регистрация» и приглушенные оттенки для «Пропустить».

Также нужно обращать внимание на фон за формой. Как правило, при вызове небольшой формы фон затемняется и не отвлекает пользователя.

Совет 10. Тестирование формы

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

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

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

idbi.ru

улучшенные возможности, новые типы полей и атрибуты

Опубликовано: 5 мая 2015 Обновлено: 30 апреля 2019

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

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

Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.

До появления HTML5 веб-формы представляли собой набор нескольких элементов <input type="text">, <input type="password">, завершающихся кнопкой <input type="submit">. Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.

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

Рис. 1. Улучшенные веб-формы с помощью HTML5

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

1. Элемент <form>

Основу любой формы составляет элемент <form>...</form>. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.

Таблица 1. Атрибуты тега <form>
Атрибут	Значение / описание
`accept-charset`	Значение атрибута представляет собой разделенный пробелами список кодировок символов, которые будут использоваться для отправки формы, например, `<form accept-charset="ISO-8859-1">`.
`action`	Обязательный атрибут, который указывает `url` обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, `action.php`), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию. В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута `action` можно указать значение `#`. Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись: `<form action="mailto:адрес вашей электронной почты" enctype="text/plain"></form>`
`autocomplete`	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: `on` — означает, что поле не защищено, и его значение можно сохранять и извлекать, `off` — отключает автозаполнение для полей форм.
`enctype`	Используется для указания MIME-типа данных, отправляемых вместе с формой, например, `enctype="multipart/form-data"`. Указывается только в случае `method="post"`. `application/x-www-form-urlencoded` — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как `+`, а специальный символ, например, такой как `!` будет закодирован шестнадцатиричной форме как `%21`. `multipart/form-data` — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы. `text/plain` — указывает на то, что передается обычный (не html) текст.
`method`	Задает способ передачи данных формы. Метод `get` передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида `www.anysite.ru/form.php?var1=1&var2=2`. Имена и значения переменных присоединяются к адресу сервера после знака `?` и разделяются между собой знаком `&`. Все специальные символы и буквы, отличные от латинских, кодируются в формате `%nn`, пробел заменяется на `+`. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет. Метод `post` применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения. `<form action="action.php" enctype="multipart/form-data" method="post"></form>`
`name`	Задает имя формы, которое будет использоваться для доступа к элементам формы через сценарии, например, `name="opros"`.
`novalidate`	Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
`target`	Указывает окно, в которое будет направлена информация: `_blank` — новое окно `_self` — тот же фрейм `_parent` — родительский фрейм (если он существует, если нет — то в текущий) `_top` — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <p><label for="name">Имя <em>*</em></label><input type="text"></p>
    <p><label for="email">E-mail</label><input type="email"></p>
  </fieldset>
<p><input type="submit" value="Отправить"></p>
</form>

Рис. 2. Группировка элементов формы с помощью <fieldset>

Таблица 2. Атрибуты тега <fieldset>
Атрибут	Значение / описание
`disabled`	Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера `<fieldset>`, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — `<fieldset disabled>`.
`form`	Значение атрибута должно быть равно атрибуту `id` элемента `<form>` в этом же документе. Указывает на одну или несколько форм, к которым принадлежит данная группа элементов. На данный момент атрибут не поддерживается ни одним браузером.
`name`	Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута `id`.

3. Создание полей формы

Элемент <input> создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.

С помощью css-стилей можно изменить размер шрифта, тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение. Ширина поля задается свойством width.

Таблица 3. Атрибуты тега <input>
Атрибут	Значение / описание
`accept`	Определяет тип файла, разрешенных для отправки на сервер. Указывается только для `<input type="file">`. Возможные значения: file_extension — разрешает загрузку файлов с указанным расширением, например, `accept=".gif"`, `accept=".pdf"`, `accept=".doc"` `audio/` — разрешает загрузку аудиофайлов `video/` — разрешает загрузку видеофайлов `image/*` — разрешает загрузку изображений media_type — указывает на медиа-тип загружаемых файлов.
`alt`	Определяет альтернативный текст для изображений, указывается только для `<input type="image">`.
`autocomplete`	Отвечает за запоминание введенных в текстовое поле значений и автоподстановку их при последующем вводе: `on` — означает, что поле не защищено, и его значение можно сохранять и извлекать, `off` — отключает автозаполнение для полей форм.
`autofocus`	Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.
`checked`	Атрибут проверяет, установлен ли флажок по умолчанию при загрузке страницы для полей типа `type="checkbox"` и `type="radio"`.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно атрибуту `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное поле формы.
`formaction`	Задает `url` файла, который будет обрабатывать введенные в поля данные при отправке формы. Задается только для полей типа `type="submit"` и `type="image"`. Атрибут переопределяет значение атрибута `action` самой формы.
`formenctype`	Определяет, как будут кодироваться данные полей формы при отправке на сервер. Переопределяет значение атрибута `enctype` формы. Задается только для полей типа `type="submit"` и `type="image"`. Варианты: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы кодируются перед отправкой (пробелы заменяются на символ `+`, специальные символы преобразуются в значения ASCII HEX) `multipart/form-data` — символы не кодируются `text/plain` — пробелы заменяются на символ `+`, а специальные символы не кодируются.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки данных формы на сервер. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `method` формы. Варианты: `get` — значение по умолчанию. Данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер: `URL?имя=значение&имя=значение` `post` — данные формы отправляются в виде http-запроса.
`formnovalidate`	Определяет, что данные полей формы не должны проверяться при отправке формы. Переопределяет значение атрибута `novalidate` формы. Можно использовать без указания значения атрибута.
`formtarget`	Определяет, где выводить ответ, полученный после отправки формы. Задается только для полей типа `type="submit"` и `type="image"`. Переопределяет значение атрибута `target` формы. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` – загружает ответ в родительский фрейм `_top` – загружает ответ во весь экран framename – загружает ответ во фрейм с указанным именем.
`height`	Значение атрибута содержит количество пикселей без указания единицы измерения. Устанавливает высоту поля формы типа `type="image"`, например, `<input type="image" src="img_submit.gif">`. Рекомендуется одновременно устанавливать как высоту, так и ширину поля.
`list`	Является ссылкой на элемент `<datalist>`, содержит его `id`.Позволяет предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле.
`max`	Позволяет ограничить допустимый ввод числовых данных максимальным значением, значение атрибута может содержать целое или дробное число. Рекомендуется использовать этот атрибут вместе с атрибутом `min`. Работает со следующими типами полей: `number`, `range`, `date`, `datetime`, `datetime-local`, `month`, `time` и `week`.
`maxlength`	Атрибут задает максимальное количество символов, вводимых в поле. Значение по умолчанию 524288 символов.
`min`	Позволяет ограничить допустимый ввод числовых данных минимальным значением.
`multiple`	Позволяет пользователю ввести несколько значений атрибутов, разделяя их запятой. Применяется в отношении файлов и адресов электронной почты. Указывается без значения атрибута.
`name`	Определяет имя, которое будет использоваться для доступа к элементу `<form>`, к примеру, в таблицах стилей css. Является аналогом атрибута `id`.
`pattern`	Позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Например, `pattern="[a-z]{3}-[0-9]{3}"` — квадратные скобки устанавливают диапазон допустимых символов, в данном случае — любые строчные буквы, число в фигурных скобках указывает, что нужны три строчные буквы, после которых следует тире, далее — три цифры в диапазоне от 0 до 9.
`placeholder`	Содержит текст, который отображается в поле ввода до заполнения (чаще всего это подсказка).
`readonly`	Не позволяет пользователю изменять значения элементов формы, выделение и копирование текста при этом доступно. Указывается без значения атрибута.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения. Если пользователь попытается отправить форму, не введя в это поле требуемое значение, то на экране отобразится предупреждающее сообщение. Указывается без значения атрибута.
`size`	Задает видимую ширину поля в символах. Значение по умолчанию — 20. Работает со следующими типами полей: `text`, `search`, `tel`, `url`, `email` и `password`.
`src`	Задает `url` изображения, используемого в качестве кнопки отправки данных формы. Указывается только для поля `<input type="image">`.
`step`	Используется для элементов, предполагающих ввод числовых значений, указывает величину увеличения или уменьшения значений в процессе регулировки диапазона (шаг).
`type`	`button` — создает кнопку.
	`checkbox` — превращает поле ввода во флажок, который можно установить или очистить, например, У меня есть автомобиль
	`color` — генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
	`date` — позволяет вводить дату в формате дд.мм.гггг. День рождения:
	`datetime-local` — позволяет вводить дату и время, разделенные прописной английской буквой `Т` по шаблону дд.мм.гггг чч:мм. День рождения — день и время:
	`email` — браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. E-mail:
	`file` — позволяет загружать файлы с компьютера пользователя. Выберите файл:
	`hidden` — скрывает элемент управления, который не отображается браузером и не дает пользователю изменять значения по умолчанию.
	`image` — создает кнопку, позволяя вместо текста на кнопке вставить изображение.
	`month` — позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
	`number` — предназначено для ввода целочисленных значений. Его атрибуты `min`, `max` и `step` задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента. Укажите количество (от 1 до 5):
	`password` — создает текстовые поля в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки. Введите пароль:
	`radio` — создает переключатель — элемент управления в виде небольшого кружка, который можно включить или выключить. Вегетарианец:
	`range` — позволит создать такой элемент интерфейса, как ползунок, min / max — позволят установить диапазон выбора
	`reset` — создает кнопку, которая очищает поля формы от введенных пользователем данных.
	`search` — обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму. Поиск:
	`submit` — создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
	`text` — создает текстовые поля в форме, выводя однострочное текстовое поле для ввода текста.
	`time` — позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени. Укажите время:
	`url` — поле предназначено для указания URL-адресов. Главная страница:
	`week` — соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53. Укажите неделю:
`value`	Определяет текст, отображаемый на кнопке, в поле или связанный текст. Не указывается для полей типа file.
`width`	Значение атрибута содержит количество пикселей. Позволяет задать ширину полей формы.

4. Текстовые поля ввода

Элемент <textarea>...</textarea> используется вместо элемента <input type="text">, когда нужно создать большие текстовые поля. Текст, отображаемый как исходное значение, помещается внутрь тега. Размеры поля устанавливаются при помощи атрибутов cols – размеры по горизонтали, rows – размеры по вертикали. Высоту поля можно задать свойством height. Все размеры считаются исходя из размера одного символа моноширинного шрифта.

Таблица 4. Атрибуты тега <textarea>
Атрибут	Значение / описание
`autofocus`	Устанавливает фокус на нужном начальном текстовом поле автоматически.
`cols`	Устанавливает ширину через количество символов. Если пользователь вводит больше текста, появляется полоса прокрутки.
`disabled`	Отключает возможность редактирования и копирования содержимого поля.
`form`	Значение атрибута должно быть равно значению атрибута `id` элемента `<form>` в этом же документе. Определяет одну или несколько форм, которым принадлежит данное текстовое поле.
`maxlength`	Значение атрибута задает максимальное число символов для ввода в поле.
`name`	Задает имя текстового поля.
`placeholder`	Определяет короткую текстовую подсказку, которая описывает ожидаемое вводимое значение.
`readonly`	Отключает возможность редактирования содержимого поля.
`required`	Выводит сообщение о том, что данное поле является обязательным для заполнения.
`rows`	Указывает число, которое означает, сколько строк должно отображаться в текстовой области.
`wrap`	Определяет, должен ли текст сохранять переносы строк при отправке формы. Значение `hard` сохраняет перенос, а значение `soft` не сохраняет. Если используется значение `hard`, то должно указываться значение атрибута `cols`.

5. Раскрывающийся список

Списки дают возможность расположить большое количество пунктов компактно. Раскрывающиеся списки создаются при помощи элемента <select>...</select>. Они позволяют выбрать одно или несколько значений из предложенного множества. По умолчанию в поле списка отображается его первый элемент.

Для добавления в список пунктов используются элементы <option>...</option>, которые располагаются внутри <select>.

Для систематизации списков применяется элемент <optgroup>...</optgroup>, который создает заголовки в списках.

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

Таблица 5. Атрибуты тега <select>
Атрибут	Значение / описание
`autofocus`	Устанавливает автоматический фокус на элементе при загрузке страницы.
`disabled`	Отключает раскрывающийся список.
`form`	Определяет форму, которой принадлежит данный список. В качестве значения атрибута указывается идентификатор формы.
`multiple`	Дает возможность выбора одного или нескольких пунктов, для этого при выборе нужно нажать и удерживать нажатой клавишу `Ctrl`.
`name`	Определяет имя для выпадающего списка. Значение атрибута содержит название, отражающее тематику списка.
`required`	Выводит сообщение о том, что пользователь должен выбрать значение из раскрывающегося списка перед отправкой формы.
`size`	Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.

Таблица 6. Атрибуты тега <option>
Атрибут	Значение / описание
`disabled`	Делает недоступным для выбора элемент списка.
`label`	Задает укороченную версию для элемента, которая будет отражаться в выпадающем списке. Значение атрибута содержит текст, описывающий соответствующий пункт выпадающего списка.
`selected`	Отображает выбранный элемент списка по умолчанию при загрузке страницы браузером.
`value`	Указывает значение, которое будет отправлено на сервер при отправке формы.

Таблица 7. Атрибуты тега <optgroup>
Атрибут	Значение / описание
`disabled`	Отключает данную группу элементов списка для выбора.
`label`	Задает заголовок для группы элементов выпадающего списка. Значение атрибута содержит текст, недоступный для выбора, который будет располагаться над соответствующими пунктами списка. Текст выделяется в браузере жирным начертанием.

6. Надписи к полям формы

Надписи к элементам формы создаются с помощью элемента <label>...</label>. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label>, то атрибут for указывать не нужно.

<!-- с указанием атрибута for -->
<label for="comments">Когда вы последний раз летали на самолете?</label>
<textarea></textarea>

<!-- без атрибута for -->
<p><label>Кошка<input type="checkbox"></label></p>

Таблица 8. Атрибуты тега <label>
Атрибут	Значение / описание
`for`	Определяет, к какому полю формы привязан данный элемент. Можно создавать поясняющие надписи к следующим элементам формы: `<input>`, `<textarea>`, `<select>`. Значение атрибута содержит идентификатор поля формы.

7. Кнопки

Элемент <button>...</button> создает кликабельные кнопки. В отличие от кнопок, созданных <input> (<input type="submit"></input>, <input type="image">, <input type="reset">, <input type="button">), внутрь элемента <button> можно поместить контент — текст или изображение.

Для корректного отображения элемента <button> разными браузерами нужно указывать атрибут type, например, <button type="submit"></button>.

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

Таблица 9. Атрибуты тега <button>
Атрибут	Значение / описание
`autofocus`	Устанавливает фокус на кнопке при загрузке страницы.
`disabled`	Отключает кнопку, делая ее некликабельной.
`form`	Указывает на одну или несколько форм, которым принадлежит данная кнопка. Значение атрибута — идентификатор соответствующей формы.
`formaction`	Значение атрибута содержит url-адрес обработчика данных формы, отправляемых при нажатии на кнопку. Только для кнопки типа `type="submit"`. Переопределяет значение атрибута `action`, указанного для элемента `<form>`.
`formenctype`	Задает тип кодировки данных формы перед отправкой на сервер при нажатии на кнопки типа `type="submit"`. Переопределяет значение атрибута `enctype`, указанного для элемента `<form>`. Возможные значения: `application/x-www-form-urlencoded` — значение по умолчанию. Все символы перед отправкой будут закодированы. `multipart/form-data` — символы не кодируются. Используется в случае, когда с помощью формы загружаются файлы. `text/plain` — символы не кодируются, а пробелы заменяются на символ `+`.
`formmethod`	Атрибут определяет метод, который браузер будет использовать для отправки формы. Переопределяет значение атрибута `method`, указанного для элемента `<form>`. Указывается только для кнопок типа `type="submit"`. Возможные значения: `get` — данные из формы (пара имя/значение) добавляются в url-адрес и отправляются на сервер. Данный способ имеет ограничения по размеру отправляемых данных и не подходит для отправки паролей и конфиденциальной информации. `post` — данные из формы добавляются в виде http-запроса. Метод является более надежным и безопасным, чем `get` и не имеет ограничений по размеру.
`formnovalidate`	Атрибут задает, что данные формы не должны проверяться при отправке. Указывается только для кнопок типа `type="submit"`.
`formtarget`	Атрибут задает, в каком окне выводить результат после отправки формы. Указывается только для кнопок типа `type="submit"`. Переопределяет значение атрибута `target`, указанного для элемента `<form>`. `_blank` — загружает ответ в новое окно/вкладку `_self` — загружает ответ в то же окно (значение по умолчанию) `_parent` — загружает ответ в родительский фрейм `_top` — загружает ответ во весь экран `framename` — загружает ответ во фрейм с указанным именем.
`name`	Задает имя кнопки, значение атрибута — текст. Используется для ссылки на данные формы, после того как форма была отправлена, или для ссылки на данную кнопку (кнопки) в JavaScript.
`type`	Определяет тип кнопки. Возможные значения: `button` — кликабельная кнопка `reset` — кнопка сброса, возвращает первоначальное значение `submit` — кнопка для отправки данных формы.
`value`	Задает значение по умолчанию, отправляемое при нажатии на кнопку.

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции <input type="checkbox">, а переключатель — при помощи <input type="radio">.

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

Элемент <label> применяется при реализации выбора с помощью переключателей и флажков. Можно выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Для этого нужно поместить <input> внутрь элемента <label>.

html5book.ru

Дизайн контактных форм: 40+ оригинальных примеров

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

1. Aterlier Detour

Здесь форма контактов помещается в нижней части страницы при нажатии кнопки «связаться».Конструкция выглядит оригинально, особенно если сравнивать с другими подобными контактными формами.

2. Try Triangle

Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно.

3. Asvalia

Форма контактов в виде открытки — оригинально и броско.

4. Фото Marcol

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

5. Square 1 Media

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

6. Stan Gursky

Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.

7. Ctrln

Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте.

8. Denise Chandler

Разные яркие цвета дают возможность акцентировать внимание на различных кнопках-сигналах и полях, которые необходимо заполнить.

9. Carsonified

Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет)

10. David Hellmann

Привычно и легко — напишите письмо и подпишите конверт. Всю информацию доставят адресату.

11. Step2reality

Заполните форму контаков и ваши письма отправят на нужный почтовый ящик.

12. Xruiz

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

13. Silly Poems

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

14. Fseid

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

15. La Masa Mimatta

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

16. Fundo Лос Paltos

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

17. Five Cent Stand

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

18. Red Bull Soapbox Racer

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

19. Camping ilfrutteto

Этот контакт — простота в лучшем виде, легкость и свежесть.

20. Svn2ftp

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

21. Just Dot

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

22. In my Bubble

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

23. Harmony Republic

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

24. Corvusart

Красивое сочитание цветов, предельная ясность и четкость. При этом — отсутствие навязчивости.

25. Rescueseo

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

26. Reverend Danger

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

27. Webfoo London

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

28. Melonfree

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

29. Hit Digital

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

30. Zeropixel

Zeropixel контактная форма несколько отличается от других особенно в плане разработки и использования цвета.

31. 1minus1

У сайта 1minus1 нет отдельный контакт-страницы, но, скорее, контактные формы выглядят как вспывающие окна на экране при нажатии кнопки «контакт» .

32. Syropia

Syropia также использует концепцию «почтовый конверт», правда разрабатывает ее совершенно по своему.

33. Agencyp

Кажется форма контактов на этом сайте ничем не отличается от другихб но это не так. Присмотритесь внимательнее.

34. Freestyle Night

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

35. Ultranoir

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

36. CPLX

Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом.

37. Bio-Bak

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

38. Lunalunerafestival

Напишите ваше сообщение на бумаге, заполните имя и электронный адрес в конверт и отправьте письмо веб-мастеру. Разве это не интересно?

39. ElectricPulp

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

40. Fabric Adecaricaturas

Уродливая карикатура в контактной форме — для этого сайта весьма уместный штрих, который завершает рисунок сайта и демонстрирует элемент игры.

41. Z-Index Media

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

42. Social Snack

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

43. World-Arcade

Бланк появляется при нажатии на кнопку «связаться» и запрашивает имя, адрес электронной почты и собственно дает возможность написать ваше сообщение, которое вы хотите отправить. Ничего экстра, но сделано оригинально, особенно робот, который приподносит эту надпись.

Автор — 1stwebdesigner

Перевод — Дежурка