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


Содержание

Обязательные поля для заполнения

Доброй ночи! Помогите пожалуйста исправить код в скрипте обратной связи, а именно допилить обязательные поля для заполнения. Когда тыкают на отправить, у меня отправляется сообщение не имея значение что там, даже если поля пустые. А нужно сделать обязательные поля для заполнения. Что бы когда тыкают отправить, а поля обязательные не заполнены, то что бы данные не отправлялись, а там где нужно дописать инфу, показывало «вы не заполнили обязателное поле», а когда все ОК и все поля заполнены, то тогда можно отправить. Я думаю смысл понятен. Помогите пожалуйста. Вот код в html и обработчик:

16.03.2015, 02:22

Как сделать обязательные поля?
Доброго времени суток! Подскажите пожалуйста как сделать поля обязательными при добавление данных.

Обязательные поля, не работает атрибут required
Не работает атрибут required. После нажатия на кнопку «Отправить», поле ФИО отправляется пустым.

Поля, обязательные для заполнения
Добрый вечер.Подскажите как можно сделать textbox и например combobox, обязательными для заполнения?

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

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

PHP Поля форм

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

PHP Обязательные поля ввода

Из таблицы правил проверки на предыдущей странице мы видим, что «Имя» , «E-mail» , и «Пол» обязательные поля. Эти поля не могут быть пустыми и должны быть заполнены в HTML форме.

Поле Правило проверки
Имя Обязательно. + Должен содержать только буквы и пробелы
E-mail Обязательно. + Должен содержать действительный адрес электронной почты (с @ и .)
Веб сайт Произвольно. Если он присутствует, он должен содержать допустимый URL адрес
Комментарий Произвольно. Многострочное поле ввода (textarea)
Пол Обязательно. + Необходимо выбрать один из

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

В следующем коде мы добавили несколько новых переменных: $nameErr , $emailErr , $genderErr и $websiteErr . Эти переменные error , будут содержать сообщения об ошибках для требуемых полей. Мы также добавили оператор if и else для каждого переменной $_POST . Что проверит переменную $_POST пуста ли в PHP функция empty(function) . Если пустая, сообщение об ошибке сохранится в различных переменных error , а если она не пуста, она отправляет входные данные пользователя через функцию test_input() :

PHP Отображение cообщений об ошибках

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

Пример

Следующий шаг — проверка входных данных, «Содержит ли поле Имя: только буквы и пробелы?» , » Содержит ли поле E-mail: действительный синтаксис адреса электронной почты?», «Содержит ли поле Вебсайт: допустимый URL адрес?».

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

Максимум информации за минимум слов.

Способ обозначения полей сильно влияет на восприятие пользователями формы и на ее заполнение.

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

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

Отмечайте необязательные поля, а не наоборот

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

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

Лучше отмечать необязательные к заполнению поля, чем обязательные, потому что:

  • Звездочка очевидна для вас, а не для всех, поверьте мне, всегда есть те, кто не понимает
  • Обязательных для заполнения полей всегда больше, чем необязательных
  • Чем меньше визуального шума в вашей форме, тем читабельнее она, а, следовательно, ее быстрее заполнят

Not required vs Optional

Если вы пишите текст на английском, то помните, что во всех случаях отрицания менее понятны. Поэтому используйте для описания необязательных полей слово «Optional» вместо «Not required».

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

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

PHP 5 Формы — обязательные поля

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

PHP-обязательные поля

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

Поле Правила проверки
Name Обязательно. + Должен содержать только буквы и пробелы
E-mail Обязательно. + Должен содержать действительный адрес электронной почты (с @ и.)
Website Дополнительные. Если он присутствует, он должен содержать допустимый URL-адрес
Comment Дополнительные. Многострочный ввод (текстовое поле)
Gender Обязательно. Необходимо выбрать один

В предыдущей главе все поля ввода были необязательными.

В следующем коде мы добавили несколько новых переменных: $nameErr, $emailErr, $genderErr и $websiteErr. Эти переменные ошибки будут содержать сообщения об ошибках для обязательных полей. Мы также добавили инструкцию if else для каждой переменной $ _пост. Это проверяет, если переменная $ _пост пуста (с функцией PHP empty() ). Если он пуст, сообщение об ошибке хранится в различных переменных ошибки, и если он не пуст, он отправляет входные данные пользователя через test_input() функцию:

PHP-отображение сообщений об ошибках

Затем в HTML-форме мы добавляем небольшой скрипт после каждого обязательного поля, которое при необходимости генерирует правильное сообщение об ошибке (то есть, если пользователь пытается отправить форму без заполнения обязательных полей):

Обязательное поле для заполнения

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

1 ответ 1

Как было сказано в комментариях в хтмл5 действительно есть атрибут required, но на данный момент он работает некорректно в большинстве браузеров.

Советую реализовать проверку с помощью javascript (в целях безопасности обязательно проверять на стороне сервера). В интернете очень много плагинов, которые умеют это делать (подборка для JQuery).

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

Javascript проверка полей формы

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

Краткий ликбез

Все мы когда-нибудь заполняли формы. Кое-кто даже обрабатывал собранные ими результаты, будь то сделанные в интернет-магазине заказы, или обратка по сервису. Прося пользователя заполнить какую-либо информацию, мы хотим, чтобы она соответствовала определенному формату, особенно если в дальнешем она обрабатывается CMS вроде 1C bitrix, WorldPress, и так далее. Ведь если в графе телефон пользователь зачем-то запишет свой логин Skype, может возникнуть ошибка обработки данных: они не запишутся, и пользователя снова выбросит на страницу заполнения формы. Следовательно, возникает вопрос о том, как бы провести проверку введенных данных в режиме он-лайн и не допустить отправку некорректных данных.

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

Постановка задачи

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

Если разбить задачу на блоки, то получится примерно следующая схема:

Ну, если схема есть, то давайте уж ее реализуем.

Анализ вариантов проверок.

Какие поля чаще всего встречаются в формах?

  • Текстовые инпуты, которые, как правило, проверяются либо просто на заполненность, либо на несложные регулярные выражения вроде email-а или телефона.
  • Чекбоксы, проверяемые на наличие отметки (вроде соглашения на обработку личных данных).
  • Можно упомянуть и выпадающие списки, проверяемые на какое-нибудь непустое значение.
  • Не стоит забывать и о коварных радиокнопках. Почему коварных? В проверке на отметку есть подводные камни.

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

Раз уж мы взялись писать более-менее универсальный скрипт, то нужно подумать и о извращенных необычных конструкциях, которые в дальнейшем будут называться «группы». Под этим словом будем подразумевать связанные друг с другом поля. Например, если пользователь поставил флажок «Присылать на почту новости» — становится обязательным к заполнению пункт «e-mail», или телефон нередко любят разделять на код и сам номер – тогда корректность должна проверяться по всем полям, а некорректность одного влечет за собой ошибку в обоих. Да и сообщение об ошибки надо выводить не у всех полей групы, а только у одного, иначе от их количества начнет в глазах рябить.

Какой вывод можно сделать?
Надо организовать обычную проверку на текстовое поле, проверку на email и «цифровые» поля вроде телефона, возраста, итп. Чекбоксы и радиокнопки проверяем на свойство checked, выпадающие списки – по значению. Чтобы удовлетворить хитрые группы – написать обработчик и для них. Кроме того, обеспечить возможность проверки некоторых полей какой-нибудь пользовательской функцией для особо замороченных случаев.

Организация хранения информации о проверяемых полях и типах проверки.

На мой взгляд, вариантов хранения тут всего два:

  1. Создаем javascript-объект, в котором храним необходимые для проверки поля.
  2. Засовываем информацию о проверках непосредственно в теги полей.

JS-объект будет быстрее работать, да и смотреться куда корректнее, нежели какие-то нестандартные атрибуты в тегах. Скажем, выглядеть он будет так:

Если программист добирается до сайта, когда он уже полностью сверстан ( то есть действие происходит в фантастическом романе ) – такой подход прекрасен. Но зачастую что-то обязательно будет доделываться, в том числе могут дописываться дополнительные поля или создаваться новые формы, а оставлять добавление обработчиков полей на совесть верстальщиков, даже при наличии написанного конструктора, — значит обрекать себя на постоянные обращения с их стороны в стиле «а у меня тут все поломалось». И тогда о главном постулате задумки, автоматизации (ну, точнее, избавлении себя-любимого от ненужных телодвижений), придется забыть.

Илон Маск рекомендует:  @import в CSS

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

Затем введем следующие обрабатываемые теги:

title Он, конечно, стандартный, но сюда мы запишем сообщение об ошибочном заполнении поля. И выводить будем в стиле «Укажите »+title
cfm_check Флаг проверки, именно по нему мы и будем искать проверяемые поля. А значения он может принимать следующие:
  • Y – значит, надо проверять
  • email или num – обозначает стандартную проверку на email или цифры/телефон при заполненности
  • Y_email / Y_num – обязательная проверка на email или num
  • groupID – заключение элемента в группу с идентификатором groupID с параметрами проверки, указанными в скобках
cfm_confirminfo По умолчанию ошибки будут выводиться сразу после проверяемого элемента, что не всегда удобно. Так пусть же в этом атрибуте мы укажем jq-селектор на элемент, после которого выводить ошибку.
Например, cfm_confirminfo=’#placeForErrors’
cfm_function Чтобы не усложнять перегруженный cfm_check, сюда мы запишем название нестандартной функции-проверки поля

Скрипт проверки заполненности полей.

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

  • на вход подаем указатель на форму, в которой делать проверку (у нас же много форм может быть на странице!);
  • пробегаем по указанным элементам формы, проверяя корректность заполнения;
  • если ошибки есть – маркеруем их, если нет – разрешаем проверку формы.

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

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

Скрипт валидации формы.

Теперь в случае успешного выполнения функции cFM_checkFullness() (то есть возвращения true) скрипт должен отсылать форму на обработку. Как это реализовать — зависит уже от конкретной формы. Если подтверждение на отправку идет через кнопку submit — то можно подписаться на событие отправки формы (onsubmit) и в зависимости от результата проверки отсылать ее или нет. Например, так: Если же отправка идет с помощью ajax’а — то тут вообще все просто: вызывать его в зависимости от результата работы функции cFM_checktrueAttr($(this));

Дополнительные заморочки.

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

Что же мы имеем в итоге? Подключая пару файлов (.js и .css), получаем функционал проверки свойств, который можно со спокойной душой кидать на любые сайты, при условии подключенного jquery. Ведь куда приятнее иметь под рукой набор готовых инструментов, чем тратить кучу времени на их производство перед каждой однотипной задачей.

Подключение и примеры

Во-первых нам понадобится библиотека jquery. Скачать ее можно, например, с официального сайта.
Или же просто вставить в шапку (то, что внутри тега ) вашего сайта строку Затем качаем (правой клавишей -> понравившийся пункт со словом «сохранить») отсюда файл с js-кодом и, если нужно, файл с css-стилями для ошибочных полей отсюда.
Добавляем в шапку и их тоже: Теперь нужно расставить атрибуты полям формы согласно таблице, в зависимости от того, какую проверку вы хотите совершить.
Последний штрих — добавление тегу Посмотреть код

Оценить применение скрипта можно так же на сайте mosavtotrade, на всех формах стоит именно эта проверка.

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

  1. Модернизация скрипта для работы с групповыми свойствами (и более адекватная обработка радиокнопок с его помощью)
  2. Модернизация скрипта для задания полей через объект

Проверка заполнения формы на HTML5 + CSS3

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

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:

HTML часть

Давайте посмотрим из чего же состоит данная форма:

Если вы изучали прошлые уроки, то вам будут знакомы такие атрибуты как placeholder и required.

Но всё же повторю еще раз:

placeholder — присутствие данного атрибута означает что на фоне данного текстового поля будет текст, заданный в значении данного атрибута. А при вводе он исчезает.

required — если у поля есть данный атрибут, значит поле является обязательным для заполнения.

И мы не использовали Javascript потому что HTML5 позволяет нам сделать с помощью своих функций.

Также здесь есть новый атрибут pattern=»(http|https)://.+» — он задает то, с чего должен начинаться веб-адрес сайта, иначе будет ошибка.

CSS часть

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

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

А сейчас напишем стили, когда поля активны и когда нет:

Далее задаем стили когда произошел некорректный ввод:

Осталось совсем чуть-чуть :). Предпоследним шагом необходимо задать стили для подсказок:

И последним действием будет задание стиля кнопке «Отправить»:

Вывод

Ну вот и все! �� Интернет-технологии настолько быстро развиваются, что вы и заметить не успеете как все будут применять связку HTML5+CSS3. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!

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

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

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Формы для сайта: юзабилити форм

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Общие рекомендации по юзабилити форм

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

    Формы во всплывающих (модальных) окнах. Следует выводить их только после клика пользователем по нужной ссылке или кнопке. Никаких «всплывашек» при открытии Главной страницы или при попытке клиентов покинуть сайт. Онлайн-консультант тоже не должен «выскакивать», предлагая начать чат. Такие вещи раздражают и отталкивают пользователей. Антипример от Delicat-Servis (сейчас ребята убрали эту проблему, и форма раскрывается только после клика):

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

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

    Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):

    Обязательные поля. Всегда помечайте * поля, обязательные для заполнения. Выше при описании форм мы указали, какие выбрать. Исключение составляют формы с один полем – и так ясно, что оно обязательное. Пример выделения обязательных полей от компании Izto:

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

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

    Использование «капчи». Не рекомендуем использовать в формах проверку на робота, так как она заставляет пользователей совершать лишние действия и может даже стать причиной ухода с сайта. Используйте незаметные для пользователей методы защиты, например, отслеживайте на сервере время заполнения формы (если оно слишком маленькое, то значит форму заполняет робот), добавляйте скрытые поля (которые сможет заполнить только робот), используйте анти-спам сервисы для проверки и т.д. На самый крайний случай можно воспользоваться проверкой ввода от Google:

  • Сохранение данных. Возможно клиент случайно закрыл форму, случилась ошибка или перезагрузка, и чтобы не пришлось вводить данные заново – сохраняйте их до отправки. Особенно этот совет касается длинных форм.
  • Кнопка сброса данных. Ни в коем случае не размещайте ее рядом с кнопкой отправки, чтобы пользователь случайно не кликнул по ней. Разместите ее в другой части формы или вовсе уберите. Пример неудачного расположения кнопок на сайте Avarit:
  • Закон о Персональных данных. Чтобы избежать штрафов за сбор персональных данных клиентов, необходимо подготовить нормативные документы и написать об этом на сайте. Подробнее о законе и подготовке сайта »
  • Итоги

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

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

    Мой секрет

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

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

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

    Параметры для всех собственных полей

    На вкладке Общие необходимо заполнить необходимые данные. Заголовок будет отображаться на странице «Менеджер полей», где поле можно редактировать, щелкнув заголовок поля. После сохранения тип поля больше не может быть изменен в следующий раз.

    • Заголовок не отображается при создании сообщения или контакта в интерфейсе.
    • Имя Имя используется для идентификации поля.
    • Тип При создании поля вы можете выбрать один из 16 типов полей.

    Для каждого поля эти параметры могут использоваться.

    1.Используйте необязательные поля вместо обязательных

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

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

    Если для метки не указан текст, текст заголовка также используется в качестве метки. Описание появляется, когда пользователь перемещает мышь над полем при вводе — например. Например, при создании сообщения, контакта или компонента, который поддерживает настраиваемые поля. Описание не переводится на многоязычный веб-сайт. Описание не видно в интерфейсе. Обязательно. Это обязательное поле? В этом случае поле должно быть заполнено до отправки сообщения, контакта или формы компонента, который использует Мои поля. В качестве опции можно выбрать «да» или «нет». По умолчанию Здесь вы можете ввести значение по умолчанию для поля. Этот текст не переводится для многоязыковых установок. Примечание. В некоторых полях значение должно вводиться как стандартное, в других — значение индекса. Статус Здесь вы можете установить значение для публикации. Является ли значение опубликованным, скрытым, архивированным или корзиночным? Опубликовано: поле отображается при редактировании сообщения или контакта и отображается. Это также видно на опубликованном веб-сайте. Неопубликованные: это поле не отображается пользователям при редактировании сообщений или контактов. Архивировано: поле больше не отображается при редактировании сообщения или контакта. Он будет открыт в полевом менеджере, если статус установлен в «Архивировать». Корзина: поле было удалено, но все еще находится в базе данных. Навсегда и полностью удаляется, он будет удален поверх кнопки «Корзина» в «Менеджер полей».

    • Этот текст не переводится на многоязычный сайт.
    • Описание Описание поля, которое появляется в подсказке над полем ввода.

    В вкладке «Опции» можно использовать следующие параметры.

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

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

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

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

    Введенный регистрационный номер неверен.

    Печатать утомительно, согласны? Сделайте часть работы за посетителей и используйте «умные» значения по умолчанию. Если у вас уже есть какая-то информацию о клиенте, впишите её автоматически (например, email, который получили ранее).

    Также можно определить местонахождение пользователя по IP и вписать в нужные поля страну или город проживания, чтобы он не листал длинные списки. Вот как это реализовано на сайте издательства «Манн, Иванов и Фебер»:

    Повторите попытку. Ваш пароль должен быть не менее 5 символов. Укажите страну проживания. Ваш пароль должен содержать не менее 5 символов. Выберите другой пароль. Пожалуйста, пересмотрите свой выбор в школе. Год рождения не является действительной датой. Введите другой адрес. Эта информация помогает нам сопоставлять веб-контент с вашим регионом. Выберите другое имя пользователя. Ваше имя пользователя должно быть не менее 5 символов. Эта информация служит для подтверждения вашего профессионального статуса.

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

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

    4. Располагайте метки полей справа или сверху

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

    Поля ввода данных о кредитке должны располагаться так, как на самой карте

    Выбранный месяц рождения не может превышать 29 дней в течение високосного года. Если вы хотите получать электронные письма от нас, введите другой адрес. Введите его сейчас или выберите другое название работы. Укажите академическую степень. Идентификатор пользователя не может быть длиннее 50 символов. Введите название работы. Введите пароль. Ввод регистрационного номера является обязательным. Год рождения должен включать 4 номера. Теперь вы готовы зарегистрироваться! Нажмите «Отправить». Действительные символы.

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

    Выберите сферу обучения. Требуется подтверждение адреса электронной почты. Этот год не может совпадать с вашим днем ​​рождения. Месяц рождения, который вы выбрали, не может превышать 28 дней вне високосных лет. Проверьте свою личную информацию. Перед отправкой убедитесь, что все данные заполнены и действительны. Для успешной регистрации требуется вся информация. Пожалуйста, укажите желаемую медицинскую специализацию. Введите свой заголовок. Пароли не совпадают. Единый учебный номер — это 15-значный номер, который каждый врач получает от своего государственного медицинского совета.

    5. Всплывающие подсказки помогут избежать хаоса в форме

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

    Нажмите «Отправить», чтобы завершить процесс регистрации. Неверный формат. Введенный вами адрес электронной почты уже зарегистрирован. Если это ваш адрес электронной почты, пожалуйста, следуйте этим ссылкам: или. Почтовый индекс должен быть не менее 5 цифр. Введенное вами имя пользователя уже зарегистрировано. Если это ваше имя пользователя, перейдите по этой ссылке. Введенное расширение неверно. Ваши адреса электронной почты не совпадают. Имя не может быть длиннее 35 символов. Вступление в региональную консульскую службу Медицины является обязательным.

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

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

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

    6. Четко укажите, зачем вам нужна запрашиваемая информация

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

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

    Это значение невозможно. Фамилия не может быть длиннее 35 символов. Требуется фамилия Пожалуйста, выберите секретный вопрос. Укажите год рождения. Альтернатива В качестве альтернативы у меня есть один: введите свой адрес электронной почты. Почтовый код не должен превышать 5 цифр. Выберите основной отдел. Требуется, чтобы вы ввели свой предполагаемый год окончания. Укажите год окончания обучения. Введенный вами последний год недействителен. Требуется вопрос безопасности. Для выполнения определенных действий, перечисленных в этой статье, необходимы разрешения администратора.

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

    Не забудьте сообщить, для чего вам нужны вводимые данные, если только ответ не очевиден. Хороший пример – номер телефона клиента. Никто не хочет, чтобы его начали бомбить телефонными звонками и смс. Примеры от Lamoda и Wildberries наглядно демонстрируют, как объяснить клиенту, зачем вам нужна дата рождения.

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

    7. Не заставляйте пользователей запоминать очередной логин

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

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

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

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

    8. Отображение этапов заполнения формы

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

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

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

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

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

    9. Тестируйте капчи

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

    Традиционные капчи требуют от посетителей ввести сложно читаемые символы с картинки. В то же время всё большую популярность приобретают логические задачи или визуальный тест (пример ниже):

    10. Призыв к действию должен быть четким

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

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

    11. Поля ввода данных о кредитке должны располагаться так, как на самой карте

    Есть удобные jQuery-плагины (вроде jQuery.payment), которые позволят грамотно оформить форму ввода информации о кредитной карте. Например, 16-значный номер карты следует разделить на 4 группы – так он представлен на самой карте. Выпадающий список для выбора месяца также должен быть представлен в числовом формате.

    12. Адрес доставки по умолчанию повторяет адрес плательщика

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

    Доброго времени суток всем!
    Помогите пжл. В java не силен, да и в программировании тоже, знаю чуть-по-чуть того, сего , столкнулся с проблемой:
    Интернет-магазин на ShopCMS 3.1.2 Vip.
    При заказе не зарегистрированным пользователем нужно сначала заполнить форму с обязательными полями, во время оформления заказа.
    Мне нужно некоторые поля сделать не обязательными для заполнения, и добавить одно поле «номер телефона».

    Илон Маск рекомендует:  Что такое код offsetrgn
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL