Как сделать html форму

Как сделать html форму

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

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

Формы обратной связи на сайт — что выбрать

Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 5 минут, настройка — ну пусть еще 5.

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

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

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

  • Быть в наличии в одной из ваших бесконечных папок со скриптами.
  • Работать всегда и везде.
  • Не требовать танцев с бубном при встраивании на сайт.

Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

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

Я же предлагаю сэкономить:

  • Время.
  • Деньги.
  • Трудозатраты.

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Скачать скрипт формы (.zip, 169Кб)

Вот какие формы вы получите:

Как сделать html форму

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

Как сделать html форму

  • Как видно, с файлом конфигурации формы разберется даже школьник, думаю у вас не возникнет на этот счет вопросов.
  • Вставка на сайт производится просто:
    — можете дать ссылку на /sendmail/index.php
  • — можете сразу вставить на страницу, при помощи кода
  • Пример кода:

Как сделать html форму

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Скачать (.zip, 72.4Кб)

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как сделать html форму

Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

Как сделать html форму

Конфиг для настройки полей («codeassetsxmlfields.php»):

Как сделать html форму

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

  1. Преимущества этой формы над предыдущей:
    — более эстетично привлекательная
    — используется проверка полей, ошибки выводятся через AJAX
    — подробнейшая инструкция по установке и настройке внутри
  2. — есть подсказки под полями
  3. Например, посмотрите как в этой форме связи выводятся ошибки:

Как сделать html форму

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

Как сделать html форму

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

Итак, вы познакомились с двумя функциональными скриптами и можете выбрать свой. Но не торопитесь, потому что вас еще ждет третий PHP-cкрипт формы обратной связи для блога. Тот, которым я пользуюсь уже наверное года два с лишним.

Установка готовой бесплатной формы обратной связи на сайт

  1. Итак, на одном сайтов установлена вот такая «кнопка»:
  2. Если нажать на нее, вниз «выпадет» форма обратной связи:

Как сделать html форму

  • На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:
  • А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:
  • Очень удобно. Вот код для работы формы как в первом случае:

