Учебник HTML

Учебник HTML >>Создание форм HTML

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

• Элемент <FORM>.
• Элемент <INPUT>.
• Элемент <TEXTAREA>.
• Элемент <SELECT>.
• Элемент <OPTION>.
• Элемент <OPTGROUP>.
• Элемент <ISINDEX>.
• Элемент <BUTTON>.
• Элемент <LABEL>.
• Элемент <FIELDSET>.
• Элемент <LEGEND>.

Элемент <FORM>.

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

• method
  Этот атрибут определяет способ пересылки данных сценарию CGI. Здесь протокол GET выбран по умолчанию, но в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных.
• action
  Этот атрибут определяет путь к сценарию CGI или адрес электронной почты.
• enctype
  Этот атрибут определяет способ кодирования содержимого формы. Другими словами он сообщает браузеру о способе кодирования информации перед отсылкой серверу. По умолчанию используется значение x-www-form-encoded.

Синтаксис формы для сценария: <FORM method="get" или "post" action="URL сценария" ></FORM>
Синтаксис формы для почты:<FORM method="get" или "post" action="mailto:адрес" ></FORM>

Подробнее:

Синтаксис:

Пример:

Элемент <INPUT>.

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

• TEXT
  Однострочное текстовое поле, используется для ввода информации, которую нельзя ввести ни в одном из остальных элементов формы. Сюда вводятся имена, адреса, должности, телефоны, хобби, и данные практически любого типа. Элемент может иметь атрибуты:
  • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
  • size. Задаёт максимально допустимую длину поля в символах.
  • value. Задаёт значение по умолчанию, которое можно менять.
  Синтаксис: <INPUT type="TEXT" name="Hobby" maxlength="35" size="20" value="Shopping">
  Пример:
  
• PASSWORD
  Однострочное поле, в котором вместо вводимых символов отображаются звездочки. Элемент может иметь атрибуты:
  • maxlength. Задаёт максимально допустимую длину вписываемого значения в символах.
  • size. Задаёт максимально допустимую длину поля в символах.
  • value. Задаёт значение по умолчанию, которое можно менять.
  Синтаксис: <INPUT type="PASSWORD" name="PASSWORD_BOX" maxlength="35" size="20">
  Пример:
  
• HIDDEN
  Еще один тип скрытого ввода информации. Позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных.
  Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
  <INPUT type="HIDDEN" name="file" value="anyfile.html">
• CHECKBOX
  Флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Элемент может иметь атрибуты:
  • checked. Задаёт начальный статус флажка по умолчанию.
  • value. Задаёт значение по умолчанию, которое можно менять.
  Синтаксис: <INPUT type="checkbox" name="send_mail" value="yes" checked>
  Пример:
  
• RADIO
  Переключатели во многом напоминают флажки, отличаясь лишь более широкими функциональными возможностями выбора. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент INPUT.
  Пример:
  
  Visa <INPUT type="radio" name="payment_type" value="visa">
  Mastercard <INPUT type="radio" name="payment_type" value="mastercard">
  American Express <INPUT type="radio" name="payment_type" value="AmEx" checked>
  
  
  Visa Mastercard American Express
• SUBMIT
  Щелчок на этой кнопке приводит к пересылке содержимого формы сценарию, который был задан атрибутом action в элементе <FORM>. C помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
  Синтаксис:
  <FORM method="get" или "post" action="mailto:name@domen.ru" >
  <INPUT type="submit" value="послать"></FORM>
  
  Пример:
  
• RESET
  Кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов. Имеет так же атрибут value.
  
  Синтаксис: <INPUT type="reset" value="очистка">
  Пример:
  
  
  
• IMAGE
  Во многом похож на кнопку SUBMIT, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты:
  • src. Задаёт URL файла с изображением.
  • align. Задаёт выравнивание изображения относительно текста при помощи значений TOP, MIDDLE и BOTTOM.
  • name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.
  
  Синтаксис: <INPUT type="image" src="knopka.gif">
  
  Пример:
  
• BUTTON
  Создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
  Синтаксис: <INPUT type="button"value="кнопка">
  Пример:
  
• FILE
  Создает управляющий элемент выбор файла.
  Синтаксис: <INPUT type="file">
  Пример:
  
• ACCESSKEY
  Задает кнопку, при нажатии которой происходит обработка поля.
  Синтаксис: <INPUT accesskey="a">
  Пример: нажмите Alt+a:
  
• ID
  Задает имя для ссылки.
  Синтаксис: <INPUT id="имя">
• SIZE
  Задает ширину элемента в пикселях.
  Синтаксис: <INPUT size="число">
• DISABLED
  Отключает возможность изменять содержимое поля или положение кнопки.
  Синтаксис: <INPUT disabled">
  Пример:
  

Элемент <TEXTAREA>.

Элемент <TEXTAREA> При помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:

• name. Задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
• rows. Задаёт высоту области в строках.
• cols. Задаёт ширину области в символах.

Синтаксис:

Пример:

Элемент <SELECT>.

Элемент <SELECT> может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <OPTION> и атрибуты:

• name. Задаёт имя.
• size. Задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
• multiple. Задаёт возможность одновременного выбора нескольких значений.

Элемент <OPTIONS>.

Элемент же <OPTIONS> задает возможные варианты выбора меню <SELECT>
Синтаксис: <OPTION value="n" selected>значение
имеет атрибуты:

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

Пример:

Пример:

Элемент <OPTGROUP>.

Элемент <OPTGROUP> применяется для логической группировки элементов <OPTION> внутри тэга <SELECT> имеет атрибут label:

Синтаксис:

Элемент <ISINDEX>.

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

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