Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.

Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.

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

Итак, в html форма задается тегами

. Все остальные элементы формы располагаются между этими тегами.

У тега

есть несколько параметров:

  • name - имя формы. Необходимо, если на странице несколько форм
  • action - определяет URL-адрес, по которому будет отправлена информация введеная пользователем
  • method - определяет способ отправки информации
  • target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы
На данном этапе можете не очень вникать в эти параметры, их назначение станет очевидным при изучении языков обработки данных. А пока запомните, что все элементы формы располагаются между тегами
:

Текстовое поле

Простое однострочное текстовое поле, в которое можно вводить и редактировать текст. Задается тегом

Результат:

Параметры:

  • name - имя элемента,
  • type - тип элемента (в данном случае - text),
  • size - размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
  • maxlength - максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
  • value - текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
Возможны еще два параметра:
  • disabled - блокирует поле от любых изменений,
  • readonly - делает поле доступным только для чтения.
Пример:

Результат:

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

Это такое же текстовое поле, как и предыдущий элемент. Разница только в том, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Чаще всего используется при вводе паролей. Все параметры такие же, как у простого текстового поля, кроме параметра type="password" .

Пример:

Введите пароль:

Результат:

Введите пароль:
Попробуйте ввести что-нибудь в этом поле.

Флажки

Вы, конечно, встречали подобный элемент:

Какими языками вы владеете:
английский немецкий испанский французский

Он задается все тем же тегом , причем один тег задает один флажок. Нужно четыре флажка, придется четыре раза писать input.

Пример:

Какими языками вы владеете:
английский немецкий испанский французский

Рассмотрим его параметры:

  • type - тип элемента (в данном случае - checkbox),
  • name - имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
  • value - значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: lan1="english",
  • checked - им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

    Переключатели

    В отличии от флажков, можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type="radio" , все остальные такие же, как у флажков.

    Укажите ваш пол:
    мужской женский

    Результат:

    Укажите ваш пол:
    мужской женский

    Кнопки

    Существует четыре вида кнопок:

    • submit - кнопка отправки содержимого формы web-серверу. Ее параметры:
      • type="submit" - тип кнопки,
      • name - имя кнопки,
      • value - надпись на кнопке.
    • image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
      • type="image" - тип графической кнопки,
      • name - имя кнопки,
      • src - адрес картинки для кнопки.
    • reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
      • type="reset" - тип кнопки очищения,
      • name - имя кнопки,
      • value - надпись на кнопке.
    • button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:
      • type="button" - тип произвольной кнопки,
      • name - имя кнопки,
      • value - надпись на кнопке.
      • onclick - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.
    Если на форме несколько кнопок, то они должны иметь разные названия.

    Пример кода:

    Результат:

    Кнопки можно задавать и по другому, при помощи тегов . Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

    • type - тип кнопки, может принимать значения:
      • reset - кнопка очистки формы,
      • submit - кнопка отправки данных,
      • button - кнопка произвольного действия.
    • name - имя кнопки,
    • value - надпись на кнопке.
    Пример кода:
    Отправить

    Результат:

    Отправить
  • physical - перенос и на экране и при поступлении на сервер.
  • disabled - неактивное поле,
  • readonly - разрешено только чтение.
  • Пример:

    Результат:

    Попробуйте ввести текст и посмотрите на разницу в значениях параметра wrap .

    Раскрывающиеся списки

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

    • В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

      Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге

      используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

      http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

      Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

      Ниже перечислены типовые области применения этих методов на сайтах.

      GET

      Передача небольших текстовых данных на сервер; поиск по сайту.

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

      POST

      Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

      Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега

      В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

      Элементы формы традиционно располагаются внутри тега

      , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

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

      HTML5 IE Cr Op Sa Fx

      Форма

      В этом примере тег

      однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

      Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы (