Как сделать форму в HTML для сайта. Форма для сайта


юзабилити форм и рекомендации по его улучшению

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

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

  • Форма заказа обратного звонка

    Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения – шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:

    Cсылка на форму обратного звонка

    В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:

    Форма обратного звонка

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

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

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

  • Форма консультации

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

    Первый вариант размещения (пример с сайта Танго и Кэш):

    Ссылка на онлайн-консультант внизу экрана

    Второй вариант размещения (пример с сайта Okna-dpa):

    Форма консультации внизу страницы

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

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

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

    Форма обратной связи на странице контактов YouDesign:

    Форма обратной связи на странице контактов

  • Форма заказа услуг

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

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

    • «Вид услуги» или «Тариф» – данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
    • «Имя»
    • «Телефон» – сделайте поле обязательным для заполнения
    • «Email» – чтобы продублировать информацию о заказе клиенту
    • «Комментарий» – возможно, у клиента есть уточнения

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

    Форма заказа услуги

  • Форма заказа товаров

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

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

    Пример размещения полей в форме для новых пользователей на Ozon:

    Форма заказа товаров для новых клиентов

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

    Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):

    Форма заказа товаров для постоянных клиентов

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

    Длинная форма заказа товаров

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

    Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.

  • Форма регистрации

    Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант – в верхнем правом углу в виде ссылки (пример от Аква-Вива):

    Ссылка на форму регистрации в шапке сайта

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

    Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:

    Регистрация через соцсети

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

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

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

  • Форма авторизации

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

    Пример хорошей формы авторизации от Lamoda, где предлагают два варианта входа на сайт:

    Авторизация через соцсети

    Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.

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

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

    Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):

    Форма подписки на рассылку внизу страницы

    Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:

    Форма подписки на рассылку в блоге

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

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

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

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

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

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

    1ps.ru

    20 советов по работе с HTML формами на сайте

    формы

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

    Хорошие html формы для сайта требуют внимания, по крайней мере, в четырех пунктах:

    1.Семантика

    2.Доступность

    3.Функциональность

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    4.Дизайн

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

    Семантика

    1: используйте fieldsets для инкапсуляции в аналогичных областях

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

    <fieldset> <span>Billing Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset> <fieldset> <span>Shipping Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset>

    <fieldset>

    <span>Billing Address</span><input type="text" />

    <span>City</span><input type="text" />

    <span>Province</span><input type="text" />

    <span>Postal Code</span><input type="text" />

    </fieldset>

    <fieldset>

    <span>Shipping Address</span><input type="text" />

    <span>City</span><input type="text" />

    <span>Province</span><input type="text" />

    <span>Postal Code</span><input type="text" />

    </fieldset>

    2: ярлыки fieldsets с легендами

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

    <fieldset> <legend>Billing Address</legend> <span>Address</span><input type="text" /> <span>City</span><input type="text" /> <span>Province</span><input type="text" /> <span>Postal Code</span><input type="text" /> </fieldset>

    <fieldset>

    <legend>Billing Address</legend>

    <span>Address</span><input type="text" />

    <span>City</span><input type="text" />

    <span>Province</span><input type="text" />

    <span>Postal Code</span><input type="text" />

    </fieldset>

    формы

    3: Дайте имя inputs

    Если вы хотите передать данные формы через скрипт, то каждый входной (input)элемент должен иметь имя, если вы используете PHP, эти имена станут ключом к глобальному массиву, как правило, $ _POST или $ _GET.

    <fieldset> <span>Billing Address</span><input type="text" name="billAddress" /> <span>City</span><input type="text" name="billCity" /> <span>Province</span><input type="text" name="billProvince" /> <span>Postal Code</span><input type="text" name="billPC" /> </fieldset>

    <fieldset>

    <span>Billing Address</span><input type="text" name="billAddress" />

    <span>City</span><input type="text" name="billCity" />

    <span>Province</span><input type="text" name="billProvince" />

    <span>Postal Code</span><input type="text" name="billPC" />

    </fieldset>

    4: Используйте тег label

    Давайте продолжать совершенствовать этот код, там нет ничего плохого в использовании тега label перед input.

    <fieldset> <legend>Billing Affress</legend> <label>Address</label><input type="text" name="billAddress" /> <label>City</label><input type="text" name="billCity" /> <label>Province</label><input type="text" name="billProvince" /> <label>Postal Code</label><input type="text" name="billPC" /> </fieldset>

    <fieldset>

    <legend>Billing Affress</legend>

    <label>Address</label><input type="text" name="billAddress" />

    <label>City</label><input type="text" name="billCity" />

    <label>Province</label><input type="text" name="billProvince" />

    <label>Postal Code</label><input type="text" name="billPC" />

    </fieldset>

    5: Дайте тегу label атрибут «for»

    Мне очень нравится атрибут «for»; он дает возможность привязать тег label к input. Значение ‘for’ должно быть такое же, как идентификатор данных, с которыми вы хотите связать его.

    <fieldset> <legend>Billing Affress</legend> <label for="billAddress">Address</label><input type="text" name="billAddress" /> <label for="billCity">City</label><input type="text" name="billCity" /> <label for="billProvince">Province</label><input type="text" name="billProvince" /> <label for="billPC" >Postal Code</label><input type="text" name="billPC" /> </fieldset>

    <fieldset>

    <legend>Billing Affress</legend>

    <label for="billAddress">Address</label><input type="text" name="billAddress" />

    <label for="billCity">City</label><input type="text" name="billCity" />

    <label for="billProvince">Province</label><input type="text" name="billProvince" />

    <label for="billPC" >Postal Code</label><input type="text" name="billPC" />

    </fieldset>

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

    6: Используйте параметр OPTGROUP, чтобы классифицировать группы

    Если у вас есть много вариантов выбора, обычно лучше сгруппировать их в optgroups. <optgroup> является малоизвестным элементом, который будет делать отступы для вариантов и давать им названия. Обратите внимание, что требуется метка атрибута.

    <select> <optgroup label="USA"> <option>Alabama</option> <option>Alaska</option> <option>Arizona</option> </optgroup> <optgroup label="Canada"> <option>Alberta</option> <option>British Columbia</option> <option>Manitoba</option> </optgroup> </select>

    <select>

    <optgroup label="USA">

    <option>Alabama</option>

    <option>Alaska</option>

    <option>Arizona</option>

    </optgroup>

    <optgroup label="Canada">

    <option>Alberta</option>

    <option>British Columbia</option>

    <option>Manitoba</option>

    </optgroup>

    </select>

    Это дает нам следующие результаты:

    формы

    7: Всегда назначайте полные атрибуты

    При работе с формами в частности, соблазнительно написать так:

    <label for="live">Living?</label> <input name="live" type="checkbox" checked disabled />

    <label for="live">Living?</label>

    <input name="live" type="checkbox" checked disabled />

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

    <label for="live">Living?</label> <input name="live" type="checkbox" checked="checked" disabled="disabled" />

    <label for="live">Living?</label>

    <input name="live" type="checkbox" checked="checked" disabled="disabled" />

    8: Используйте кнопки вместо Submit Inputs

    Как правило, <input type=»submit» /> была универсальной кнопкой «Отправить». Но HTML имеет элемент <button> (кнопка). Почему бы вам его использовать? Ну, обычно, легче стилизировать кнопки; Также, вы можете поместить изображения в пределах кнопки, поэтому кнопки действительно обеспечивают большую гибкость. Вы можете читать больше в этих двух статьях.

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    Доступность

    9: Положите tabindex в inputs

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

    <input type="text" tabindex="2" /> <input type="text" tabindex="1" /> <input type="text" tabindex="3" />

    <input type="text" tabindex="2" />

    <input type="text" tabindex="1" />

    <input type="text" tabindex="3" />

    10. Определите при необходимости ключ доступа

    Ключ доступа атрибутов создает сочетание клавиш, которые будут определяться как ввод: Ярлык ALT (Option) + значения ключа доступа. Конечно, вы не установите ключ доступа на каждом вводе, но это, несомненно, будет полезно, например, поле поиска. Не забудьте указать пользователям о значении ярлыка, часто это делается подчеркиванием символа как части ярлыка.

    <label for="search"><span>S</span>earch</label> <input type="text" name="s" accesskey="s" />

    <label for="search"><span>S</span>earch</label>

    <input type="text" name="s" accesskey="s" />

    11. Используйте хорошие методы фокусировки

    Можно утверждать, что этот пункт также на стороне дизайна, как и доступность. Это всегда хорошо, если поле формы (как правило, в текстовом поле, в данном случае) изменяет цвет при наведении, но для инвалидов по зрению, это почти требование, если использовать форму корректно. Для этого можно использовать наведение psuedoclass в вашем CSS; это будет работать во всех распространенных браузерах, кроме версии IE7 и ниже. Вы также можете использовать JavaScript для этого; Jquery имеет Hover .

    input[type=text]:hover { background-color:#ffff66; border-color:#999999; }

    input[type=text]:hover {

    background-color:#ffff66;

    border-color:#999999;

    }

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

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

    Функциональность

    13. Используйте правильное содержание тега type

    В большинстве случаев вам не нужно будет делать ENCTYPE атрибут тега form, он по умолчанию будет в «Application / X-WWW-форм-urlencoded». Однако, если у вас есть файл ввода (input), который позволяет пользователю загрузить файл, вы должны использовать «составные формы-данных (multipart/form-data)».

    <form action="verify.php" method="get" enctype="multipart/form-data"> <label for="avatar">Upload your Avatar : </label> <input type="file" name="avatar" /> </form>

    <form action="verify.php" method="get" enctype="multipart/form-data">

    <label for="avatar">Upload your Avatar : </label>

    <input type="file" name="avatar" />

    </form>

    14: Знайте, когда использовать «Get» и когда использовать «Post»

    Форма может отправить свои данные двумя способами: «Get» и «Post», вы определяете один из методов в атрибуте тега form. Какая разница, и когда вы должны их использовать? Игнорируя то, что происходит на сервере, основным отличием является то, как браузер посылает информацию. С GET, данные формы отправляются в качестве запроса, видимого в URL. Итак, эта форма. . .

    <form action="you.php" method="get"> <label for="fname">First Name</label> <input type="text" name="fname" value="Bill" /> <label for="lname">Last Name</label> <input type="text" name="lname" value="Gates" /> </form>

    <form action="you.php" method="get">

    <label for="fname">First Name</label>

    <input type="text" name="fname" value="Bill" />

    <label for="lname">Last Name</label>

    <input type="text" name="lname" value="Gates" />

    </form>

    . . . приведет к URL, когда это представляется: www.example.com/you.php?fname=Bill&lname=Gates

    При использовании «Post», данные передаются в заголовке HTTP запроса. Таким образом, они не видны обычному пользователю. Итак, какие нужно использовать и когда? «Post» лучше для конфиденциальных данных (например, пароли) и любых данных, которые, как правило, что-то изменяют (например, добавить запись в базу данных). Кроме того, «Post» — единственный вариант, если вы загружаете файл. «Get» — хороший вариант для запросов к базе данных, и других запросов, которые не имеют прочного влияния ни на что (Spec называют «идемпотентным»). Вообще-то, я лишь поверхностно коснулся вопросов различия, затронутых здесь. Имеются другие статьи, которые рассматривают эту тему углубленно.

    15. проверка на клиенте и сервере

    формы

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

    16. Дайте вашим пользователям хорошие предупреждения

    Это идет рука об руку с предыдущим пунктом для улучшения практики использования форм. Слишком много раз я заполнял форму, и там говорилось: «поля не были заполнены правильно». Ты умеешь писать внятно, к какой форм это имело отношение? Как только вы определили, что ваш пользователь сделал ошибку, пусть он узнает скорее и как можно более четко. Пусть текст о некорректном вводе поля отображается рядом с некорректным полем, и пусть ваш пользователь знает, что случилось с их входом. Мне нравится использовать JQuery’s Blur () в этом случае: как только пользователь переходит в следующее окно, предыдущие проверяются.

    формы

    17. Попробуйте использовать AJAX для submit

    Много раз результаты после заполнения формы были следующими: «Спасибо», «Проверьте свою электронную почту для подтверждения», или «Мы вернемся к вам, когда мы сможем». В таком случае, это ли не лучшее место для использования AJAX? Вы можете просто снизить форму передачи данных с JQuery или (Ваша любимая библиотека), и исчезнуть в своем сообщении.

    формы

    18. Убедитесь, что форма работает без Javascript

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

    Дизайн

    19. Стиль формирует последовательность

    Я не дизайнер, и я не претендую на эту роль, но я знаю многое: не располагать ваши поля формы в хаотичном положении. Ваша форма должна быть последовательна в своем порядке. Решите, Ваш ярлык будет слева или справа (или, может быть выше или ниже) , и придерживайтесь этого. Сделать все ваши вводы текста и поля такой же ширины. В пространстве все ваши поля одинаковы. Сохраните, по крайней мере, один край всех полей на одной линии. Tuts + формы комментариев – замечательные примеры хорошо-стилизованных форм.

    формы

    20. Подумайте об использовании JavaScript последовательных Стилевых форм над разными платформами

    С возрастными браузерами /операционными системами, согласованность элементов формы вряд ли возможна. . . без помощи JavaScript. Если вы хотите, чтобы ваши формы выглядели так же, практически на любом браузере нужно проверить jqTransform плагина Jquery, плагины, которые направлены непосредственно на решение проблемы совместимости. Просто включите его, звоните, и настройте CSS файл на свой вкус, оно работает с IE6 +, Safari 2 +, Firefox 2 +, и Chrome.

    21.Пусть Вас вдохновляют другие

    Если у вас возникли проблемы с придумыванием уникального дизайна формы для своего сайта, ищите вдохновение! Smashing Magazine имеет большую подборку форм и Smileycat «Элементы дизайна» Галерея имеет кучу Блогов Комментариев к формам, которые стоит проверить.

    формы

    Заключение

    22: Смотри вперед в HTML 5 Формы

    HTML 5 имеет много функций для веб-форм. Две наиболее интересных из них имеют новые type для input (например, URL, электронной почты и дату) и DataList элемент, который может быть использован для простого автозаполнения. Когда эти и другие части спецификации выполнены, динамичные формы будут намного проще!

    Перевод и редакция: Рог Виктор и Андрей Бернацкий.

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

    Автор: Andrew Burgess.

    Источник: http://net.tutsplus.com

    E-mail:[email protected]

    Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

    Практический курс по верстке адаптивного лендинга с нуля!

    Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

    Узнать подробнее

    Проверка формы без перезагрузки с помощью JavaScript

    Прямо сейчас посмотрите курс по организации динамической работы с формами!

    Смотреть курс

    webformyself.com

    Формы

    24.07.2018 628 Form

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

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

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

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

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

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

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

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

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

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

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

    Superplaceholder — другой взгляд на placeholder 22.03.2015 1 054 Form

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

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

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

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

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

    FancyText - текстовые эффекты для инпутов 13.03.2014 1 702 Form

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

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

    Selectric - пользовательский select 09.02.2014 1 145 Form

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    pcvector.net

    Бесплатный онлайн конструктор веб-форм для сайтов

    Создание форм для сайта - порой, сложное и занимающее много времени дело. Наверняка, вы очень цените свое время и не хотели бы целый день просидеть за этим занятием. Особенно, если не хотите вникать “техническую кухню” приготовления форм и изучать языки программирования. А ведь для того, чтобы создать самую простую форму нужно знать как минимум язык разметки HTML и язык описания внешнего вида CSS, чтобы красиво оформить вашу форму. Более того, чтобы сделать форму более интерактивной, добавить какие-нибудь визуальные эффекты или подсказки, следует знать язык программирования JavaScript - работающий на клиентской стороне, а именно в браузере пользователя. А чтобы сообщение с формы отправлялось на вашу почту, требуется знание какого-нибудь языка серверного программирования, например, PHP.

    Для многих, все это окажется ужасно и сложным не только для применения, но и для понимания. Что если нужно просто сделать форму и при этом, как можно быстрей? И совсем не хочет вникать ни в какое программирование? Как же быть? Конечно, можно заказать разработку формы у программиста. Но прежде, придется найти подходящего исполнителя: побродить по сайтам, фриланс биржам, почитать отзывы о потенциальном исполнителей, поспрашивать у знакомых, узнать стоимость работы, объяснить суть работы или даже предоставить техническое задание. А ведь это тоже трата времени. И в дальнейшем, чтобы произвести какие-то даже самые простые изменения в форме, вам снова придется обращаться к специалисту. Но здесь есть еще один вариант, который поможет вам создать свою форму на сайте бесплатно и без помощи программиста.

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

    Создать форму для сайта

    Ну что же, что там у него под капотом и действительно ли он так хорошо? Давайте рассмотрим.

    И так, регистрация как и вход в конструктор форм осуществляется с помощью адреса почты и пароля, а также через аккаунты социальных сетей ВКонтакте, Facebook, Google+

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

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

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

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

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

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

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

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

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

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

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

    В созданной форме через конструктор вы также сможете принимать уведомления о заявках клиентов и даже принимать платежи. Для этого в форму нужно добавить виджет «Кнопка» в настройках которой и включаются Email и SMS уведомления, прием оплат на Яндекс.Касса, Яндекс.Деньги и PayPal.

    Кроме этого, можете даже подключить статистику Google Analytics или Яндекс.Метрика, чтобы отслеживать показатели эффективности ваших форм.

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

    Создать форму для сайта сейчас

    unetway.com

    Как сделать форму в HTML для сайта

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

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

    forma-html

    Для создания формы используется контейнер <form></form> с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

    Структура простейшей формы:

    <formaction="адрес страницы обработчика формы">элементы форм…</form>

    В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

    Структура кнопки:

    <input type="submit" name="имя кнопки" value="отображаемое имя">

    Итак, для записи практически всех элементов форм используется тэг <input> с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

    <input type="reset" name="имя кнопки" value="отображаемое имя">

    Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

    Пример записи формы с двумя текстовыми полями:

    <form action="obrabotka.php">Введитеимя:<br><input type="text" name="name" size=”15” maxlength=”20” value="" ><br>Введите фамилию:<br><input type="text" name="surname" size=”20” maxlength=”25” value="" ><br><input type="submit" name="otpravit" value="Отправить"><input type="reset" name="ochistit" value="Очистить"></form>

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

    forma-html-primer.jpg

    В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга <textarea> со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).

    К вышеуказанному коду добавим поле текстовой области:

    Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”></textarea>

    Результат работы кода с текстовой областью представлен на рисунке.

    forma-s-textarea

    Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги <option> с параметром value, отвечающем за значение элемента и <select> с параметрами name, в котором указывается имя списка, size, отвечающего за число видимых элементов.

    Структура записи списка:

    <select name="имя списка" size="число видимых элементов"><<option value="значениеэлемента">текст</option><option value="значение элемента">текст</option></select>

    Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге <option> дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

    teg-select-v-forme

    Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

    Структура записи флажка и радиокнопки:

    Флажок:

    <input type="checkbox" name="имя флажка" value="значение">текст

    Радиокнопка:

    <input type="radio" name="имя радиокнопки" value="значение"> текст

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

    forma-checj-box

    Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга <input> со значением button:

    <input type="button" name="имя кнопки" value="значение">

    В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

    <input type="button" name="подсказка" value="Помощь"></button>

    Для вывода сообщения в специальном окне используется команда на языке Javascript – aler. Результат работы примера представлен на рисунке.

    podskazka

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

    <input type="button" name="подсказка"><img src=”изображение.jpg”></button>

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

    <input type="password" name="pass" size=”длинаполя” maxlength=”максимально возможная длина пароля” value="значение по умолчанию" >

    forma-parol

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

    <inputtype="hidden" value="значение по умолчанию">

    Элемент формы hiddenбудет невидим в окне браузера.

    Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

    <input type=”file” size=”длинаполя”>

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

    Визуальное оформление HTML формы. Bootstrap

    webriz.ru

    Форма для HTTP-уведомлений — Технологии Яндекса

    Обязательные параметры

    shopId

    long

    Идентификатор магазина, выдается при подключении к Яндекс.Кассе.

    scid

    long

    Идентификатор витрины магазина, выдается при подключении к Яндекс.Кассе.

    sum

    CurrencyAmount

    Сумма заказа.

    Note.

    Сумма заказа может не передаваться только в одном случае: при оплате наличными через терминалы, по коду платежа (paymentType=GP). Тогда код платежа становится многоразовым. При каждом платеже по этому коду магазину перечисляется сумма, внесенная пользователем в терминал.

    customerNumber

    normalizedString

    64 символа

    Идентификатор плательщика в системе магазина. В качестве идентификатора может использоваться номер договора плательщика, логин плательщика и т. п.

    Допустимы повторные оплаты по одному и тому же идентификатору плательщика.

    Допустимые символы:

    • цифры от 0 до 9,
    • латинские буквы,
    • буквы русского алфавита,
    • символы [email protected]#$%^&*()_+{}|:"<>?-=[]\;./!"№;%:?*()_+/
    • пробелы (пробелы в начале и в конце недопустимы).
    Необязательные параметры

    orderNumber

    normalizedString

    64 символа

    Уникальный номер заказа в системе магазина. Уникальность контролируется Яндекс.Кассой в сочетании с параметром shopId.

    Если платеж с таким номер заказа уже был успешно проведен или в процессе платежа возникла ошибка, то повторные попытки оплаты будут отвергнуты Яндекс.Кассой.

    shopArticleId

    long

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

    shopSuccessURL

    string, URL path

    250 символов

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

    • задается в личном кабинете (в разделе Настройки в поле successURL),
    • передается динамически.

    См. Параметры подключения

    shopFailURL

    string, URL path

    250 символов

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

    В зависимости от настроек магазина:

    • задается в личном кабинете (в разделе Настройки в поле fail URL),
    • передается динамически.

    См. Параметры подключения

    shopDefaultUrl string, URL path 250 символов

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

    Страницы, на которых отображается эта ссылка:

    Если этот параметр задан, то на этот же URL будет вести ссылка Вернуться в магазин со страницы подтверждения оплаты.

    Если shopDefaultUrl не задан, эта ссылка ведет на Адрес сайта из настроек.

    cps_email

    string

    100 символов

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

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

    Restriction.

    Этот параметр не передается в запросах checkOrder и paymentAviso.

    cps_phone

    string

    15 символов, только цифры

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

    Restriction.

    Этот параметр не передается в запросах checkOrder и paymentAviso.

    paymentType

    normalizedString 5 символов

    Способ оплаты. Рекомендуем передавать в этом поле пустое значение, в этом случае выбор способа оплаты будет происходить на стороне Яндекс.Кассы.

    Примеры:

    • PC - оплата из кошелька в Яндекс.Деньгах;
    • AC - оплата с произвольной банковской карты.

    Полный список значений

    Restriction.

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

    ym_merchant_receipt string

    Данные для формирования чека в формате JSON.

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

    См. Параметры для формирования чека

    Параметры, которые может добавить магазин (необязательно)
    custom_field string

    Используется для передачи дополнительных параметров. Например, при оплате по QR-коду передается значение qrpayment.

    Любые названия, отличные от перечисленных выше string

    4096 символов (суммарная длина всех параметров)

    Параметры, добавленные магазином в платежную форму, будут сохранены и переданы магазину в запросах checkOrder и paymentAviso.

    Restriction.

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

    Название должно начинаться с буквы, но нельзя использовать в начале сочетание xml.

    tech.yandex.ru