форма обратной связи html5

3 способа. Как сделать форму обратной связи на html?

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

Способ №1. Форма обратной связи html + php.

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

Для данной формы вам потребуется:

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

Далее давай те напишем HTML код формы

Ну и конечно же файл CSS, что-бы все облагородить)

Вот, что получилось в итоге.

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

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

Для данного способа вам понадобиться:

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

Я собрал вот такую форму на сервисе Яндекса.

Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту

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

Способ №3. Ссылка для отправки email.

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

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

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

Источник

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

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

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

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

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

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега

Сделаем 100% ширину с помощью CSS.

Получим следующую форму.

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент является универсальным, в отличии от элемента

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

Изменим нашу форму.

Уже лучше, давайте добавим поле с адресом электронной почты.

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

Давайте немного изменим форму, а именно:

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

Ну что же, уже лучше. Не хватает кнопок.

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

Добавим две кнопки:

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка очистки формы

Давайте дополним нашу форму.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

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

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

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

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

input type= «file» value=»Выберите файл»>

Дополним нашу форму. Создадим отдельную группу элементов.

Выбор даты

Добавим в нашу форму возможность выбора даты.

Выпадающий список

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

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

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

Зависимый переключатель

Зависимый переключатель создается с помощью тега input и его атрибута type= «radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник

Создание формы обратной связи

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

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

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

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

Создание формы обратной связи – HTML разметка

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

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

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

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

Давайте, кратко объясню, что тут к чему. В теге ‘form’ я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

Под каждым полем создаю ‘div’ для вывода уведомлений об ошибках при валидации ‘.contact-form__error’.

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

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу ‘body’, чтобы основной контент грузился быстрее.

Структура проекта

Здесь нас интересует папка ‘mail’. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл ‘config.php’. Тут задаются основные настройки формы.

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

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

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

То есть если имя обязательно, но не было заполнено, появиться сообщение ‘Поле обязательно для заполнения’. Вот так:

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

Можете вывести любое сообщение, которое подходит в вашем случае.

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

пароль и логин у каждого свои, а ‘HOST’ и ‘PORT’ для популярных почтовых сервисов я приведу в списке.

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

С остальным все проще, объяснять по сути и нечего:

Обратите внимание, что почта, указанная в ‘const SENDER’ должна совпадать с почтой, которую указали в ‘LOGIN’.

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле ‘valid.php’.

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

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

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

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

Также, в отправке формы и валидацие участвует файл ‘mail.js’. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.

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

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

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Переброс на страницу благодарности

Итак, открываем файл ‘mail.js’, находим участок кода:

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

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в ‘html’, просто измените расширение. Это никак не повлияет на работоспособность.

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

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

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

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

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

Маска ввода номера телефона

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

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять ‘jQuery Mask Plugin’ из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

Теперь необходимо инициализировать скрипт.

После этого маска успешно появилась в поле телефона:

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

Область для ввода сообщения

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

Стили я уже добавил в ‘style.css’, так что теперь наша форма выглядит так:

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

Для этого перейдем в файл ‘config.php’ и укажем ‘true’ в константе, отвечающей за это текстовое поле.

Теперь наше текстовое поле стало обязательно для заполнения. В файле ‘valid.php’, по аналогии с другими полями напишем такую проверку:

Обратите внимание на ‘text’ в проверке POST запроса. Этот то самое значение, которое указывали в параметре ‘name’ у тега ‘textarea’.

В файле ‘mail.js’ сохраним ‘div’ в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

А затем, ниже, напишем проверку:

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную ‘$text’ в тело письма. Делается это в файле ‘mail.php’ в 34 строке, той самой, о которой я уже упоминал выше.

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

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

Checkbox

Настало время добавить ‘checkbox’ с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в ‘config.php’ обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Идем в файл ‘config.php’ и делаем поле обязательным.

Далее открываем файл ‘valid.php’ и добавляем следующий код:

Теперь переходим в файл ‘mail.js’ добавляем ‘div’ в который будет выводится ошибка, если она есть, и обработчик ошибки:

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.

Добавление файла

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

Настройки в файле ‘config.php’:

