Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.
2. Пошаговая форма регистрации с использованием jQuery
Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.
3. Пошаговая форма
Заполнение формы в несколько шагов с проверкой правильности заполнения.
4. Контактная форма для сайта
Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.
5. Анимированное переключение между формами на jQuery
Анимированное переключение с помощью jQuery между формой входа на сайт, формой регистрации и полем для восстановления пароля. На демонстрационной странице нажмите на желтую ссылку для того чтобы увидеть эффект.
6. Выезжающая PHP форма обратной связи
Подобное решение можно использовать для того, чтобы дать посетителю возможность быстро связаться с владельцем сайта с любой страницы. На демонстрационной странице нажмите на стрелочку снизу, чтобы выехала форма.
7. PHP форма регистрации с использованием jQuery и CSS3
Форма с проверкой правильности ввода информации.
8. PHP форма регистрации в стиле Facebook
Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.
9. jQuery контактная форма «SheepIt»
Реализована возможность перед отправкой сообщения добавлять новые поля.
10. Контактная форма «Fancy AJAX Contact Form»
Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.
11. Система авторизации/регистрации на сайте
С проверкой правильности заполнения.
13. Плагин jQuery «Contactable»
Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.
14. jQuery плагин «Formwizard»
Плагин для реализации пошаговых форм на сайте.
15. Контактная форма в стиле старой печатной машинки
HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки , подсказки и т.д. Весь код формы заключается в элемент .
Большая часть информации веб-форм передаётся с помощью элемента . Для ввода одной строки текста применяется элемент , для нескольких строк - элемент . Элемент создает выпадающий список.
Элемент создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.
Last Name Last Name Last Name
Поля формы можно разделять на логические блоки с помощью элемента . Каждому разделу можно присвоить название с помощью элемента .
Контактная информация
Имя
E-mail
Рис. 1. Группировка полей формы
Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .
Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.
Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:
Input:focus { background: #eaeaea; }
Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и (только в один элемент каждой формы).
Пример создания формы регистрацииHTML разметка
Регистрация
Имя
Пол
мужской
женский
E-mail
Страна
Выберите страну проживания
Россия
Украина
Беларусь
Отправить
Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.
Рис. 2. Внешний вид формы по умолчанию
Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.
Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} }
Файл form.php
Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.
Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.
Давайте для начала создадим форму, которую потом будем проверять:
Ваше имя:
Ваш пароль:
Ваш пол:
Выберите число:
1
2
3
Ваше сообщение:
Согласитесь с нашими правилами:
Загрузите файл:
Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.
Теперь поговорим о том, как получать значения из полей формы. Ведь прежде, чем их проверить, надо узнать, что написал там пользователь. Общий вид получения доступа к полю форму такой:
Document.имя_формы.имя_поля.value;
То есть сначала обращаемся к объекту Document , затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля . Давайте выведем все поля, которые подчиняются этому общему виду:
Var form = document.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");
Это все поля, которые имеют свойство value , и к которым можно получить доступ таким образом.
Теперь поговорим об одном особенном элементе формы - radio . Получим доступ к значению radio :
Var sex = (document.form1.sex.checked)?
document.form1.sex.value: document.form1.sex.value;
Обратите внимание, что у нас есть два элемента radio , которые находятся в массиве sex . Индексы у них 0 и 1 . В данном скрипте мы проверяем, если у нас первый элемент включён (checked ), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF . Разумеется, можно было бы написать и так:
Var sex;
if (document.form1.sex.checked) sex = document.form1.sex.value;
else sex = document.form1.sex.value;
Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут "onSubmit " со значением "return check(); ". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true , либо false . Если она вернёт true , то форма отправится на сервер, а если false , то форма не будет отправлена.
Теперь создадим функцию check() , которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).
Function check(form) {
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = "";
if (firstname.length < 3)
bad += "Имя слишком короткое" + "\n";
if (firstname.length > 32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules != "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad != "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}
В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad , в которую записываем все некорректные данные. Затем идёт целый набор IF , которые проверяют поля в форме и записывают все ошибки в переменную bad . Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert() ) с ошибками. И возвращаем false , чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true , чтобы форма была отправлена уже на обработку в "handler.php ".
Как и многие веб-разработчики, я посвящаю много времени тестированию пользовательского интерфейса сайтов, над которыми работаю.
Автоматизированное тестирование, конечно, является хорошей помощью в этом процессе, но «болевые точки » в интерфейсе зачастую невозможно выявить иным способом, кроме как использовать сайт. Ещё и ещё раз. Этот процесс может очень быстро надоедать. Особенно заполнение форм.
Я сам попал в такую ситуацию пару месяцев назад, когда мы добавляли британский фунт к поддерживаемым валютам при расчёте в Wufoo .
Для проверки необходимо было заполнить множество полей с именами, адресами, номерами кредиток и всего прочего, что подразумевается в процессе расчёта. Разумеется, значительная часть этих данных не должна была повторяться:
В конце концов, я сделал букмарклет для быстрого заполнения форм тестовыми данными. (Bookmarklet – программа на JavaScript , выполненная в виде закладки в браузере, гибрид английских слов «bookmark » – закладка и «applet » – маленькое приложение. – Прим. перев.)
Я выбрал форму букмарклета, потому что:
- его легко передать пользователю;
- его легко обновить без участия пользователя;
- он запускается на любой платформе без изменений.
Вы можете легко сделать букмарклет, создав новый «загончик » на CodePen и поместив в HTML что-то вроде:
Пользователю достаточно перетащить получившуюся ссылку в область закладок своего браузера. Клик по закладке запустит код на текущей странице.
В этом проекте я полагался на jQuery для придания коду максимальной удобочитаемости и кроссбраузерности. Если кому-то нужна версия на чистом JavaScript , напишите мне комментарий – я постараюсь что-нибудь сообразить.
Для создания случайных данных я использовал замечательную библиотеку Faker . Её JavaScript -реализацию можно взять здесь .
Основа букмарклетаМы можем поместить весь код прямо в ссылку. Но такой вариант будет неудобно читать и сопровождать. Кроме того, мне хотелось иметь возможность вносить исправления в код, не заставляя пользователей обновлять закладку. Так что лучше оставить в букмарклете ссылку на внешний файл.
Сам букмарклет выглядит так:
Мой букмарклет
В нём мы подгружаем скрипт в тело страницы и добавляем туда же ссылку на внешний файл JavaScript . Необходимо заметить, что, если букмарклет применяется к тестированию страницы, загружаемой по https , то и внешний JS -файл должен отдаваться по https , иначе браузер выдаст ошибку безопасности.
Вполне возможно, что при разработке букмарклета вы захотите воспользоваться локальным сервером. В таком случае не забудьте заменить адрес в ссылке на адрес реального сервера, когда будете распространять ваш скрипт.
Заполнение полейТеперь, когда мы закончили с закладкой, загружающей наш скрипт, можно взяться и за сам скрипт.
Сверхважной задачей для нас будет не сломать ничего в странице, над тестированием которой будет работать наш скрипт.
Поэтому мы обернём его в самозапускающуюся анонимную функцию . Это соответствующим образом ограничит область видимости наших функций и переменных:
Мне очень нравится функция генератора псевдослучайных чисел, приведённая Крисом Койлером в этой статье . Воспользуемся ей по мере необходимости:
var _rand = function(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
Теперь загрузим FakerJS . Поскольку наш скрипт зависит от jQuery , мы можем использовать его механизм отложенной загрузки при помощи функции $.getScript :
Теперь, когда доступ к Faker нам обещан , мы можем использовать его методы для генерации разнообразных правдоподобных имён, мест, адресов и других тестовых данных.
Повторное использование сгенерированных данных обеспечит нам следующий конструктор:
var FormData = function(faker) { this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100,9999); // set this value to your password specifications this.password = "pass1234"; this.name = faker.Name.findName(); this.address1 = faker.Address.streetAddress(); this.city = faker.Address.city(); this.state = faker.random.br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" actual credit card number this.cc = "4242 4242 4242 4242"; this.exp1 = _rand(1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999); };
Неплохо было бы протестировать также чекбоксы и радиокнопки на нашем сайте, выбирая их в случайном порядке. Для этого нам придётся несколько расширить функциональность нашего конструктора:
// Randomly select dropdown FormData.prototype.randomizeSelect = function(el) { var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop("selected", false) .eq(_rand(1,len + 1)) .prop("selected", true); }; // Randomly select radio button FormData.prototype.randomizeRadio = function(radios) { radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len - 1)) .prop("checked", true); }; // Add some lorem text for textareas FormData.prototype.randomizeParagraph = function(el) { $(el).val(this.faker.Lorem.sentence(5)); }; // Randomize all checkbox fields FormData.prototype.randomizeCheckbox = function(el) { var $el = $(el); $el.prop("checked", false); if (_rand(0,1) === 0) { $el.prop("checked", true); } }; FormData.prototype.randomizeEmail = function(el) { // if we want different emails for all email fields, we can modify this $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); };
И наконец, нам нужно сопоставить генерируемые данные с различными полями тестируемых форм. Мы извлечём из нашей страницы все поля форм и заполним их данными в соответствии с их типом и CS S-классом.
В таком виде наш скрипт прекрасно реализует разделение между механизмом генерации данных и механизмом их использования:
var fillForm = function() { data = new FormData(window.Faker); $("#name").val(data.name); $("#username").val(data.username); $("#cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("#cvv").val(data.cvv); $("#address").val(data.address1); $("#city").val(data.city); $("#state").val(data.state); $("#zip").val(data.zip); $("#pw").val(data.password); $("#pw-repeat").val(data.password); data.randomizeRadio($("")); // Randomize all select boxes $("select").each(function() { data.randomizeSelect(this); }); // Randomize all checkboxes $("input}
