HTML-формы

Элемент button

Элемент button является альтернативой кнопкам input type=submit, reset и button. Элемент имеет атрибуты name (для отправки данных на сервер), type со значениями submit, reset и button и value (отправляемое на сервер значение). Между открывающим и закрывающим тэгами элемента button находится HTML-содержимое, которое отображается на кнопке.

<button type="submit" name="MyButton" value="button1">
  <b>Отправить запрос</b>
</button>

Элемент select

Этот элемент отображается как список опций или как раскрывающийся список, в зависимости от значения атрибута size. Внутри элемента располагаются опции и/или группы опций.

<select name="fruits">
    <option selected>-Выберите любимый фрукт-</option>
    <option value="1">Яблоко</option>
    <option value="2">Груша</option>
    <option value="3">Банан</option>
  </select>

  <!-- size опущен или равен 1: раскрывающийся список. 
   Опция с атрибутом selected выбрана по умолчанию -->
  <!-- список из 6 видимых строк с прокруткой для остальных. 
   Выбирать можно только option. Группы (optgroup) создаются только для у
   добства пользователя.  -->
  <select size="6" name="chemistry">
    <optgroup label="Щелочные металлы">
      <option>Литий (Li)</option>
      <option>Натрий (Na)</option>
      <option>Калий (K)</option>
    </optgroup>
    <optgroup label="Галогены">
      <option>Фтор (F)</option>
      <option>Хлор (Cl)</option>
      <option>Бром (Br)</option>
    </optgroup>
  </select>

Пользователь может выбрать только одну опцию из раскрывающего списка. Значение ( value ) этой опции будет отправлено на сервер. Если атрибут value отсутствует, передается текст опции. Список опций допускает множественный выбор, если к элементу select добавлен атрибут multiple. Атрибут multiple не требует значения (в XHTML значение, как обычно в таких случаях, совпадает с именем атрибута) и автоматически превращает элемент select в список опций независимо от наличия или значения атрибута size. Пользователь делает множественный выбор, удерживая клавишу Shift (опции подряд) или Ctrl (опции вразбивку).

Выберите продукты для салата
  <select name="salad" multiple>
    <option>Лук</option>
    <option>Морковь</option>
    <option>Зелень</option>
    <option>Сметана</option>
    <option>Майонез</option>
    <option>Горчица</option>
  </select>

Элемент textarea

Элемент textarea отображается в браузере как поле для многострочного текстового ввода. Атрибуты cols и rows задают ширину (число символов) и высоту (число строк) элемента. Добавление атрибута readonly делает текст в поле доступным только для чтения. У элемента textarea нет атрибута maxlength или аналогичного, ограничивающего длину вводимого текста. Если ограничение необходимо, это следует делать программными средствами (см. ниже). В отличие от других элементов управления, нажатие клавиши Enter в textarea добавляет новую строку (в остальных случаях отправляет данные формы на сервер).

<textarea name="message" cols="60" rows="7">
  Введите Ваше сообщение
</textarea>

Вспомогательный элемент label

Для облегчения доступа в форме может использоваться элемент label (метка), связанный с элементом управления.

<input type="checkbox" name="agree" id="chkAgree">
  <label for="chkAgree">
    Я согласен с условиями</label>

Щелчок по метке равноценен щелчку по элементу управления. Атрибут for элемента label связан с id (не name ) элемента управления.

Программный доступ к форме и ее элементам

Форма является частью HTML-документа, и программный доступ к ее свойствам, методам и событиям осуществляется через Объектную модель документа (DOM), предоставляемую API браузера. API позволяет читать, изменять, удалять и создавать новые элементы формы. Все эти действия выполняются при помощи сценариев, написанных на языке Javascript (или VBScript).

Доступ к форме (объекту form ) осуществляется по индексу в коллекции форм HTML-документа.

var oForm = document.forms[0];//первая форма в документе

Internet Explorer допускает также доступ по имени формы (атрибуту name ), если таковой присутствует. Согласно спецификации HTML 4.01, атрибут name элемента form считается устаревшим и поддерживается только для обратной совместимости.

<form name="Form1" method="get" action="form.php">
  ...
  </form>

  <script type="text/javascript">
    var oForm = document.Form1;//работает в Internet Explorer
  </script>

Элемент form обладает множеством свойств, общих для большинства HTML-элементов, специфическими являются свойства action, method и enctype, совпадающие по смыслу с одноименными атрибутами; все они доступны по чтению и записи. Метод submit() немедленно отправляет данные формы на сервер. Метод reset() очищает все введенные пользователем данные без отправки на сервер. Важнейшими событиями, связанными с формой, являются onsubmit (пользователь нажал кнопку Submit ) и onreset (пользователь нажал кнопку Reset ). Оба эти события могут быть перехвачены и обработаны.

<form method="post" action="login.php" onsubmit="return Validate(this)">
  <!-- При нажатии на кнопку Submit будет вызвана функция Validate, 
  которая должна выполнить предварительную проверку формы. 
  Слово this в этом контексте указывает на форму. Если функция возвращает true, 
   данные формы отправляются на сервер, если false, отправка отменяется. -->
  ...
  </form>

  <script type="text/javascript">
    function Validate(oForm) {
      //выполнить проверку данных формы
      return true;
    }
  </script>

Доступ к элементам управления формы осуществляется по их именам (атрибутам name ). Возможен также поиск элементов управления (как и любых других HTML-элементов) по их id. Все элементы управления имеют свойства name, id, style, class (CSS) и некоторые другие, доступные по чтению и, в большинстве случаев, по записи (изменению). Свойство value (значение) есть у всех элементов управления, кроме input type="image". Именно это значение передается на сервер (при наличии атрибута name ) при отправке данных формы.

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

Все элементы управления генерируют многочисленные события, которые могут быть перехвачены и обработаны программно.

• Событие onfocus происходит, когда элемент управления получает фокус ввода, например, пользователь щелкает кнопкой мыши в текстовом поле или перемещается к элементу управления при помощи клавиши Tab на клавиатуре. В любой момент времени не более чем один элемент может иметь фокус ввода.
• Событие onblur происходит, когда элемент управления теряет фокус ввода, независимо, изменен элемент или нет. При переходе от одного элемента управления к другому сначала происходит событие onblur первого элемента, затем событие onfocus второго элемента.
• Событие onchange происходит, когда текстовое поле (элементы input type=text или password или textarea ) или список опций (элемент select ) были изменены пользователем и теряют фокус ввода. Это событие происходит до события onblur. Если изменений не было или они сделаны программно, событие не происходит. Событие onchange не происходит также, пока пользователь продолжает набирать текст или перемещаться по списку опций.
• Событие onclick генерируется, когда пользователь щелкает кнопкой мыши по элементу или нажимает клавишу Enter или пробел на кнопке, имеющей фокус ввода.
• Событие onkeypress генерируется, когда пользователь нажимает и отпускает клавишу, производящую символ, на клавиатуре. Это событие может быть разделено на два отдельных события, onkeydown (пользователь нажимает клавишу) и onkeyup (пользователь отпускает клавишу). Определить нажатую клавишу можно через объект event (событие), который генерируется Internet Explorer при возникновении события.

Следует помнить, что DOM модели, предоставляемые различными браузерами, различаются, и различия максимальны именно в обработке событий. Mozilla Firefox, Safari и Google Chrome отправляют в функцию – обработчик события аргумент – объект event> (событие). Internet Explorer не отправляет аргументы, но делает объект window.event доступным внутри функции – обработчика.