Вот так теперь выглядит форма.

А вот так выглядят пришедшие данные.

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

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

Источник

Создаем аккуратную контактную форму на HTML5

В этом уроке мы узнаем, как создать шикарную контактную форму с поддержкой HTML5 AJAX. Форма будет использовать некоторые из новых элементов и атрибутов ввода HTML5 и будет проверена с помощью встроенной в браузер проверки формы.

Мы будем использовать jQuery и Modernizr, чтобы помочь со старыми браузерами, и PHP на стороне сервера для проверки ввода.

Шаг 1: Начало работы

Для начала нам нужно настроить наш каталог и файлы. Для начала я настоятельно рекомендую HTML5 boilerplate. Это действительно хорошая отправная точка для любого проекта HTML5 и сэкономит вам много времени. Для этого урока я выбрал «BOILERPLATE CUSTOM».

Для получения дополнительной информации о HTML5 boilerplate ознакомьтесь с этим руководством на Nettuts+.

Это все, что нам нужно для начала! Шаблон HTML5 включает в себя потрясающий набор CSS с разумными настройками по умолчанию и включает все библиотеки JS (jQuery & Modernizr), которые мы собираемся использовать сегодня. Все наши JS-файлы и CSS-файлы были подключены в index файле. Теперь пришло время перейти к разметке.

Шаг 2: Форма

Это весь HTML-код, который нам понадобится для нашей формы. Давайте посмотрим на каждый отдельный раздел:

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

Шаг 3: Стилизация формы

Вот наша форма, выглядит не очень.

Сразу после этого вставьте следующий CSS:

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

Теперь форма выглядит лучше! CSS довольно стандартный, но я остановлюсь на нескольких вещах, которые не так очевидны:

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

Это даст нам хороший эффект при нажатии, когда кнопка отправки активна.

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

Это нормализует внешний вид текста-заполнителя на полях ввода и текстовых областях. Здесь мы делаем его светло-серым и выделяем его курсивом. Это даст нам одинаковое отображение во всех браузерах, кроме Opera, которая не поддерживает стилизацию placeholder. IE просто не поддерживает атрибут placeholder. Полная остановка. Мы будем использовать JavaScript, чтобы обойти это. Вы можете узнать больше о стилизации HTML5-форм с помощью CSS (2.1 + 3) здесь.

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

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

Шаг 4: Подготовка к проверке на стороне сервера

Давайте погружаться. Откройте файл process.php и вставьте следующее:

После этого мы устанавливаем некоторые общие данные для отправки формы:

Мы могли бы объединить дату и время, если бы хотели:

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

Шаг 6: Что делать дальше.

Это логика, которую мы будем использовать для отправки сообщения (вставьте это после того, как мы выполнили нашу проверку):

Это должно привести к подобному письму:

Мы будем хранить наши данные в ассоциативном массиве. Этот массив имеет три элемента:

Еще одна вещь, которую мы должны иметь в виду, в конечном варианте, если в браузере пользователя включен JavaScript, мы хотим отправить форму через AJAX. Это будет означать, что мы хотим, чтобы наш AJAX-запрос был размещен в том же месте, что и отправка формы, когда JavaScript отключен. Поскольку форма уже была бы проверена на стороне клиента, она пройдет через всю проверку на стороне сервера, и подробности будут отправлены нам по электронной почте. Если форма невалидна, она никогда не будет отправлена (так как проверка браузера/JavaScript предотвратит это). Это означает, что с помощью запроса AJAX у нас нет причин для перенаправления или установки каких-либо переменных сессии. В заключительной части этого скрипта мы проверим, был ли текущий запрос к process.php запросом AJAX или нет, и, если это так, установите переменные сессии и перенаправьте.

В целом вы должны иметь в итоге это:

Все, что нужно для обработки отправки нашей формы, сделано и уместилось менее чем в 90 строках PHP! Все, что нам нужно сделать сейчас, это обновить пользователя и предоставить либо сообщение об успехе, либо сообщение об ошибке. Вы можете сохранить process.php сейчас.

Шаг 7: Обновим интерфейс

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

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

Если вы отправите невалидную форму, вы должны получить это:

