Создание форм 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>

Пример: