How to Create an HTML Form That Sends You an Email
Dealing with improved UX can cost time and money. Oftentimes, problems your website visitors have simple tweaks to fix. This brings the following question:
“How do you find out if customers are enjoying the experience of your website?”
The answer may be simpler than you think. Strategically placed, thoughtfully-made web forms are critical for solving…
Как сделать форму отправки в html
Тег <form> (от англ. form — форма) устанавливает форму на веб-странице.
Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует её использование.
Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента <form> . Предварительно браузер подготавливает информацию в виде пары « имя=значение », где имя определяется атрибутом name элемента <input> , а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.
Параметры перечисляются после вопросительного знака, указанного после адреса серверной программы и разделяются между собой символом амперсанда ( & ). Русские буквы преобразуются в шестнадцатеричное представление (в форме %HH , где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс ( + ).
Допускается внутрь контейнера <form> помещать другие элементы, при этом сама форма никак не отображается на веб-странице, видны только элементы внутри неё.
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
Также для этого элемента доступны универсальные атрибуты.
accept-charset¶
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.
Синтаксис
Значения
Название кодировки, например Windows-1251 , UTF-8 и др.
Значение по умолчанию
Кодировка, установленная для страницы.
action¶
Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.
Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к серверному файлу.
Значение по умолчанию
autocomplete¶
Управляет автозаполнением полей форм. Значение может быть перекрыто атрибутом autocomplete у конкретных элементов формы.
Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete .
При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое.
Синтаксис
Значения
on Включает автозаполнение формы. off Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).
Значение по умолчанию
enctype¶
Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла ( input type=»file» ), следует определить атрибут enctype как multipart/form-data .
Синтаксис
Значения
application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
method¶
Атрибут method сообщает серверу о методе запроса.
Синтаксис
Значения
Значение атрибута method не зависит от регистра. Различают два метода — get и post .
get Этот метод является одним из самых распространённых и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары « имя=значение » присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ & ). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке. post Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get , поскольку у post не установлено ограничение в 4 Кб. Большие объёмы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.
Значение по умолчанию
Определяет уникальное имя формы. Как правило, имя формы используется для доступа к её элементам через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name .
Значение по умолчанию
novalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность. Такая проверка осуществляется браузером автоматически при отправке формы на сервер и происходит для полей <input type=»email»> , <input type=»url»> , а также при наличии атрибута pattern или required .
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
target¶
После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить фрейм, в который будет загружаться итоговая веб-страница. Для этого используется атрибут target , в качестве его значения указывается имя фрейма. Если target не установлен, возвращаемый результат показывается в текущей вкладке.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe> . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён можно указывать следующие.
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в окне браузера; если фреймов нет, то это значение работает как _self .
Как сделать форму отправки в html
create a simple
HTML contact form
In this guide we’ll show you how to create a simple HTML and PHP contact form to email using easy to understand code.
One of the most useful pages of any website is the HTML contact form page. No website should be without a contact form.
Scroll down a little to see our form created using HTML for the front-end. Further down you will see the PHP code for the form processing at the back-end — this is used to take the form submissions and send it to you by email.
The form shown below is a «bare-bone» version only, however, if you want to look at a fuller version, please download our free contact form
Already have a form and need some help?
Form created using HTML
You can copy and paste this directly into your HTML page, or use it as a basis for your contact us page.
The CSS styles to use with the HTML form above
The PHP Code which captures and Emails your website form
The PHP code below is very basic — it will capture the form fields specified in the HTML form above (Name, Email, and Message). The fields are then sent off to your email address in plain text.
Note: You need to edit 2 parts of the script below. You need to set your email address (this will not be available for anyone to see, it is only used by the server to send your email). You can also specify an email subject line (or just leave the one which is there).
File Name: contact-form-process.php (you must use this filename exactly)
Save the files above. Once you edit the form to fit with your design, you are ready to try it out.
How the HTML form will look
Contact us
This versions below contains many more advanced features.
HTML form field examples
To add new fields to your form, just copy and paste the field type you need from the examples below.
We have included a breakdown of different HTML Form tags.
Learn much more about HTML5 form fields on our new definitive guide.
HTML Form Tags
HTML website forms should be enclosed inside the FORM tags. There are various parameter options available, the most common ones are:
action — this allows you to tell the form where to go once submitted (usually the filename of a script which will read and process the form data which has been submitted).
name — it’s usually a good idea to give your forms a name, this is used to uniquely identify your form on a given page.
method — the value of this should be POST or GET. Forms should usually be set to use POST (as GET will attach the form data onto the page URL which is almost always a bad idea for security reasons). There are some other methods available, but we will not discuss these here.
HTML Text Field — Single Line
This is without doubt the most common field you will find.
Text field in action
HTML Textarea (multiple lines text field )
The multi-line text field (commonly known as a textarea field) is more suitable to takes a larger block of text from your visitors. This is ideal for messages.
Textarea field in action
HTML Radio Buttons
When you want your users to pick one item from a short-list, the radio button set is ideal.
Radio button group in action
HTML Check box fields (checkboxes)
When you want your visitors to pick one or more items from a short-list, then checkboxes are ideal.
Checkboxes in action
HTML File Upload Field (field selector)
Sometimes it may be good to offer your website users the option to upload a file. For this, you could use the HTML field type file. If you are using this option you also need to include an additional option to the FORM tag enctype=»multipart/form-data»
File input type (file upload) in action
HTML Password Field
If you ever need to ask your users to enter a password into a form, then you should use the special text field type password. Using this option will mask each character as the user types, allowing them to type in secret.
Password field in action
HTML drop-downs (also sometimes known as ‘selects’ or ‘combo-boxes’)
When you want your visitors to pick something from a list, you could use a drop-down list. These are sometimes known as option selects, select fields, or combo-boxes. By default only one option can be selected, however, you can allow multiple selections by including the word multiple to your select tag (this will also alter the appearance of the field).
HTML Drop-down select field in action
HTML Submit button
Finally, every form should allow the user the option of submitting the form data. Form submissions are usually handled by using an HTML button. The button field is an input type field (as text and password fields are), however, these special fields are of type submit. To specify the text which appears on the button, we use the value parameter to state our value (in the example below we state ‘Send Form’).
Submit button field in action
HTML Reset button
Occasionally you may want to allow your visitors to reset a form back to its default state. This is accomplished by using the input type of reset. As with the Submit button, you specify the button text using the value parameter. Reset buttons are not very common these days but can still be useful under certain circumstances.
Как сделать форму отправки в html
Один мой друг, а именно Геннадий Колтун с ib.by, называет фронтендщиков формошлёпами.
В чём то он определённо прав. Формы и формочки поджидают нас в интернете везде. Формы логина и регистрации на сайте, форма отправки емайлов, контактов, биллинга и всего чего только может быть.
Пример формы
И мы шлёпаем эти формы всё время. И пожалуй это тот тег, который нам надо разобрать досконально.
Так давайте просто начнём:
Form и input #
Тегом <form> мы объединяем поля для ввода данных.
На самом деле у тега есть определённые полезные и достаточно обязательные атрибуты. Эти атрибуты указывают куда отправлять форму и каким способом. Соответственно они называются action и method. Тогда это будет выглядеть вот так:
<form action=»» method=»»>
Предлагаю сразу вписать туда значения, что бы мы привыкали к заполнению нужных атрибутов. В action мы поставим заглушку #, решётка часто используется заглушки ссылки. А в метод передачи данных мы напишем post. Методы передачи, получения, изменения и удаления данных, такие как post, get и другие — темы для самостоятельного изучения, внизу статьи будет пара ссылок на Википедию.
Если я говорю о формочках, то я представляю себе сразу форму логина на сайт. Давайте я её и реализую. Для этого у меня есть тег <input>
Вроде выглядит всё очевидно. Подпись для поля, тег для ввода и даже тип ввода “text” не должен вызывать удивления.
Делаем второе такое поле — пароль.
Если мы попытаемся заполнить поле текста, то мы будем видеть символы, которые вводим. Если же мы будем заполнять поле пароля, то вместо символов мы увидим звёздочки. Помимо text и password существует ещё несколько полей.
Значения атрибута type в input #
button #
button: делает поле ввода кнопкой. С помощью дополнительного атрибута value мы можем подписать эту кнопку.
submit #
submit: тоже кнопка, обычно эта кнопка отправляет данные.
reset #
reset: кнопка сброса данных в форме
image #
image: собственная кнопка на сайте. Пример:
checkbox #
checkbox: Флажок или чекбокс. Атрибут value и в данном случае поможет подписать поле чекбокса.
Атрибут checked сделает поле активным(выбранным).
color #
color: этот атрибут появился в HTML5, и он управляет выбором цвета.
date, datetime-local, month, time #
Атрибуты работы с датой и временем. Надеюсь, что они говорят сами за себя.
date: я был бы удивлён, если бы с помощью date мы не могли бы выбрать дату.
datetime-local: даёт возможность помимо даты ввести ещё и время.
month: ввод месяца и года.
time: ввод времени.
week: ввод недели.
email #
email: поле для ввода емайл-адреса. Поле проверяется средствами HTML на минимальную валидность: наличие собачки, и подобия доменного имени после него.
С помощью важного атрибута placeholder мы можем ввести значение, которое исчезнет, как только пользователь начнёт вводить данные.
С помощью волшебного атрибута size увеличивается поле ввода. Size измеряется в буквах. Значение 25 означает 25 символов моноспейсного шрифта.
file: Если вы вдруг скачали ненужный файл из интернета, то с помощью формы и атрибута file вы сможете его закачать обратно. Атрибут accept настраивает какие файлы можно принимать и то какие файлы сможет отправить пользователь на сервер. Пример:
hidden #
hidden: элемент скрытого поля, которое отправится на сервер. Например счётчик пользователя.
number #
number: Принимает числа. Мы можем указать минимальные значения и даже шаг — step.
password #
password: Мы рассмотрели этот атрибут в самом начале. Можно добавить, что у нас есть возможность указания максимальной и минимальной длины — minlength и maxlength.
Хочу заметить, что пароли стоит передавать только по защищённому протоколу — HTTPS. Я бы сказал, что отправка паролей пользователя по обычным протоколам — преступная халатность.
radio #
radio: возможность выбор с переключением.
С помощью атрибута name мы можем связать три радио-поля и только одно из них может быть выбрано. Если атрибут name удалить, что все три поля могут быть выбранными.
range #
range: можно использовать для визуализации изменения значений. Например звука:
По умолчанию в теге атрибуты со следующими значениями:
- min: 0
- max: 100
- value: min + (max-min)/2, or min if max is less than min
- step: 1
search #
search: предположу, что этот инпут для поиска.
tel: Поле ввода телефонного номера.
text: Однострочное текстовое поле
Мы можем сделать поле(кстати не только это обязательным), мы можем изменить размер и ввести минимальное и/или максимальное вводимое значение.
textarea #
Существует и многострочное поле для ввода. Это правда не атрибут для инпута а отдельный тег. Но я думаю, что его стоит разместить здесь, что бы мы видели и альтернативу.
Пример:
url: Поле ввода/редактирования урла. С минимальной проверкой валидности.
Label #
Поля обычно подписывают. Мы использовали простой текст в абзаце или заголовок. Взрослые программисты используют лейбл для подписывания инпутов.
Есть два различающихся способа использования label.
Вся разница в том, что в первом случае мы должны связать label и input с помощью for и name значений. А во втором случае у нас input внутри label и дополнительная связка необязательна.
Атрибуты #
Мы рассмотрели подробно атрибут type. Давай посмотрим список других возможных атрибутов в теге input: autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required, size, spellcheck.
autocomplete #
Браузеры запоминают, что мы вводим в формулярах. И мы можем отключить эти данные для всей формы или для отдельных полей.
Мне тяжело сейчас придумать, где именно вебмастер может решить, что он умнее пользователя. И на самом деле я считаю, что вмешивание в поведение браузера достаточно смелое решение. Но ситуации бывают разные, возможность для этого есть и мы должны её знать.
И с помощью этих строчек мы получили выпадающий список с выбором.
Как вариант такой список может выглядеть и вот так.
maxlength и minlength #
maxlength и minlength мы рассмотрели уже пару раз вверху, да и говорят они сами за себя.
pattern #
В паттернах у нас есть возможность писать регулярные выражения, которые будут проверять значения на валидность. Регулярные выражения не самая важная тема в программировании. Её можно опустить, уверен что тебе есть что сейчас учить.
placeholder #
placeholder: помогает пользователю понять как ему стоит заполнить поле. Это очень удобная вещь.
readonly #
Помечает поле “только к чтению”.
required #
Поле обязательно к заполнению. Это те поля которые помечаются красной звёздочкой.
Размер, длина строки.
spellcheck #
С помощью этого атрибута можно отключить проверку орфографии.
Я бы сказал это удобно, особенно для моей фамилии. Не очень приятно читать, что фамилия написана с ошибкой.
select #
Список выбора можно настроить используя тег select. Возможности HTML расширяются не просто так. Правильно настроенные теги вызывают нативные интерфейсы на тех же мобильниках. И человек не путается при вводе данных.
Итого — минимально самая простая форма #
В консоле разработчика мы можем посмотреть, что делает браузер, когда мы нажимаем “отправить”. Создавай простую форму, в ней два поля имя и фамилия, кнопку submit. Открываем в браузере и смотрим.
devtools
На вкладке Network мы можем увидеть все данные, которые передаются серверу. И как они передаются. Добавьте в поля названия полей, проверьте, что метод передачи get и посмотрите что происходит в урле вашей страницы при отправке данных. Поменяйте на POST и посмотрите ещё раз. Найдите ваши данные в окне Нетворка в девтулсах.