Создание формы на сайте. Создание формы на сайте


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

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

Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.

И в этой статье Вы научитесь создавать абсолютно любые формы в HTML.

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

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

<form name = "form1" action = "script/request.php" method = "post"></form>

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

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", то есть скрытую отправку.

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

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

Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя">

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

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

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

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

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

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

Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль">

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

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

Выберите вариант: <select name = "choice">  <option value = "1">Вариант 1  <option value = "2">Вариант 2  <option value = "3">Вариант 3</select>

Тег <select> означает начало выпадающего списка. Заканчивается список тегом </select>. Атрибут "name" ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега <option>. Значение атрибута "value" означает, какой значение будет у переменной choice (например, в JavaScript), то есть либо choice = 1, либо choice = 2, либо choice = 3. Сразу после окончания описания тега <option> ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

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

Напишите что-нибудь:<br><textarea name = "message" rows = "10" cols = "15">Сообщение</textarea>

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

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

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

Выберите что-нибудь одно:<input type = "radio" name = "choiceradio" value = "1">Вариант 1<input type = "radio" name = "choiceradio" value = "2">Вариант 2<input type = "radio" name = "choiceradio" value = "3">Вариант 3

Тут я остановлюсь на атрибуте "name", потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name". Атрибут "value" означает значение переменной "choiceradio" (опять же, например, в JavaScript). Сразу после описания тега <input> идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

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

Вы согласны с нашими правилами:<input type = "checkbox" name = "terms" value = "yes">

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

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

Выберите файл для загрузки:<input type = "file" name = "path">

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

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

<input type = "button" name = "start" value = "Начать">

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

И последний элемент - это кнопка "submit", при нажатии на которую форма отправляется на обработку к файлу, указанному в атрибуте "action" тега <form>. Добавляется это кнопка так:

<input type = "submit" value = "Отправить">

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

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

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

<html><head></head><body><div align = "center">  <form name = "form1" action = "script/request.php" method = "get">    Ваше имя: <input type = "text" name = "firstname" value = "Тут Ваше имя">    <br>    Ваш пароль: <input type = "password" name = "pass" value = "Тут Ваш пароль">    <br>    Выберите вариант:     <select name = "choice">      <option value = "1">Вариант 1      <option value = "2">Вариант 2      <option value = "3">Вариант 3    </select>    <br>    Напишите что-нибудь:    <br>    <textarea name = "message" rows = "10" cols = "15">Сообщение</textarea>    <br>    Выберите что-нибудь одно:    <input type = "radio" name = "choiceradio" value = "1">Вариант 1    <input type = "radio" name = "choiceradio" value = "2">Вариант 2    <input type = "radio" name = "choiceradio" value = "3">Вариант 3    <br>    Вы согласны с нашими правилами:    <input type = "checkbox" name = "terms" value = "yes">    <br>    Выберите файл для загрузки:    <input type = "file" name = "path">    <br>    <input type = "button" name = "start" value = "Начать">    <br>    <input type = "submit" value = "Отправить">  </form></div></body></html>

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

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

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

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

  • Создано 29.04.2010 10:46:27
  • Михаил Русаков

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

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

myrusakov.ru

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

Создать форму на сайте возможно с помощью Google Форм.

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

Для создания формы необходимо пройти несколько шагов:

 

Шаг 1. Вход в аккаунт Google

Для начала необходимо совершить вход в аккаунт, если он имеется. Если же вы не зарегистрированы, то необходимо пройти процедуру регистрации, которая не займет много времени. Регистрация.

 

 

Шаг 2. "Диск"

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

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

Шаг 3. Создание формы

Для начала создаем таблицу.

При помощи меню "Вставка" создаем форму

 

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

 

 Чтобы выбрать дизайн формы в электронной таблице, необходимо нажать на "вид" -> "выбор темы"

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

Для этого измените "Тип вопроса".

Существуют следующие типы вопроса:

ТекстВ качестве ответа на вопрос пользователи будут набирать произвольный текст.

Текст (абзац)Отличие от типа "текст" заключается только в доступном объеме вводимой пользователем информации (соответственно увеличенным полем ответа). Ответить на вопрос данного типа пользователь может более развернуто.

Один из спискаПри выборе данного типа Вы можете создать несколько вариантов ответа, один из которых пользователь сможет выбрать для ответа на вопрос.

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

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

ШкалаОтвет на данный тип вопросов представляет собой оценку от 1 до 5, где значения минимального и максимального балла Вы можете задать самостоятельно

Сеткаответом на вопрос данного типа будет выбранная ячейка, соответствующая пересечению двух свойств.

Пример:

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

Для этого нажимаем кнопку "Открыть форму"

Шаг 4. Добавление формы на сайт

Необходимо перейти на вкладку "Файл"/ "Встроить в веб-страницу".

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

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

Откроется редактор. Вставьте код в самый низ или \верх. Не нужно вставлять код внутри каких-либо тэгов, это может нарушить структуру.

Средняя ширина контента составляет 600px. Это можно указать либо на странице документа Google, либо прямо в коде параметр width поставить равным определенному размеру.

Если остается больше места, то увеличиваем, если не помещается, то уменьшаем.

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

В данном случае ширина будет примерно 200px.

 

 

Шаг 5. Просмотр результатов

Просматривать результаты опросов, можно на специальной вкладке(Ответы на форму) в таблице.

 

Также, перейти на эту вкладку можно из режима редактирования формы.

 

 

Дополнительно:

Добавление и редактирование вопросов, заголовков и разрывов страниц

Постраничная навигация по форме

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

Отправка формы респондентам

Где можно хранить ответы респондентов

Просмотр ответов и управление ими

Изменения ответов после их отправки

Удаление формы или ответов

Подстановка значений в форму с помощью параметров URL

Дополнительные параметры форм для пользователей Google Apps

help-cms.ru

Создание формы | htmlbook.ru

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

Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:

  1. адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
  2. элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;
  3. кнопку отправки данных на сервер.

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="handler.php"> <p><input name="a"> <input type="submit"></p> <form action="handler.php"> <p><input name="b"> <input type="submit"></p> </form> </form> </body> </html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action тега <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form>  не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> </body> </html>

В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain в теге <form> (пример 3).

Пример 3. Отправка формы по почте

HTML5IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="mailto:[email protected]" enctype="text/plain"> <p><input name="a"> <input type="submit"></p> </form> </body> </html>

Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).

Запуск приложения в Firefox

Рис. 1. Запуск приложения в Firefox

Предупреждение Internet Explorer

Рис. 2. Предупреждение Internet Explorer

Выбор программы в Opera

Рис. 3. Выбор программы в Opera

htmlbook.ru

Создание форм в HTML | html элементы формы

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте. В данной статье я бы хотел рассказать о создании форм в HTML. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML. Если вы знаете формы — вы уже неплохо знаете HTML. Сейчас наверное уже практически и нет сайтов, на которых отсутствуют формы html. Формы используются везде: при создании регистрации, авторизации, подписки, гостевой книги, форума, создании своего движка, да абсолютно везде. Статья наверняка получится большая, так что приготовьтесь. Давайте приступим к изучению формы сразу на примере:

<html> <meta charset="utf-8"/> <head><title>Создание форм HTML</title></head> <body> <form name="myform" action="" method="post"> Имя<input type = "text" name = "myname" value = "Введите имя"/> </br> Пароль<input type = "password" name = "mypass"> </br> <textarea name = "mytextarea" rows = "10" cols = "30">Введите сообщение...</textarea> </br> Выберите поисковую систему<input type = "radio" name = "myradio" value = "Google">Google <input type = "radio" name = "myradio" value = "Yandex" checked>Yandex <input type = "radio" name = "myradio" value = "Rambler">Rambler </br> Готовы изучить формы? <input type = "checkbox" name = "mycheck" value = "yes" checked>Да <input type = "checkbox" name = "mycheck" value = "no">Конечно да=) </br> Выберите один из вариантов<select name = "select_list"> <option value = "var1">Вариант 1 <option value = "var2" selected>Вариант 2 <option value = "var3">Вариант 3 </select> </br> Файл<input type = "file" name = "myfile"> </br> <input type="hidden" name="secret" value="скрытое поле"> </br> Простая кнопка<input type = "button" name = "start" value = "Пуск"> </br> Отправить форму<input type = "submit" name ="submit" value = "Отправить на сервер"> </br> Очистить поля формы<input type="reset" name="Reset" value="Очистить поля формы"> </form> </body> </html>

При первом взгляде бросает в дрожь. На самом деле здёсь всё просто, давайте разбираться потихоньку:

Создание формы начинается с ключевого слова <form>. Это парный тег, соответственно создание формы должно завершаться тегом </form>. У тега <form> есть несколько атрибутов. Атрибут name задаёт имя формы (это нужно для обработки формы, например в Javascript). Можно, конечно, и не указывать имя, но всё-таки рекомендую это делать. В атрибуте action указывается имя скрипта, который будет обрабатывать форму (обычно это скрипт на php) и выглядит это так action="request.php". В нашем случае мы не обрабатываем форму. Атрибут method указывает каким способом мы будем передавать данные: открытым (get) или скрытым (post). Сразу пример того, что будет показано в строке браузера при этих двух различных атрибутах:

1) Если мы используем метод post: mysite.ru/request.php.2) Если мы используем метод get: mysite.ru/request.php?myname="Alex"&surname="Gulynin".Думаю различия понятны.

Элементы формы:

1) Тестовое поле. Текстовое поле создаётся с помощью тега <input>, как впрочем и все элементы формы. Атрибут type="text" как раз и отвечает за то, что будет создано текстовое поле. Атрибут name — это имя, как и во всех элементах формы. Атрибут value — это значение по умолчанию.

2) Поле для ввода пароля. Задаётся с помощью все то же тега <input> с атрибутом type="password".

3) Текстовая область. Задаётся с помощью тега <textarea>. Это парный тег, текстовая область должна закрываться тегом </textarea>. У этого элемента есть несколько атрибутов. Также можно задать атрибут name. Атрибут rows отвечает за количество строк, атрибут cols — за количество столбцов. Современные браузеры могут расширять текстовую область, чтобы удобнее было вводить в неё текст. Атрибуты rows и cols — это, так сказать, минимальные значения, до которых можно сжать форму (изначально при загрузке страницы текстовая область имеет размеры, которые заданы атрибутами rows и cols).

4) Радиокнопки. Смысл радиокнопок в том, чтобы выбрать какое-то одно значение из нескольких. Радиокнопки также создаются с помощью тега <input> с атрибутом type="radio". Атрибут value указывает значение, которое соответствует радиокнопке. Хочу обратить ваше внимание вот на какой момент: в нашем примере все 3 кнопки имеют одинаковое значение атрибута name. Если они будут иметь разное значение атрибута name, ты мы сможем нажать на них все. Соответственно не получится их правильно обработать. Атрибут checked (значения у него нет) указывает на то, какая радиокнопка будет выбрана по умолчанию.

5) Флажки. В отличие от радиокнопок, флажки можно прощелкать все. Наберите пример и убедитесь в этом сами. Создаются с помощью тега <input> с атрибутом type="checkbox". Смысл остальных атрибутов такой же, как и у радиокнопок. Скажу только, если мы все галочки снимем, то у нас передастся пустое значение, т.е. в нашем случае будет mycheck="".

6) Выпадающий список. Выпадающий список создаётся с помощью тега <select> и заканчивается тегом </select>. В данной конструкции необходимо ещё с помощью тега <option> указать элементы списка.

7) Поле для отправки файла. Наверняка вы не раз загружали и отправляли файл, например при задании аватарки для своего профиля. Такой элемент реализуется с помощью тега <input> с атрибутом type="file". Самое сложное — это обработать правильно файл, но этому будет посвящена отдельная статья.

8) Скрытое поле. Иногда встаёт необходимость передать какие-нибудь данные, вместе со всей остальной формой. Именно для этого и служит тег <input> с атрибутом type="hidden". На самой форме его не видно, но если вы посмотрите исходный код страницы (правой кнопкой по странице и выбрать "исходный код" или нажать сочетание клавиш "ctrl+u"), та данное поле можно будет увидеть.

9) Кнопки. Кнопки создаются с помощью тега <input> с атрибутом type="button". Атрибут value отвечает за то, что будет написано на кнопке. Кнопки обычно служат для обработки какого-то события. О событиях кнопок можно будет прочитать в одной из следующих статей.

10) Отправка формы. По сути это такая же кнопка, но с атрибутом type="submit". При нажатии на кнопку форма перейдёт на обработку по пути, указанному в атрибуте action тега <form>.

11) Сброс все полей формы. Сброс всех полей формы осуществляется с помощью тега <input> с атрибутом type="reset". Думаю здесь всё прозрачно и объяснять ничего не нужно.Опять же повторюсь, что здесь нет ничего сложного. Если у вас остался какой-то вопрос задавайте его в комментариях.

Домашнее задание: обязательно наберите данный большой пример и проверьте работоспособность всех элементов формы.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Следующая статья >

alekseygulynin.ru

Выбор форм для создания сайта и его оформления.

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

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

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

Принципы создания форм для сайтов

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

19bf0f622dc1

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

Как создать форму-мотиватор?

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

Форма для сайта должна быть:

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

0f6b506bc638

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

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

d271c52062a3

3. Компактной. Самая огромная ошибка при создании формы, которая может отпугивать, а не привлекать посетителей в дальнейшем - это ее большой размер. Делая форму для сайта, вы должны постараться создать ее максимально компактной, с небольшим количеством граф и полей, в которые поместится основная информация, необходимая для работы с потенциальными клиентами.

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

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

a8b4c2b10292

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

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

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

nischenko.ru

Добавление формы

Откроется окно добавления формы, в котором Вам будет необходимо на вкладке "Настройки" заполнить следующие поля:

  • Название формы - введите название, оно будет отображаться на сайте в виде заголовка формы.
  • E-mail отправки - Тут Вы можете указать электронный адрес, на который будут поступать письма с информацией обо всех сообщениях, оставленных в форме. Для этого необходимо выбрать адрес из подтвержденных или же добавить новый и выбрать его, следуя инструкции по подтверждению Email. С ней Вы можете ознакомиться по ссылке. На основе данного адреса система автоматически создаст уведомление вида "Email" - "Администратору" сразу же после того, как форму на сайте заполнят в первый раз. Соответственно после создания уведомления данного вида поле ввода адреса будет заменено на кнопку перехода к разделу уведомлений - в нем при необходимости Вы сможете изменить адрес отправки.
  • Текст сообщения после отправки формы - введите сообщение, которое будет выводиться после отправки пользователем формы обратной связи. Например, "Спасибо за заявку!".
  • Текст кнопки для отправки формы - введите название кнопки для отправки сообщения, подходящее по смысловому назначению формы. Например, кнопку можно назвать "Отправить", "Заказать звонок", "Отправить сообщение" или др.

phpe63djl

Затем Вы можете перейти на вкладку "Дополнительно" и указать следующие параметры:

  • Цветовое оформление полей - выберите из списка цвет, который Вы хотели бы использовать для полей формы.
  • Ширина формы - укажите в пикселах ширину формы, от этого размера в дальнейшем будет зависеть, сколько полей Вы сможете разместить в одной строке формы горизонтально.
  • Отправлять письмо посетителю, заполнившему форму - при отмеченной галочке система будет отправлять посетителю, заполнившему форму, письмо с данными из формы. Обратите внимание! Настройка имеет смысл только в том случае, если в данной форме есть поле вида "E-mail" - именно на указанный в этом поле адрес система будет отсылать письма о заполнении формы.
  • Капча - включение/выключение капчи в форме. При выборе пункта "Да" - пользователю перед отправкой сообщения нужно будет подтвердить, что он не робот. Это необходимо для защиты от спама.
  • Отслеживать referer - включение/отключение отображения в письме информации о том, по каким запросам (через какие поисковые системы или по ссылке, с какого сайта) на Ваш сайт пришел клиент, дата и точка входа на сайт. При выборе пункта "Да" данная информация будет приходить в письме.
  • URL страницы после успешной отправки формы - в данном поле можно указать адрес страницы, на которую будет перенаправлен посетитель после заполнения и отправки формы. Например, если Вы хотите, чтобы после отправки формы посетитель попадал на главную страницу сайта или на страницу “Контакты” - укажите адрес нужной страницы. Если поле оставить пустым, пользователь после отправки останется на странице формы и просто увидит текст сообщения после отправки.

