Замечание

Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

$text = nl2br ($_POST [ "mytext" ]);
?>

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php . В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

2000
2001
2002
……………………………………………
2050

II. Ввод данных через цикл:

$year = 2000 ;
for ($i = 0 ; $i <= 50 ; $i ++) // Цикл от 0 до 50
{
$new_years = $year + $i ; // Формируем новое значение
echo "" . $new_years . "" ; //Формируем новую строчку
}
?>

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

Описание:

Создадим HTML-форму для отправки файла на сервер.

Это очень важный элемент формы. В нем мы указываем каким способом будут передаваться данные и какому файлу. В данном случае все передачется методом POST файлу send.php. Программа в этом файле соответственно должна принять данные, они будут содержаться в post массиве, и отправить их на указанный email адрес.

Вернемся к форме. Вторая строка будет содержать поле для ввода ФИО. Имеет следующий код:

Тип формы text, то есть пользователь сможет ввести или скопировать сюда текст с клавиатуры. Под параметром name содержится название формы. В данном случае это fio, именно под таким именем будет передаваться все, что пользователь введен в данноу поле. Параметр placeholder указывает на то, что будет записано в этом поле в виде пояснения.

Следующая строка:

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

Следующей строкой будет кнопка "отправить":

И последней строкой в форме будет тэг

Частые ошибки, возникающие при отправке PHP формы с сайта

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

ini_set("display_errors","On");
error_reporting("E_ALL");

Файл send.php должен запускаться только на сервере, иначе код просто не будет работать. Желательно, чтобы это был не локальный сервер, так как он не всегда настроен на отправку данных на внешний почтовый сервер. Если вы запустите код не на сервере, то вам отобразиться код PHP прямо на странице.

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

Еще одна частая ошибка, когда появляется оповещение "Сообщение успешно отправлено", а письмо не приходит на почту. В этом случае нужно внимательно проверить строку:

if (mail("[email protected]", "Заказ с сайта", "ФИО:".$fio.". E-mail: ".$email ,"From: [email protected] \r\n"))

Вместо [email protected] должен быть email адрес на который нужно отправить письмо, а вместо [email protected] должен быть существующий email данного сайта. Например для сайта сайт это будет . Только в этом случае письмо с данными из формы будет отправлено.

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>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;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <p>Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.</p> <p>Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.</p> <p>Итак, начинаем создание формы обратной связи:</p> <h3>HTML</h3> <p>В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:</p> <p>< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя:</ label> < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон:</ label> < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail :</ label> < input maxlength= "30" type= "text" name= "mail" /> </ div> < div class = "right" > < label for = "message" > Сообщение:</ label> < textarea rows= "7" cols= "50" name= "message" ></ textarea> < input type= "submit" value= "Отправить" /> </ div> </ form> </p> <p>И визуально она выглядит сейчас следующим образом:</p> <p><img src='https://i0.wp.com/vaden-pro.ru/sites/default/files/forma-html.png' width="100%" loading=lazy></p> <p>Согласен, пока все некрасиво и ничего не понятно, но мы только начали.</p> <p>Рассмотрим приведенный выше код подробно:</p> <ul><li><p>< form method= "post" action= "mail.php" > … </ form> </p><br> для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).</li> <li><p>< input maxlength= "30" type= "text" name= "name" /> </p><br> Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.</li> <li><p>< label for = "name" > Имя:</ label> </p><br> Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.</li> <li><p>< textarea rows= "7" cols= "50" name= "message" ></ textarea> </p><br> Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.</li> <li><p>< input type= "submit" value= "Отправить" /> </p><br> О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.</li> <li><p>< div class = "right" > </ div> </p><br> использованы только для дальнейшего визуального оформления формы.</li> </ul><h3>CSS</h3> <p>Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/oformlenie-formi.png' width="100%" loading=lazy></p> <p>Мы использовали данный код:</p> <p>form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; } </p> <p>Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:</p> <ol><li>Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.</li> <li>Не используйте для переноса строк и создания отступов лишние теги по типу <span>< br>, < p> </span> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться <span>< br> </span> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .</li> <li>Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.</li> </ol><p>Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .</p> <h3>PHP</h3> <p>Ну вот и пришло время сделать нашу форму работоспособной.</p> <p>Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.</p> <p>В конечном итоге его код будет выглядеть следующим образом:</p> <p><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Ваше сообщение успешно отправлено</title> </head> <body> <?php $back = "<p><a href=<span>\" javascript: history.back()\" >Вернуться назад</a></p>" </span>; if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { $name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ; mail (, , "Вам написал: " . $name . "<br />Его номер: " . $phone . "<br />Его почта: " . $mail . <span>"<br /> Его сообщение: " </span>. $message , ) ; echo <span>"Ваше сообщение успешно отправлено!<Br> Вы получите ответ в ближайшее время<Br> $back " </span>; exit ; } else { echo ; exit ; } ?> </body> </html></p> <p>Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:</p> <p>$back = "<p><a href=<span>\" javascript: history.back()\" >Вернуться назад</a></p>" </span>; </p> <p>Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.</p> <p>if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { <span>//внутрення часть обработчика </span> } else { echo <span>"Для отправки сообщения заполните все поля! $back " </span>; exit ; } </p> <p>Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.</p> <p>Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.</p> <p>Дале вставляем во внутреннюю часть обработчика формы:</p> <p>$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ; </p> <p>Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.</p> <p>Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.</p> <p>Полностью отказываться от защиты формы на серверной стороне в пользу JS не рекомендую, поскольку хоть и крайне редко, но встречаются уникумы с отключенным в браузере JS.</p> <p>После чистки тегов добавляем отправку сообщения:</p> <p>mail (<span>"почта_для_получения_сообщений@gmail.com" </span>, <span>"Письмо с адрес_вашего_сайта" </span>, "Вам написал: " . $name . "<br />Его номер: " . $phone . "<br />Его почта: " . $mail . <span>"<br /> Его сообщение: " </span>. $message , <span>"Content-type:text/html;charset=windows-1251" </span>) ; </p> <p>Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:</p> <ol><li>"почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту</li> <li>"Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.</li> <li>"Вам написал: ".$name." <span>< br /> </span>Его номер: ".$phone." <span>< br /> </span>Его почта: ".$mail." <span>< br /> </span>Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <span>< br /> </span> делаем перенос строки, чтобы сообщение в целом было читабельно.</li> <li>Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.</li> </ol><p><b>ВАЖНО! </b></p> <p>Кодировка указанная в «голове» документа ( <span>< meta http- equiv= "Content-Type" content= <span>"text/html; charset=windows-1251" </span> /> </span>), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/kodirovka-faila.png' width="100%" loading=lazy></p> <p>Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.</p> <h3>Проверка формы на адекватность вводимых данных</h3> <p>Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.</p> <p>Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.</p> <p>Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:</p> <p>< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert(<span>"Имя введено неверно, пожалуйста исправьте ошибку" </span>) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert(<span>"Телефон введен неверно" </span>) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert(<span>"E-mail введен неверно, пожалуйста исправьте ошибку" </span>) ; return false ; } return true ; } </script> </p> <p>Ну а теперь обычный разбор:</p> <p>Для того, <b>чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка </b> вешаем запуск нашего скрипта на тег form:</p> <p>< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" > </p> <p>Теперь по пунктам забираем состав проверки:</p> <p><img src='https://i1.wp.com/vaden-pro.ru/sites/default/files/proverka-formi.png' width="100%" loading=lazy></p> <br><img src='https://i0.wp.com/vaden-pro.ru/sites/default/files/soobchenie-o-oshibke.png' width="100%" loading=lazy><p>Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.</p> <p>В основном, для передачи параметров используются методы <b>POST </b> и <b>GET </b>.<br> Главное отличие методов <b>POST </b> и <b>GET </b> заключается в способе передачи информации. В методе <b>GET </b> параметры передаются через адресную строку (<b>URL </b>), т.е. в <b>HTTP </b>-заголовке запроса, в то время как в методе <b>POST </b> параметры передаются через тело <b>HTTP </b>-запроса и никак не отражаются в адресной строке.</p><h5>1. Кнопки – Тег <BUTTON></h5><p>Тег <b> <BUTTON> </b> создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега <b> <INPUT> </b> (с параметром <b>type="button | reset | submit" </b>). В отличие от этого тега, <b> <BUTTON> </b> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML , в том числе изображения. Используя стили, можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.<br> Теоретически, тег <b> <BUTTON> </b> должен располагаться внутри формы, устанавливаемой элементом <b> <FORM> </b>. Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом <b> <BUTTON> </b>, если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <b> <BUTTON> </b> в контейнер <b> <FORM> </b> обязательно. Закрывающий тег <b> </BUTTON> </b> обязателен.<br> Параметры:<br><b>disabled </b> – блокирует доступ и изменение элемента. <br><b>type </b> – тип кнопки<br><b>value </b> – Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов. <br></p><p> <button>Кнопка с текстом</button> <br> Параметр <b>DISABLED </b><br> Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу <b>Tab </b>, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.<br> <form> <p><button>Активная кнопка</button> <button disabled>Неактивная кнопка</button></p> </form> Параметр <b>TYPE </b><br> Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции. Значение по умолчанию: <b>button </b>.<br> Аргументы:<br><b>button </b> – Обычная кнопка. <br><b>reset </b> – Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.</p><h5>Submit – Кнопка для отправки данных формы на сервер.</h5> <form method="post"> <p><input type="text" name="user"></p> <p><button type="reset">Очистить форму</button> <button type="submit">Отправить форму</button></p> </form> <?php echo $_POST["user"]; // Если выбран хоть 1 элемент?> Параметр <b>VALUE </b> Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «<b>имя=значение </b>», где имя задается параметром name тега <b> <BUTTON> </b>, а значение - параметром <b>value </b>. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр <b>value </b> применяется для доступа к данным через скрипты. <form action="/html/example/handler.php"> <p><input type="text" name="user"></p> <p><button value="11111010101" name="hidden" type="submit"> Отправить форму</button></p> </form> <h5>1.1. Кнопка (input type=button)</h5> <form> <input type=button name="save" value="Привет!"> </form> <h5>1.2. Кнопка с изображением (input type=image)</h5> <button> <img src='https://i2.wp.com//images/umbrella.gif' loading=lazy> Кнопка с рисунком </button></p> <p>Кнопки с изображениями аналогичны по действию кнопке <b>Submit </b>, но представляют собой рисунок. Для этого задаем <b>type=image </b> и <b>src="image.gif" </b>.<br></p><p> <form> <input type="image" src="image.gif" name="sub" /> </form> </p><p>Когда пользователь щелкнет где-нибудь на изображении, соответствующая форма будет передана на сервер с двумя дополнительными переменными – <b>sub_x </b> и <b>sub_y </b>. Они содержат координаты нажатия пользователя на изображение. Опытные программисты могут заметить, что на самом деле имена переменных, отправленных браузером, содержат точку, а не подчеркивание, но PHP автоматически конвертирует точку в подчеркивание.</p><h5>1.3. Кнопка отправки формы (input type=submit)</h5><p>Служит для отправки формы сценарию. При создании кнопки для отправки формы необходимо указать 2 атрибута: <b>type="submit" </b> и <b>value="Текст кнопки" </b>. Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки. <br></p><p> <input type="submit" name="Submit" value="Отправить"> <br>РНР -сценарий не требуется.</p><h5>1.4. Массив кнопок (submit) для выбора варианта действий</h5> <form method="post"> <input type=submit name="save" value="first"> <input type=submit name="save" value="pref"> <input type=submit name="save" value="next"> <input type=submit name="save" value="last"> </form> <?php $action = $_POST["save"]; switch ($action) { case "first": echo "Первый"; break; case "pref" : echo "Предыдущий"; break; case "next" : echo "Следующий"; break; case "last" : echo "Последний"; break; } ?> <h5>2. Кнопка сброса формы (Reset)</h5><p>При нажатии на кнопку сброса (<b>reset </b>), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.<br></p><p> <input type="reset" name="Reset" value="Очистить форму"> <br>РНР -сценарий не требуется.</p><h5>3. Флажок (checkbox)</h5><p>Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).<br></p><p> <form method="post"> <input type="checkbox" name="chb" value="white">Белый<br> <input type="checkbox" name="chb" value="green">Зеленый<br> <input type="checkbox" name="chb" value="blue">Синий<br> <input type="checkbox" name="chb" value="red">Красный<br> <input type="checkbox" name="chb" value="black">Черный<br> <input type="submit" name="Submit" value="Отправить"> </form> <?php if (!empty($_POST["chb"])) { $chb = $_POST["chb"]; foreach($chb as $index => $go) { echo $index." - > ".$go."<br>"; }; }; </p><h5>4. Переключатель(radio)</h5><p>Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.<br> Пример 1.<br></p><p> <form method="post"> <input name="mycolor" type="radio" value="white">Белый<br> <input name="mycolor" type="radio" value="green" checked>Зеленый<br> <input name="mycolor" type="radio" value="blue">Синий<br> <input name="mycolor" type="radio" value="red">Красный<br> <input name="mycolor" type="radio" value="black">Черный<br> <input type="submit" name="Submit" value="Отправить"> </form> <?php echo $_POST["mycolor"]; ?> <br> Пример 2.<br> <form method=GET> // первый набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> // второй набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> // третий набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> <input type="submit" value="Отправить"> </form> <?php $rdi = $_GET["rdi"]; while(list($key,$val) = @each($rdi)) echo "ключ - $key, значение - $val<br>\n"; ?> </p><h5>5. Текстовое поле (text)</h5><p>При создании обычного текстового поля размером size и максимальной допустимой длины <b>maxlength </b> символов, атрибут type принимает значение <b>text </b>. Если указан параметр <b>value </b>, то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.<br></p><p> <form method="post"> <input type="text" name="txtName" size="40" maxlength="35" value="Текст по умолчанию"> <input type="submit" name="Submit" value="Отправить"> </form> <?php echo $_POST["txtName"]; ?> </p><h5>6. Поле для ввода пароля (password)</h5><p>Полностью аналогичен текстовому полю, за исключением того, что символы, набираемые пользователем, не будут отображаться на экране.<br></p><p> <form method="post"> <input type="password" name="txtName" size="40" maxlength="35"> <input name="Submit" type="submit" value="Отправить"> </form> <?php echo $_POST["txtName"]; ?> </p><h5>7. Скрытое текстовое поле (hidden)</h5><p>Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.<br></p><p> <form method="post"> <input type="hidden" name="txtName" value="Это скрытый текст"> <input name="Submit" type="submit" value="Отправить"> </form> <?php echo $_POST["txtName"]; ?> </p><h5>8. Выпадающий список (select)</h5><p>Тэг <b> <select> </b> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.<br> Список начинается с парных тегов <b> <select></select> </b>. Теги <b> <option></option> </b> позволяют определить содержимое списка, а параметр <b>value </b> определяет значение строки. Если в теге <b> <option> </b> указан параметр <b>selected </b>, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если <b>size </b> равен <b>1 </b>, то список будет выпадающим. Если указан атрибут <b>multiple </b>, то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при <b>size = 1 </b> не имеет смысла.<br></p><p> <form method="post"> <select name="color"> <!--выпадающий список--> <!--<select name="color" size=3> <!--список с прокруткой--> <option value="white">Белый</option> <option value="green">Зеленый</option> <option value="blue">Синий</option> <option value="red">Красный</option> <option value="black">Черный</option> </select> <input name="Submit" type="submit" value="Отправить"> </form> <?php f (!empty($_POST["color"])) { echo $_POST["color"]; }; ?> </p><p>Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.</p><p> <form method="post"> <select name=years> <?php $year = 2000; for ($i = 0; $i <= 50; $i++) // Цикл от 0 до 50 { $new_years = $year + $i; // Формируем новое значение echo "<option value=".$new_years.">".$new_years."</option>"; //строка } ?> </select> <input name="Submit" type="submit" value="Отправить"> </form> <?php if (!empty($_POST["years"])) { echo $_POST["years"]; }; ?> </p><h5>9. Многострочное поле ввода текста (textarea)</h5><p>Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. При необходимости можно указать атрибут <b>readonly </b>, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <b> <textarea> .
Существует параметр wrap – задание переноса строк. Возможные значения:
off – отключает перенос строк;
virtuals – показывает переносы строк, но отправляет текст как он введен;
physical – переносы строк оставляются в исходном виде.
По умолчанию тег </b> создает пустое поле шириной в <b>20 </b> символов и состоящее из <b>2 </b> строк.<br></p><p> <form method="post"> <textarea name="text" cols="40" rows="5">