Создание форм 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
  Еще один тип скрытого ввода информации. Позволяет
  пересылать сценариям информацию, которая не может быть изменена
  пользователем.Некоторые прoграммы 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> При помощи этого элемента создается область
для ввода и прoсмотра текста. Может использоваться и не в составе формы, а как
самостоятельные детали страницы. Область ввода помогает сэкономить место
благодаря полосам прокрутки. Может иметь атрибуты:

• 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=»Cтрока для ввода критерия
поиска«> Допустим что на текущей странице задан базовый
URL при помощи элемента
<BASE href=»URL поискового средства в
Internet»> тогда, если пользователь введет в поле ключевые слова для
поиска слово1,слово2,слово3, то броузер сформирует и отошлет запрос для
поисковой машины сервера в
виде:
http://www.название.домен/?слово1+слово2+слово3 Если поисковая
программа сервера поддерживает стандартный синтаксис запроса с использованием
знаков ? и +,поиск будет осуществлен.

Элемент <BUTTON>.

Элемент <BUTTON> является альтернативой элементу
<INPUT> с более богатыми возможностями — например с заданием
альтернативного текста.
Синтаксис: <BUTTON

<IMG src=…> </BUTTON>

• name задает имя элементу.
• value задает значение элементу.
• type при использовании в качестве кнопки принимает значения:
  button, submit и reset.
• disabled делает недоступным данный элемент
• tabindex определяет положение в последовательности перехода
  клавишей Tab, отключенные поля форм не учавствуют в очередности.
• accesskey задает клавишу доступа.
• id задает имя для ссылки.

Пример:
<BUTTON name=»submit»
type=»submit«>отправить</BUTTON

Элемент <LABEL>.

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

Пример:

Пример:

Элемент <FIELDSET>.

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

Элемент <LEGEND>.

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

Пример: