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



Для взаимодействия пользователя с веб-сервером в 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 и кнопка отправки данных должны занимать ширину двух столбцов.