Создания форм в HTML. Создаем формы HTML Создание html документа с несколькими формами

В процессе навигации по сайтам пользователь, в основном, только щёлкает по ссылкам чтобы перемещаться по веб-страницам.

Но понятно, что пользователю иногда требуется обеспечить собственные поля ввода . Эти виды взаимодействия включают в себя:

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

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

  • текстовые поля (для одной или нескольких строк);
  • переключатели;
  • флажки;
  • выпадающие списки;
  • виджеты для загрузки;
  • кнопки отправки.

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

Элемент

является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как ,

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

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

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

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

текст

Радиокнопка:

текст

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

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

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

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Формы представляют собой наиболее важные интерактивные элементы HTML, позволяющие разработчикам страниц интерактивно взаимодействовать с посетителями. С их помощью пользователь может возвращать комментарии по поводу посещения определенного узла, пересылать запросы или регистрироваться. Разработчик задает вопросы, создавая форму, а пользователь отвечает на них заполняя её. Содержимое формы либо передаётся сценарию CGI, либо по электронной почте посылается получателю. Сам процесс создания формы состоит из двух этапов. Первый заключается в создании самой формы, а второй заключает в себе создание на сервере сценария CGI. Форма создается при помощи различных тэгов и атрибутов, заключенных в пару :

Элемент

является необходимым условием для всех форм. Он может иметь следующие атрибуты:

method Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.

action Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.

enctype Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария:

Синтаксис формы для почты:

Элемент является базовым для всех элементов формы. Он используется для внедрения в форму кнопок, графических изображений, флажков, переключателей, паролей и текстовых полей. Несмотря на внешние отличия форм все они пересылают сценарию CGI данные в виде пар имя:значение. Элемент может иметь восемь атрибутов обозначаемые как type:

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

Синтаксис:

PASSWORD Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:

maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.

size. Задаёт максимально допустимую длину поля в символах.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис:

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

CHECKBOXФлажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:

checked. Задаёт начальный статус флажка по умолчанию.

value. Задаёт значение по умолчанию, которое можно менять.

Синтаксис:

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

SUBMIT Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе

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

RESET Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.

Синтаксис:

IMAGE Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:

src. Задаёт URL файла с изображением.

align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.

name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.

Синтаксис:

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

Синтаксис:

FILE Создает управляющий элемент выбор файла. Синтаксис:

ACCESSKEY Задает кнопку, при нажатии которой происходит обработка поля. Синтаксис:

SIZE Задает ширину элемента в пикселях. Синтаксис:

DISABLED Отключает возможность изменять содержимое поля или положение кнопки. Синтаксис:

Элемент

Элемент Синтаксис:

Имеет атрибуты:

selected. Задаёт изначально выбранное слово.

value. Задаёт значение выбранного слова для сценария.

Элемент применяется для логической группировки элементов

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

Пример: Допустим что на текущей странице задан базовый URL при помощи элемента тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3 Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков? и +,поиск будет осуществлен.

Элемент

name задает имя элементу.

value задает значение элементу.

type при использовании в качестве кнопки принимает значения: button, submit и reset.

disabled делает недоступным данный элемент

tabindex определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.

accesskey задает клавишу доступа.

Элемент

Элемент

позволяет логически группировать элементы формы. Синтаксис:
имя

Элемент позволяет давать наименования логическим группам элементов формы. Синтаксис: имя