$(“#forma0”).toggle(function() {
$(“#forma1”).slideDown(“slow”);
}, function() {
$(“#forma1”).slideUp(“slow”);
});

Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

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

Скачать скрипт формы обратной связи (заказа обратного звонка) — .zip, 16.4Кб

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

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

Источник: https://blogwork.ru/obratnaya-svyaz-dlya-sajta/

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

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

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

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

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

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

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

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

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

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

Оставьте заявку на расчет стоимости

Узнать стоимость

Как сделать html форму

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

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

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

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

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

Скрипт 'mail.js' — это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

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

Как сделать html форму

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

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

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

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

Страница благодарности

Оформляйте как вам будет угодно

Вернуться на главную

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

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

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

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

Читайте также:  Как приготовить помадку

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

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

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

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

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

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

Как сделать html форму

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

Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле 'config' — установите значение 'false' там, где задаем обязательность заполнения.

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

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

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

Как сделать html форму

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

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

// Текстовое поле
const TEXTISREQUIRED = true;
const MSGSTEXTERROR = “Поле обязательно для заполнения”;

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

if (isset($_POST['text']) ) {
if(empty($_POST['text']) && TEXTISREQUIRED) {
$msgs['text'] = MSGSTEXTERROR;
} else {
if (!empty($_POST['text'])) {
$text = “Сообщение: ” . trim(strip_tags($_POST['text'])) . “
“;
}
}
}

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

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

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

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

if (respond.text) {
inpTextError.text(respond.text);
} else {
inpTelError.text('');
}

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

$mail->Body = “$name $tel $email $text”;

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

Как сделать html форму

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

Checkbox

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

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

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

Я принимаю условия пользовательского соглашения

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

Как сделать html форму

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

// Соглашение
const AGGREMENTISREQUIRED = true;
const MSGSAGGREMENTERROR = “Примите пользовательское соглашение”;

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

if(empty($_POST['agreement']) && AGGREMENTISREQUIRED) {
$msgs['agreement'] = MSGSAGGREMENTERROR;
} else {
if (!empty($_POST['agreement'])) {
$agreement = “Соглашение: Пользовательское соглашение принято ” . “
“;
}
}

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

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

let inpAgreementError = $(this).find('.contact-form__error_agreement');

Обработчик ошибки:

if (respond.agreement) {
inpAgreementError.text(respond.agreement);
} else {
inpAgreementError.text('');
}

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

$mail->Body = “$name $tel $email $text $agreement”;

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

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

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

Разметка:

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

// Файл
const FILEISREQUIRED = false;
const MSGSFILEERROR = “⚠ Забыли добавить файл”;

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

Очистка полей после отправки данных формы на почту

Для того, чтобы очистить форму обратной связи после успешной отправки, нужно добавить несколько строк кода в файл «mail.js». Давайте сделаем это. В первую очередь сохраним в переменную класс формы на которой сработало событие «submit».

Чуть ниже, там где получали «id», добавим переменную «formClass» и передадим класс формы:

.
.
let form = $('#' + $(this).attr('id'))[0];

// Сохраняем в переменную класс формы
let formClass = $(this).attr('class');

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
.
.

А когда срабатывает событие success, при успешном ответе сервера, добавим саму очистку полей. Заменим это:

if (respond.success) {
formDescription.text(respond.success).fadeIn();
setTimeout(() => {
formDescription.fadeOut(“slow”);
}, 4000);
setTimeout(() => {
formDescription.text('');
}, 5000);
}

На это:

if (respond.success) {
formDescription.text(respond.success).fadeIn();
$('.'+formClass).find('input').val('');
$('.'+formClass).find('input').prop('checked', false);
$('.'+formClass).find('textarea').val('');
setTimeout(() => {
formDescription.fadeOut(“slow”);
}, 4000);
setTimeout(() => {
formDescription.text('');
}, 5000);
}

Теперь, при успешной отправке, очистятся чекбоксы, обычные поля и textarea.

Автоматическое скачивание файла

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

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

Теперь, после успешной отправки нам необходимо добавить «Window.location» со ссылкой на расположение файла. Я предпочитаю делать это с небольшой задержкой, чтобы пользователь успел понять, что произошло, а именно увидеть сообщение об успешной отправке. Можно, конечно, и прелоадер «прикрутить», но это уже дело вкуса.

Напоминаю, что сигналом о том, что сообщение успешно отправлено у нас является строка пришедшая в файле «mail.js». Вот тут:

if (respond.success) {
//.
// some code
//.
}

Сюда и будем добавлять ссылку на файл. Поставим задержку в 1 секунду при помощи «setTimeout».

if (respond.success) {
setTimeout(() => {
window.location = '/files/test-file.docx';
}, 1000);
}

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

Важно

Для корректной работы потребуется:

  • PHP > 7.
  • Сам сервер
  • Jquery 3 версии
  • Если тестируете на хостинге, то должен быть не тестовый период, не бесплатный домен и у хостера не отключена функция mail. Во всех этих случая хостер может накладывать ограничение на работоспособность под предлогом борьбы со спамом. Кроме того, некоторые хостеры не позволяют отправлять сообщения с почтовых адресов не привязанных к сайту.
  • Перед тем как задать вопрос, посмотрите нет ли ошибок в консоли и попробуйте вывести ошибки php.
  • Если не приходят сообщения, проверьте не попали ли письма в спам.
  • Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструкторы форм обратной связи

Как вам такой формат статей? Нужно ли делать настолько большие?

Источник: https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html

Урок по созданию форм в html для новичков. Сделайте красивые формы регистрации на своем сайте

Доброго времени суток, любители веб-разработки и желающие сверстать свой собственный сайт.

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

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

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

Что такое форма и как она функционирует

Форма – это один из важнейших объектов сайта, который предназначен для обмена информационными данными между сервером и пользователем.

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

Форма задается при помощи специального элемента языка html .

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

Для нетерпеливых и жаждущих быстрее взглянуть на кодовое представление, я прикрепил простой пример использования панели с текстовым полем для пароля c кнопкой:

1
2
3
4
5
6
7
8
9
10
11
12

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

Отправляем данные на сторону сервера

Для того чтобы отправить набранную (или выбранную) информацию в диалоговом окне, необходимо использовать стандартный механизм – кнопку Submit.

Код такого метода выглядит вот так:

При запуске представленной строки в браузере отобразиться кнопка с надписью: «Отправить».

Другой способ отправки данных на сторону сервера – это нажатие в пределах диалогового окна клавиши Enter.

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

За имя отвечает параметр атрибута type тега , а за значение – данные, введенные пользователем. Далее преобразованная строка передается обработчику, который чаще всего задан в атрибуте action элемента .

Как сделать html форму

Сам по себе параметр action не обязателен, а в некоторых моментах и вовсе не нужен. Например, если страница сайта написана с использованием php или js, то обработка происходит на текущей странице и ссылки не нужны.

Читайте также:  Как высушить волосы

Для большего понимания всей картины функционирования сайта я хотел бы добавить, что на сервере работа с данными выполняется уже при помощи других языков. Так, серверными языками считаются: Python, php, си-подобные языки (C#, C и т.д.), Java и другие.

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

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

Основными атрибутами данного элемента языка гипертекстовой разметки являются:

  • Text – создает текстовое поле;
  • Submit – создает кнопку для отправки данных на сервер;
  • Image – отвечает за кнопку с картинкой;
  • Reset – устанавливает кнопку для очистки формы;
  • Password – задает текстовое поле специально для паролей;
  • Checkbox – отвечает за поля с флажками;
  • Radio – отвечает за поля с выбором одного элемента;
  • Button – создает кнопку;
  • Hidden – используется для скрытых полей;
  • File – задает поле, отвечающее за отправку файлов.

Способы передачи информации

Существует 2 способа передачи пользовательских данных на серверную сторону: Get и Post. Данные методы выполняют одно и то же действие, однако они существенно отличаются друг от друга. Поэтому прежде чем указывать какой-либо из них, давайте ознакомимся с их особенностями.

Post Get
Размер передаваемых документов Ограничиваются серверной стороной. Максимум – 4 Кб.
Способ отображения отправленной информации Доступна только при просмотре через браузерные расширения или другие специальные программные продукты. Сразу же доступна всем.
Использование закладок Нет возможности добавить в закладки, так как запросы не повторяются (все страницы ссылаются на один адрес). Любую страницу с запросом можно сохранить в закладках и перейти к ней спустя время.
Кэширование Исходя из предыдущего пункта все запросы на одной странице. Каждую страницу можно кэшировать отдельно.
Предназначение Используется для пересылки больших файлов (книг, изображений, видео и т.д.), сообщений, комментариев. Отлично подходит для поиска запрашиваемых значений по веб-ресурсу или для передачи коротких текстовых сообщений.

Для того чтобы указать каким из двух методов передачи данных работать браузеру, в элементе используют предусмотренный параметр method (например, method=”post”).

Как сделать html форму

Рассмотрим второй пример. Создадим форму, в которой нужно ввести свои персональные данные (имя и фамилию, дату рождения) и придумать пароль. После все это отправляем на сервер при помощи метода Post.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Введите свои персональные данные!

Введите свои персональные данные!

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

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

Создание панели регистрации

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

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Регистрация на сайте

Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!

Имя:
Фамилия:
E-mail:
Пароль:
Повтор пароля:

Регистрация на сайте

Для последующей корректной работе в нашем сервисе, пожалуйста, вводите правдивые данные!

Имя:

Фамилия:

E-mail:

Пароль:

Повтор пароля:

Советую вам сохранить данный код программы в документе с расширением .html и кодировкой utf-8, и открыть последний в окне браузера.

Перед вами предстанет во всей красе панель для регистрации с полями для ввода имени, фамилии, e-mail и пароля с повторением.

Заметьте, что при запуске страницы курсор сразу же расположен в первом текстовом поле. Этот прием достигается за счет атрибута autofocus.

Как сделать html форму

Начните заполнять поля, оставив одно без изменений, и нажмите кнопку «Зарегистрироваться». Как вы уже заметили, форма не будет отправлена, так как у каждого элемента указан атрибут required. Он устанавливает отмеченные поля обязательными для заполнения.

Еще одним интересным моментом является указание типа type=”email”, который появился в html 5. При использовании такого типа поля, введенная информация автоматически проверяется на корректность. В случае ошибок форма не отправляется на сервер.

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

Пока-пока!

С уважением, Роман Чуешов

( Загрузка…

Источник: http://romanchueshov.ru/osnovyi-html/sozdanie-form-v-html-dlya-novichkov.html

Создание форм в HTML

Как сделать html форму

  • Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы.
  • Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.
  • И в этой статье Вы научитесь создавать абсолютно любые формы в HTML.

Сначала создайте простейшую HTML-страницу, в которую добавьте контейнер (тег ), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.

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

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

1) Атрибут “name“. Значение этого атрибута означает имя HTML формы. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена.

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

Но я НАСТОЯТЕЛЬНО рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.

2) Атрибут “action“. Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику и находится в значении атрибута “action“.

3) Атрибут “method“. У него может быть одно из двух очень популярных значения: “post” и “get“. Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:

а) http://mysite.ru/scipt/request.php

б) http://mysite.ru/script/request.php?a=7&b=Michael

В первом случае, пользователь не видит, что отправляет (метод “post“), а во втором он реально видит имена переменных и их значения (метод “get“). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО чаще используют метод “post“, то есть скрытую отправку.

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

Первое, что мы добавим – это текстовое поле. Добавляется текстовое поле с помощью тега , а точнее с помощью атрибута этого тега “type” со значением “text“. Также перед созданием текстового поля рекомендуется написать, что это за поле, например, “Ваше имя“. Внутри тега напишите такую строчку:

Ваше имя:

Опять же, давайте разберём атрибуты:

1) Атрибут “type” отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.

2) Атрибут “name” отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname.

3) Атрибут “value” отвечает за значение этого поля по умолчанию.

Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!) этот текст в редакторе, а потом посмотрите результат в браузере.

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

Ваш пароль:

Как видите, теперь значением атрибута “type” является “password“. Остальные атрибуты те же, что и для обычного текстового поля.

Следующий элемент – это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код.

Выберите вариант:   Вариант 1  Вариант 2  Вариант 3

Тег означает начало выпадающего списка. Заканчивается список тегом . Атрибут “name” ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега .

Значение атрибута “value” означает, какой значение будет у переменной choice (например, в JavaScript), то есть либо choice = 1, либо choice = 2, либо choice = 3. Сразу после окончания описания тега ставится то, что увидит пользователь в выпадающем списке.

Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

Теперь добавим текстовую область, используя тег :

Напишите что-нибудь:

Сообщение

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута “rows“) и шириной в 15 символов (значение атрибута “cols“).

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

Следующий элемент – это радио-кнопка. Радио-кнопка – это набор таких “кружочков“, из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега , а, точнее, с помощью значения “radio” атрибута “type“. Напишем такой HTML-код:

Читайте также:  Как заставить парня меня полюбить

Выберите что-нибудь одно:Вариант 1Вариант 2

Вариант 3

Тут я остановлюсь на атрибуте “name“, потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов.

Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута “name“. Атрибут “value” означает значение переменной “choiceradio” (опять же, например, в JavaScript).

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

Ещё одним элементом формы являются переключатели (checkbox). Создаются они опять же с помощью тега . Напишем следующие строчки:

Вы согласны с нашими правилами:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной “terms” будет “yes“, если не будет стоять, то значение этой переменной будет “”, то есть пустой строкой.

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

Выберите файл для загрузки:

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

Теперь займёмся двумя последними элементами – это кнопки. Их две: обычная кнопка и кнопка “submit“. Начнём с обычной кнопки. Создаётся кнопка с помощью тега . Например, так:

Значение атрибута “type” уже “button“, что сообщает браузеру, что это кнопка. Атрибут “name” – это имя кнопки, а значение атрибута “value” отвечает за текст на кнопке. Обрабатывать эту кнопку мы не будем, так как мы проходим не JavaScript, а основы HTML, но в будущем обязательно это сделаем.

И последний элемент – это кнопка “submit“, при нажатии на которую форма отправляется на обработку к файлу, указанному в атрибуте “action” тега . Добавляется это кнопка так:

Как видите, создать кнопку “submit” очень просто: для этого необходимо поставить значение “submit” атрибута “type” тега . А атрибут “value” содержит текст, который пользователь увидит на кнопке.

Теперь, напоследок, советую посмотреть разницу между значениями “post” и “get” атрибута “method” тега . Разницу можно увидеть в адресной строке при нажатии на кнопку “submit“.

После того, как наиграетесь с формой, то результат должен быть таким:

      Ваше имя:    
    Ваш пароль:    
    Выберите вариант:           Вариант 1      Вариант 2      Вариант 3       
    Напишите что-нибудь:   
    Сообщение   
    Выберите что-нибудь одно:    Вариант 1    Вариант 2    Вариант 3   
    Вы согласны с нашими правилами:       
    Выберите файл для загрузки:       
       
     

Как видите, опять ничего сложного. Как видите, создать свой сайт – это совсем не сложно. Единственная проблема, как это всё запомнить? Ответ очень прост: практика, практика и ещё раз практика!

Всего доброго!

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:Как создать свой сайт

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи): [URL=”https://myrusakov.ru”]Как создать свой сайт[/URL]

Источник: https://MyRusakov.ru/sozdanie-form-html.html

Как создать контактную форму в HTML

Этот урок покажет как создать самую простую контактную форму для HTML-шаблона.

Прежде всего создайте 2 файла: contact_form.html и contact.php. Первый файл будет содержать код Вашей контакт-формы, а второй будет обрабатывать данные этой формы.

HTML

Ниже приведен пример HTML-кода контактной формы:

Your name Your e-mail Message

В браузере она будет выглядеть следующим образом:

Как сделать html форму

Давайте кратко рассмотрим основные аспекты данной формы. Тег должен иметь 2 дополнительных атрибута:

action=»contact.php» — определяет куда отправлять данные из контактной формы после отправки письма.

method=»post» — определяет как отправить данные из контактной формы в файл, заданный атрибутом action. Теги и должны иметь атрибут “name” с уникальным идентификатором. Этот атрибут используется для идентификации данных контактной формы после отправки письма. Следует также отметить 2 дополнительных элемента, которые используются в качестве кнопок Отправить и Очистить, первый елемент должен быть определен тегом type=”submit”, а второй — тегом type=”reset”.

Процедура создания контактной формы является довольно простой.

PHP

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

Присвоение данных из каждого поля контактной формы (cf_name, cf_email, cf_message) следующим PHP-переменным ($ cf_message, $ field_email, $ field_message)$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

Функция $mail_to должна содержать электронную почту владельца сайта, это именно тот адрес, куда будут отправляться сообщения. Вы можете указать сразу несколько адресов электронной почты, разделяя их запятой (например, mail-one@template-help.com, mail-two@template-help.com)

$mail_to = 'test@test-mail.com';

Тема письма, которое Вы получите:

$subject = 'Message from a site visitor ' . $field_name;

Построение структуры сообщения:

$body_message = 'From: '.$field_name.”
“;
$body_message .= 'E-mail: '.$field_email.”
“;
$body_message .= 'Message: '.$field_message;

Построение заголовков сообщения:

$headers = “From: $cf_email
“;
$headers .= “Reply-To: $cf_email
“;

Определяем функцию mail() и присваиваем её переменной $mail_status, которая используются для проверки успешности отправки письма.

$mail_status = mail($mail_to, $subject, $body_message, $headers);

Если функция mail() выполнена успешно, тогда используйте код ниже:

if ($mail_status) { ?>

Вы можете загрузить готовые файлы contact_form.html и contact.php одним файлом

Рекомендуем ознакомиться с уроком как создать новое поле для контактной формы

Источник: https://www.TemplateMonster.com/help/ru/how-create-contact-form-html.html

Как создать форму для ввода данных на (html) web странице – Верстка HTML / CSS

Страница создана: 2010-11-23, обновлена: 2016-03-04

Рассказав на WEB страничке о сфере собственной деятельности, компания SD подразумевает, что познакомившиеся с этой информацией и заинтересовавшиеся ею гости WEB сайта захотят связаться с компанией, задать вопросы, обсудить общие трудности, предложить сотрудничество. Чтоб ускорить и облегчить им функцию связи, довольно поместить на данной страничке специальную форму; заполнив ее, гость WEB сайта передаст компании информацию, которую он посчитает необходимым отправить.

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

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

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

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

Но поначалу вставим в HTML документ list.html текст с приглашением заполнить форму, поместив его под перечнем.

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

Формируем код HTML формы

Воткните пустую строчку меж закрывающим тегом

и закрывающим тегом и введите в этой строке последующий код:

Если у Вас есть вопросы либо предложения, напишите нам:

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

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

Потому что сообщение, написанное гостем WEB сайта, будет отчаливать по электрической почте, то значение этого атрибута должно содержать адресок Email обладателя WEB сайта, к примеру: action=”mailto: sd@narod.ru”.

Очередной атрибут тега – method – определяет, каким образом либо при помощи какого протокола данные из формы будут переданы программе обработчику. Потому что будет применена электрическая почта, то значение этого атрибута должно быть post: method=”post”. Таким способом, элемент … будет иметь приблизительно таковой вид:

Добавьте в документе list.html пустую строчку перед закрывающим тегом и введите обозначенный код, вставив в качестве значения атрибута action заместо sd@narod.ru собственный адресок электрической почты.

Сейчас нам необходимо поместить в форме многострочное текстовое поле для ввода сообщения. Для этого служат теги . В качестве атрибутов открывающего тега нужно указать количество строк (rows) и колонок (cols), также имя (name), под которым содержимое текстового поля ввода будет передано программе-обработчику, к примеру:

Таковой элемент создаст текстовое поле ввода высотой 5 строк и шириной 40 знаков. Введенный гостем WEB сайта текст будет передан обработчику под именованием Comments (). Чтоб центрировать текстовое поле относительно краев странички, следует также использовать стили.

Воткните пустую строчку перед закрывающим тегом и введите последующий элемент, создающий текстовое поле:

Пуск процесса обработка данных на форме

Чтоб запустить процесс передачи данных из формы обработчику, нужен некий отран управления, к примеру, кнопка. Сделать таковой отран управления совсем не сложно при помощи одиночного тега с атрибутом type. Если необходимо сделать кнопку, то значение этого атрибута должно быть submit (передать):

Таковой элемент по умолчанию выведет на WEB страничке кнопку с надписью Submit Query (Передать запрос). Чтоб поменять надпись на кнопке, довольно включить в данный тег атрибут value с необходимым для вас значением, к примеру: value=”Выслать”. Напомним, что значения атрибутов, в каких употребляются знаки, хорошие от латинских, следует непременно заключать в кавычки.

  • Воткните пустую строчку перед закрывающим тегом и введите в ней последующий код, создающий кнопку в новеньком абзаце и разглаживающий ее по центру странички:

Источник: http://sd-company.su/article/html_css/form_create

Ссылка на основную публикацию