Меню
ГлавнаяExcel

Что такое форма в html. HTML формы


Формы в HTML - это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

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

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

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

Атрибуты формы - тег

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

Атрибут action является обязательным для любой формы - он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные ).

Атрибут method определяет способ отправки содержимого формы. Существует два метода - GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP ). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

Атрибут name тега

не является обязательным. Но если в документе несколько форм, то каждая из них должна быть как-то идентифицирована обработчиком. Поэтому наличие атрибута name в этом случае необходимо - он задает уникально имя формы.

Можно также установить кодировку для вводимых данных - за это отвечает атрибут accept-charset , а также, при помощи атрибута target , определить окно, в котором будет отображаться результат обработки отправленной формы (в новом или в текущем окне ).

Но сам по себе тег не имеет смысла, ведь форма передает данные, которые сначала нужно куда-то внести!

Ввод данных. Поля формы - тег

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

type - это основной атрибут тега . Он устанавливает тип поля (элемента ) формы:

Значение атрибута type= "..."

Результат

Описание

Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.

Текстовое поле для ввода пароля.
Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести

1 2 3

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

1 2 3

Флажок.
Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.

Кнопка.
Атрибут value устанавливает надпись на кнопке.

Кнопка сброса.
Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.

Кнопка для отправки внесенных данных.

Поле для ввода имени пересылаемого файла.

Кнопка-изображение.
Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.

Скрытое поле - невидимое для пользователя.

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

Вид создаваемого списка зависит от значения атрибута size : при size= "1" (значение по умолчанию ) список будет раскрывающимся.

Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= "3" , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть ) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

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

При помощи атрибута name тега





7 Чудес света!




Сторона света - одно из четырех основных направлений:

Север Юг Запад Восток

7 Чудес света!

Пирамида Хеопса Висячие сады Семирамиды Статуя Зевса в Олимпии Храм Артемиды в Эфесе Мавзолей в Галикарнасе Колосс Родосский Александрийский маяк

Многострочное текстовое поле - тег

Если содержимое поля превысит его размеры - появится бегунок.

Пример использования формы

Теперь давайте посмотрим: как работает форма.

Форма заказа обучающего видеоматериала:


Ваше имя: *



Ваш заказ:



Выберите носитель:


CD


DVD


USB Flash


Ваш E-mail: *



Ваш адрес: *





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

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

Пример: Простая HTML-форма

  • Попробуй сам »

Моя первая форма:
Имя:
Фамилия:



Простая форма

Моя первая форма:
Имя:
Фамилия:


Элемент

Формы вставляются на веб-страницы посредством элемента . Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент .
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method . Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

Элемент

Практически все поля для формы создается с помощью элемента (от англ. input — ввод). Внешний вид элемента меняются в зависимости от значения его атрибута type :

Вот некоторые значения атрибута type :

Ввод текста и пароля

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

Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

Пример создания формы с полем для ввода пароля:

Пример: Поле ввода пароля

  • Попробуй сам »

Ваш логин:

Пароль:




Ваш логин:

Пароль:


Вместе с этим атрибутом можно использовать атрибут maxlenght , значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size . По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size , рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value . Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

  • Попробуй сам »

Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35




Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35

Флажки (checkbox)

Элемент типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name , однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

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

Пример: Использование переключателей

  • Попробуй сам »
  1. Джаз
  2. Блюз
  3. Рок
  4. Шансон
  5. Кантри




Какие музыкальные жанры Вы любите?

  1. Джаз
  2. Блюз
  3. Рок
  4. Шансон
  5. Кантри

Кнопки подтверждения (submit) и очистки (reset)

Элемент типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset» . Элементу типа submit может быть присвоен необязательный атрибут name . Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Пример: Использование submit и reset

  • Попробуй сам »

После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.





Атрибут action.

Главным для элемента

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

…

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php . Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение.php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action . Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action="".

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST . Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET . Рассмотрим применение каждого из них.

Метод POST

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

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET , ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET , давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

т.е. замените POST на GET .
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин , и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

File_name.html?firstname=Вася&lastname=Пупкин

Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&) .
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

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

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

Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие 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-код .

Выберите вариант:

Тег . Атрибут "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 ", если не будет стоять, то значение этой переменной будет "", то есть пустой строкой.

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

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

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

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

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

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

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

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

Элемент

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