Август 11th, 2014 
admin
По моему глубокому убеждению, очень важно осознавать [позитивное] влияние HTML5 на контактные формы и на то, как они будут функционировать в ближайшие годы.
И действительно, мы не можем на сегодняшний день реализовать все новые функции, но вы ведь не хотите быть в рядах отстающих, когда эти функции наконец-то получат широкое распространение?
Именно поэтому данная статья посвящена новым функциям HTML5, которые уже поддерживаются всеми основными браузерами, и частично теми, которые всеми считаются отстающими. Предлагаю вашему вниманию руководство по тому, как сделать форму обратной связи с помощью HTML5.
Смотреть Демо
Смотреть CSS
Дизайн
Прежде всего, хочу обратить ваше внимание на то, что это не учебник по Photoshop. Я разработал дизайн красивой формы обратной связи, но в дальнейшем мы сфокусируем свое внимание на ее создании с использованием новейших методов кодирования и на том, как сделать, чтобы она корректно функционировала.
Поля формы обратной связи html
Разметка HTML5
Итак, у нас есть дизайн контактной формы, с которой нам предстоит работать. Теперь наша задача – построить структуру данной формы при помощи HTML5, чтобы, в конечном счете, у нас получилась отличная форма обратной связи для сайта на html и php.
Во-первых, откройте новый PHP-файл и сохраните его как index.php. Для создания функций формы нам необходимо будет использовать язык программирования PHP, поэтому потребуется доступ к веб-серверу, чтобы проверить код. В идеале вы можете использовать свой компьютер в качестве сервера при помощи Xampp; либо воспользоваться свободным местом на онлайн-хостинге, вот только в таком случае вам придется повторно загружать файлы каждый раз, когда захочется их проверить.
Doctype
У нас есть пустой документ PHP, давайте же приступим к созданию соответствующего doctype, который, между прочим, создать при помощи HTML5 намного проще, чем при использовании предыдущей версии!
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
</body>
</html>
|
Да-да, именно так. Здесь (т.е. у HTML5 ) вы не увидите ужасающие комбинации из букв и цифр. Все намного проще – <!DOCTYPE HTML>.
Для сравнения doctype у XHTML выглядит следующим образом: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
Почувствовали разницу? Как говорится – no comments; победитель очевиден. Более того, пример с doctype не единичен, т.к. многие теги и атрибуты отныне у HTML5 представлены в намного упрощенном виде – теперь нет пугающих по длине кодов и ужасающих по длине строк JavaScript.
Структура
Следующим нашим шагом должно быть кодирование основной структуры страницы. Для этого нам следует еще раз взглянуть на дизайн контактной формы и разделить его, исходя из логики, на секции.
Основные блоки формы обратной связи
В данном случае мы имеем секции: «заголовок», «контент» и «футер». Все очень просто, не так ли? А с использованием HTML5, будет все еще намного проще!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
<header class="body">
</header>
<section class="body">
</section>
<footer class="body">
</footer>
</body>
</html>
|
Именно так, я не шучу. Никаких дивов. Новые теги HTML5 обладают реальным смыслом и целями, использовать которые намного разумнее, чем повсеместное втыкание дивов.
Как вы видите, я назначил каждому элементу класс «body», чтобы показать, что они относятся к основному контенту и для того, чтобы они были оформлены в соответствующем стиле. Вы, конечно, можете все это проделать с помощью дивов, но только с несколькими основными body-элементами; это будет также просто как назначение классов.
Форма
Ну а теперь самое время, наконец-то, перейти к Контактной форме, не так ли? Очевидно, что разметка для контактной формы будет находиться в главном теге <section> .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<form>
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
|
Вот как выглядит эта разметка. Дайте-ка пояснить в ней несколько вещей.
Input Tag
Возможно, вы заметили, что input-теги отныне выглядят немного по-другому: у XHTML они закрываются с помощью знака «/» , т.е. <input /> , а у HTML5 они упрощены до <input> .
Input Name
Ко всем <input> тегам присужден атрибут «name». Мы еще поговорим об этом подробнее чуть позже, когда перейдем к созданию PHP-скрипта, который будет обрабатывать данные, введенные в контактную форму.
Input Type
Введение атрибута «type» демонстрирует значительное преимущество HTML5 по сравнению с XHTML. Но, к сожалению, многие новые <input> types не могут быть использованы на всю мощь из-за пока еще минимальной поддержки; радует то, что ситуация в скором времени должна измениться и эти атрибуты взвалят на себя огромную часть работы, сделав нашу жизнь намного проще.
Однако уже сейчас мы можем увидеть, пусть и небольшие, но некоторые преимущества, используя новые атрибуты <input> types. Как, например, сплошь положительный атрибут type=”email”. Пусть его позитивное влияние и не столь значительно, но он стоит того, чтобы его
прописать, хотя все браузеры, которые его не поддерживают, распознают данный атрибут как type=”text”. А вот с айфонами ситуация совсем другая: данный атрибут вызывает изменения в раскладке клавиатуры при переходе к полю ввести «email»: клавиша пробел становится меньше по размеру, а в центре появляется знак “@”.
Клавиатура Iphone устройств при вводе поля email
Атрибут Placeholder
Данный атрибут является одной из основных инноваций в HTML5, позволяющей веб-разработчикам делать вещи, которые ранее можно было осуществить лишь при использовании нескольких строк JavaScript.
Атрибут «placeholder» достаточно хорошо поддерживается большинством последних версий браузеров. Он позволяет присваивать значение (т.е. текст) текстовому полю, которое при постановке курсора исчезает и если текст не был введен в выбранное поле, а курсор убран – снова возникает.
В своей работе я всегда пользовался данной функцией, однако раньше, чтобы ее запустить, мне необходимо было прописывать громоздкие уродливые JavaScript коды.
Атрибут placeholder
CSS
А вот и то, что получится после прописки всех разметок к странице:
Разметка полей без CSS
Не очень-то и симпотично, не правда ли? Вот и пришло время перейти к таблице стилей CSS, чтобы придать нашей css форме обратной связи, так сказать, товарный вид, а именно приблизить ее к оригинальному дизайну, что был представлен в начале статьи. Давайте придадим тексту формы привычную ориентацию: чтобы текст полей располагался не слева направо, а сверху вниз.
|
1
2
3
4
5
|
label {
display:block;
margin-top:20px;
letter-spacing:2px;
}
|
CSS форма обратной связи
Для этого элементам «label» необходимо прописать свойства: display:block; . Это заставит их функционировать как блоковые элементы, т.е. вынуждая каждое текстовые поле располагаться с новой строки. Я также прописал парочку других не требующий разъяснений свойств для достижения красивого и эргономичного вида формы.
CSS форма обратной связи
Далее нам необходимо центрировать страницу и форму, и для этого потребуется прописать парочку стилей для <input> boxes, после чего мы увидим трансформацию страницы.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
/* Centre the page */
.body {
display:block;
margin:0 auto;
width:576px;
}
/* Centre the form within the page */
form {
margin:0 auto;
width:459px;
}
/* Style the text boxes */
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
|
Все вышеописанное является стандартными решениями CSS; прописав ширину к элементам с классом .body , а также выставив: margin:0 auto, вы центрируете страницу; подобным же образом можно все это проделать и с контактной формой.
Элементы форм input и textarea обладают многими характеристиками, что есть и у CSS, но есть несколько свойств, которые отличают главный текстовый блок (т.е. поле, для сообщения пользователя) от текстовых полей (т.е. поля для введения имени и адреса электронной почты). Очевидно, что для элемента «textarea» требуется намного больше места (высоты), но мы также применили для данного элемента полупрозрачное фоновое изображение. А выставить фоновое изображение достаточно просто: для этого укажите источник изображения, расположите его соответствующим образом, установив свойству background значение right и no-repeat .
Применяем CSS стили к форме обратной связи
Теперь можно добавить последние штрихи к текстовым блокам, немного применив CSS3.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
input, textarea {
width:439px;
height:27px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
|
Как вы можете видеть, мы добавили три новые строки к CSS, которые позволяют закруглить углы текстовых полей, что будет отображаться большинством браузеров… за исключением, конечно, Internet Explorer 8 и его более ранних версий.
Стандартное свойство border-radius (т.е. то, что позволяет создавать прямоугольники с закругленными углами) поддерживается Opera, а для того, чтобы оно поддерживалось Chrome и Safari, необходимо прописать префикс -webkit и соответственно префикс -moz для Firefox.
И последний нюанс относительно текстовых блоков – это надо прописать :focus для того, чтобы обеспечить некоторую визуальную обратную связь с действиями пользователя, что опять сделать проще пареной репы.
|
1
2
3
|
input:focus, textarea:focus {
border:1px solid #97d6eb;
}
|
Как вы видите, мы сделали так, чтобы при выборе курсором края форм элементов <input> и <textarea> подсвечивалось голубым цветом.
Подсветка полей формы
Наконец, мы добрались до создания кнопки «Отправить». Данная кнопка является элементом <input> , поэтому мы пропишем ей идентификатор id ="submit" , чтобы переопределить некоторые значения стилей, которые мы уже назначали для <input> элементов. См. ниже как это будет выглядеть.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
#submit {
width:127px;
height:38px;
background:url(images/submit.jpg);
text-indent:-9999px;
border:none;
margin-top:20px;
cursor:pointer;
}
#submit:hover {
opacity:.9;
}
|
Для начала необходимо прописать соответствующие ширину и высоту кнопки, и только потом установить фоновое изображение для кнопки, которое мы разработали. Пропишите text-indent:-9999px; что позволит проделать небольшой «трюк»: убрать вниз слово «Отправить» с кнопки и поставить на его место наше подготовленное фоновое изображение.
И наконец пропишите для кнопки псевдо элемент :hover , который также является нюансом CSS3 – он меняет цвет ссылки и фона при наведении на кнопку курсором. Данный эффект широко поддерживается основными браузерами, кроме … да-да, вы уже, наверняка, поняли, что речь опять пойдет об Internet Explorer 8 и его более ранних версий.
Создание функций формы с помощью PHP
Перво-наперво, мы должны вернуться к HTML, чтобы добавить парочку штрихов, которые позволят связать нашу контактную форму со сценарием PHP.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<form method="post" action="index.php">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
|
Так что это за штрихи? Взгляните на открывающий тег <form>. Мы добавили к нему два новых атрибута: method и action.
Атрибут method="post" предоставляет собой инструмент по передаче информации из формы в PHP-скрипт, так что скрипт может потом делать с этой информацией все, что захочет. Атрибут action="index.php" просто сообщает нам о местонахождении скрипта PHP, т.к. это код длиной всего лишь в несколько строк, мы вставим его чуть выше нашей формы в файле index.php. Это в свою очередь приведет к следующему: когда пользователь заполнит форму и нажмет кнопку отправить, вся информация уйдет в index.php и найдет скрипт.
Взгляните еще раз на выше представленный HTML-код и вы увидите, что у каждого элемента формы есть атрибут name . PHP использует этот атрибут для извлечения данных из каждого элемента формы. Давайте посмотрим, как он это делает …
|
1
2
3
4
5
|
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
?>
|
Если вы ранее никогда не использовали PHP, то вам может все показаться достаточно сложным, но на самом деле все очень просто. $ _POST – это встроенная PHP-функция, использующаяся для сбора данных формы, у которой прописан атрибут method="post" , как в нашем случае. Далее за этой функцией следует ['name'], который должен соответствовать атрибуту name из формы input ; в первую очередь name="name" !
Таким образом, PHP будет собирать все данные, введенные в поле «имя»; теперь нам нужно что-то, где все эти данные будут храниться. И вот тут-то в игру вступают переменные. В нашем случае $name – это переменная, которую мы будем использовать для хранения данных, введенных в поле «имя». И мы можем то же самое проделать для полей «email» и «сообщение». Все очень просто!
Теперь давайте еще добавим парочку переменных, которые нужны для корректного функционирования нашей контактной формы.
|
1
2
3
4
5
6
7
8
|
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: TangledDemo';
$subject = 'Hello';
?>
|
Эти новые переменные определяют назначение письма, текстовый блок и откуда письмо пришло. Следующий наш шаг будет направлен на то, чтобы хранить все данные, полученные с разных полей контактной формы, в одной переменной. Это необходимо для упрощения работы.
|
1
2
3
4
5
6
7
8
9
10
|
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: TangledDemo';
$subject = 'Hello';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
?>
|
Как вы видите из выше представленного сниппета, мы взяли уже знакомые переменные и прописали их в переменной $body , что фактически и станет содержанием письма.
Теперь настало время взяться за функцию mail() , чтобы форма наконец-то заработала, и ее можно было отправлять по электронке! Но для начала, необходимо объяснить, как данная функция работает при нажатии кнопки отправить, а не каждый раз при загрузке пользователем index.php .
|
1
2
3
4
5
|
<?php
if ($_POST['submit']) {
/* Anything that goes in here is only performed if the form is submitted */
}
?>
|
В принципе, любая информация, которую ввели пользователи, обработается в функции mail только один раз при нажатии кнопки «отправить». Опять же, атрибут ['submit'] в коде функции mail() должен соответствовать атрибуту кнопки в вашей форме.
Ну а сейчас можно двигаться дальше и перейти к использованию функции mail() .
|
1
2
3
4
5
6
7
8
9
|
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
|
Функция mail() – это встроенная функция PHP, которая выполняет задачу по отправке письма соответствующему получателю. Приведенный выше код отвечает за то, что если письмо было отправлено адресату правильно, то пользователю придет сообщение об успешной отправке письма, и, наоборот, в случае возникновения какой-либо проблемы, пользователь получит об этом уведомление.
Если вы сейчас проверите контактную форму на своем сервере, то обнаружите, что она работает корректно! Лучшим способом проверки будет загрузить форму на какой-нибудь онлайн сервер и прописать электронную почту получателя в контактной форме, т.к. на этом сервере работает несколько другая почтовая система.
Обратите внимание, что вы можете разместить данный скрипт туда, где хотите, чтобы появилось сообщение о подтверждении отправки письма. Например, если вы хотите, чтобы сообщение появилось над формой, как это обычно бывает, то вам просто необходимо разместить PHP-скрипт непосредственно над формой, а НЕ в отдельном файле PHP.
Защита от СПАМА
И последний аккорд в создании контактной формы – это установка защиты от спама, что сделать также очень и очень просто. Для этого нам нужно опять вернуться к HTML и добавить еще один <input> элемент к нашей форме. Давайте пропишем этот элемент непосредственно перед кнопкой «отправить».
|
1
2
|
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
|
Теперь вернемся к PHP, нам необходимо использовать атрибут POST method для извлечения любой информации, которую введет пользователь в поля формы. Мы придали элементу имя “human”, поэтому в PHP надо прописать следующую строчку: $human = $_POST['human']; .
Помните, что в условном операторе if , условие у нас проверяется всего один раз: идет проверка на заполнение всех форм. Ну а сейчас необходимо внести парочку изменений в данный код.
|
1
2
3
4
5
6
7
8
9
|
<?php
if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
}
?>
|
Условный оператор требует, чтобы значением атрибута ' human’ (ответ на вопрос анти-спам) было ‘4’. Это необходимо, чтобы функция почты работала корректно. Теперь нам нужно добавить последнюю часть кода, которая позволит пользователю знать, что он ответил на вопрос анти-спама неправильно.
|
1
2
3
4
5
6
7
8
9
10
11
|
<?php
if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>You answered the anti-spam question incorrectly!</p>';
}
?>
|
Это осуществляется с помощью добавления проверки else if , которая необходима при нажатии пользователем кнопки «отправить» и при неверном ответе на вопрос анти-спама (т.е. когда пользователь ввел не цифру ‘4’). В таком случае функция mail() не работает, т.е. сообщение не отправляется, а пользователь получает уведомление о неправильном ответе на вопрос анти-спама.
И… вот и все! У нас получилась красивая и абсолютно бесплатная форма обратной связи.
Последний PHP-код можете найти ниже, а также ссылки на демо-версию и CSS-файлы. Спасибо за внимание. Если прочли все до конца – вы просто молодцы! Сообщите мне, пожалуйста, получилось ли у вас создать контактную форму, оставив комментарий.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: TangledDemo';
$subject = 'Hello';
$human = $_POST['human'];
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
if ($_POST['submit'] && $human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>You answered the anti-spam question incorrectly!</p>';
}
?>
|
Обновление
Пара пользователей попросила меня показать код формы обратной связи с добавлением обязательных для заполнения полей. Вот скрипт, который помечает поля «name» и «email» как обязательные для заполнения…
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
if ($_POST['submit']) {
if ($name != '' && $email != '') {
if ($human == '4') {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Your message has been sent!</p>';
} else {
echo '<p>Something went wrong, go back and try again!</p>';
}
} else if ($_POST['submit'] && $human != '4') {
echo '<p>You answered the anti-spam question incorrectly!</p>';
}
} else {
echo '<p>You need to fill in all required fields!!</p>';
}
}
|
А вот как это будет выглядеть!
Смотреть Демо
Опубликовано в рубрике 
«у HTML5 они упрощены до »
нет, это черта html. в то время, как xhtml ближе к xml, и поэтому там обязательно закрытие.
«Не очень-то и симпотично»
симпАтия
«$ _POST – это встроенная PHP-функция»
неверно, это суперглобальный массив, «видимый» из любого места программы
«$from»
это не обратный адрес; это дополнительные заголовки. заголовок From: должен содержать корректный действующий e-mail, иначе не все почтовики согласятся принять адрес.
«$human == ‘4’»
так делать плохо. если хотя бы раз кто-то обучит своего бота этому трюку — пиши пропало. горы спама гарантированы.
[Ответить]