И если вы правильно заполните форму, вы должны получить:

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

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

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

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

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

Не забывайте session_start() в верхней части страницы! Теперь у нас есть полнофункциональная контактная форма.

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

Это все прекрасно и здорово, но мы можем сделать еще один шаг вперед. Мы можем использовать JavaScript, чтобы реализовать функции, которых нет в браузере (встроенная проверка, поддержка атрибутов HTML5 и т. д.). Мы даже можем использовать JavaScript для отображения наших сообщений об ошибке/успехе и отправить форму с использованием AJAX.

Шаг 8: Что такое полифилл?

Мы будем использовать jQuery, чтобы помочь нам с нашим JavaScript. Мы будем использовать его в первую очередь для обработки нашего AJAX-запроса, анимации и обхода и манипуляции с DOM. Вы можете обойтись без его использования, но вам придется написать значительное количество кода. Его размер не слишком велик, поэтому я могу смириться с загрузкой файла такого размера. Я, вероятно, как и вы, предпочел бы написать меньше кода.

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

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

Это заставит любой браузер, который не поддерживает атрибут placeholder, действовать так, как если бы он поддерживал этот атрибут. Смотрите изображение ниже из IE8:

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

Шаг 9: Проверка формы, стили Polyfill

Мы связываем событие click с кнопкой отправки формы (хранится в переменной formSubmitButton ). Когда это событие сработает, мы проверим форму. Обычно в JavaScript мы делаем это для события submit формы, но поскольку новые браузеры используют свои собственные встроенные средства проверки, событие submit формы никогда не запускается. Браузер будет отображать свои собственные сообщения об ошибках, но они крайне противоречивы во всех браузерах, и в настоящее время нет способа их стилизовать. Отображение нашего собственного сообщения об ошибке обеспечит согласованность, а также покажет для браузеров, которые не поддерживают новые методы проверки. Чтобы браузеры не отображали свои сообщения об ошибках по умолчанию, мы возвращаем false в конце этой функции. Вот объяснение того, для чего нужны переменные, установленные вверху:

Это похоже на валидацию PHP, которую мы написали ранее!

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

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

Наш код для проверки элементов HTML5:

Если значение отсутствует (вызвано обязательными полями), мы добавляем сообщение об ошибке в массив ошибок, который мы установили ранее. Для этого мы используем метод push() объекта массива. Сообщение об ошибке будет состоять из имени элемента (первая буква в верхнем регистре), соединенного с требуемым сообщением об ошибке, которое мы установили ранее в нашем скрипте.

Если значение этого поля формы не пропущено, мы хотим определить, были ли введены правильные данные. Единственное поле ввода в нашей форме, который нуждается в проверке, это поле электронной почты. Имея это в виду, в elseif части нашего кода мы проверяем, равно ли свойство typeMismatch объекта validity true и является ли тип этого поля ввода действительно электронной почтой. Если это так, мы добавляем сообщение об ошибке электронной почты в наш массив ошибок.

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

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

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

Во-первых, мы проверяем, является ли это поле обязательным (определяется атрибутом required ). Затем мы используем Modernizr, чтобы проверить, поддерживается ли атрибут required браузером. Если нет, нам нужно вручную проверить значение элемента и сравнить его с атрибутом placeholder. Если они одинаковые, то, очевидно, это поле формы не заполнено, поэтому мы делаем четыре вещи:

Затем мы собираемся проверить, является ли это поле ввода полем электронной почты, и, если это так, был ли введен действительный адрес электронной почты.

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

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

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

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

Функция showNotice будет принимать два аргумента.

Мы получаем первый символ ( charAt(0) ), делаем его заглавным ( toUpperCase() ), а затем возвращаем его с остальной частью строки минус первый символ ( slice(1) ). charAt, toUpperCase и slice являются методами строкового объекта. Вы можете прочитать больше об объекте-прототипе здесь или здесь.

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

Если форма валидна, мы должны отправить ее через AJAX.

Заключение

Поздравляю! Вы сделали это. Это была долгая поездка, и мы рассмотрели много вопросов в этом уроке.

Спасибо за чтение, и я надеюсь, что вам понравился этот урок!

Источник