phpGO9otC

help.megagroup.ru

Формы. Поля для ввода текстовых данных. Создание формы регистрации на сайте урок

  • Главная
  • Курсы
  • Основы HTML
  • Формы. Поля для ввода текстовых данных. Создание формы регистрации на сайте урок - курс Основы HTML от Devionity

Для взаимодействия пользователя с веб-сервером в HTML предусмотрены формы. Формы позволяют пользователю вводить необходимую информацию и получать результат после обработки внесенных данных веб-сервером. Например, поиск, авторизация и т.п.

Именно с помощью форм возможна отправка запросов по протоколу HTTP методом POST (при переходе по обычной гиперссылке мы используем метод GET). Данные передаются на сервер в виде пар name-value, которые формируются для каждого поля формы.

Создать форму на веб-странице можно с помощью тега <form>. Сам по себе тег <form> является блочным элементом веб-страницы. Этот тег имеет несколько важных, но необязательных атрибутов.

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

В атрибуте method можно указать метод передачи данных согласно протоколу HTTP. Значения этого атрибута могут быть либо GET, либо POST. По умолчанию, если этот атрибут не указан или значение не совпадает с выше указанными двумя методами - будет использован GET метод. Рассмотрим несколько примеров, которые иллюстрируют использование этих атрибутов:

<form> ... </form> <form method='post'> ... </form> <form action='/contact.php' method='post'> ... </form>

Внутри тега <form> необходимо разместить теги элементов формы. В этом уроке будут рассмотрены текстовые элементы формы и кнопка отправки данных.

Простое текстовое поле создается при помощи тега <input> и обязательного атрибута type со значением text, то есть:

<input type='text' name='login'>

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

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

<input type='submit'>

Существуют также несколько вариаций простого текстового поля - например, поле для пароля (type='password') или поле для электронного адреса (type='email'). Поле для пароля идентично простому текстовому полю, но увидеть набранный текст явно там нельзя, для безопасности. Поле для электронного адреса также идентично простому текстовому, но имеет полезное свойство - браузеры будут автоматически проверять корректность введенного электронного адреса, если оно указано как поле для оного. Эта возможность добавлена в спецификации HTML 5.

Рассмотрим несложную форму для регистрации пользователя. Она будет содержать одно простое текстовое поле, поле для электронного адреса и два поля для пароля:

Также, в тегах input часто удобно разместить следующие атрибуты:

  • id - должен иметь уникальное в рамках веб-страницы значение, используется скриптами для однозначного нахождения конкретного элемента в объектной модели документа.
  • placeholder - шаблонный текст-подсказка в поле, которая исчезает при введении данных
  • value - значение поля по умолчанию. Для кнопки отправки данных - это надпись на кнопке.
Рассмотрим поле для больших объемов текста. Этот элемент используется для создания комментариев, текстов статей и т.п. Он может быть создан при помощи тега <textarea>. В отличии от простого текстового поля оно фактически не имеет ограничений на объем информации, которая заносится в него.

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

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

Тут:

  • был использован тег <label>, который осуществляет подпись для конкретного элемента формы
  • вне формы размещены элементы, которые не отправятся при отправке формы.
  • использован метод POST, потому пары name=value элементов формы будут переданы как параметры POST запроса в теле запроса. Если изменить метод передачи формы на GET, то сможем увидеть отправленные пары name=value в адресной строке, как это было описано в лекции по основам HTTP.

Проверьте свои знания

Создать новый веб документ. В нем создать заголовок и таблицу 5х2 с полями формы. В форме должны быть поля Name, Email, Phone, Message. Поля Message и кнопка отправки данных должны занимать ширину двух столбцов.

devionity.com