vvz.nw.ru Примеры к занятиям по JavaScript

<< Идентификация элементов форм

Существенным моментов программирования форм является идентификация их элементов. Рассмотрите еще раз иерархическую схему объектов раздела «Объектная модель документа DOM0». Массив форм forms[] вложен в объект document; элементы форм являются вложенными объектами самой формы; элементы списка являются вложенными объектами объекта select.

Вспомним о том, что объекты JavaScript по сути представляют собой ассоциативные массивы со строковыми ключами – именами свойств.

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

Нетрудно догадаться о причинах именно такого разделения. В отличие от прочих элементов форм, группы радиокнопок и элементы списка представляют собой массивы. А массив элементов списка к тому же является вложенным по отношению к объекту select.

Пусть в документе HTML задана следующая форма (это мог бы быть фрагмент online-анкеты). Из группы «прочих элементов форм» в ней представлено однострочное текстовое поле ввода. Указаны минимально необходимые атрибуты.

<form name="f">
   
    Ваше имя:<br>
    <input type="text"  name="yourName">
   
    Ваш пол:<br>
    <input type="radio"  name="sex" value="male">мужской<br>
    <input type="radio"  name="sex" value="female">женский<p>
   
    Город:<br>
    <select name="town">
      <option value="msk">Москва</option>
      <option value="spb">Санкт-Петербург</option>
      <option value="other">другой</option>
    </select>
  
 </form>

Во всех случаях при идентификации элементов форм используются имена (значения атрибута name)  заданных элементов HTML. По имени идентифицируется и сама форма; для нашей формы это обращение

document.f

Идентификация большинства элементов формы

Группу «прочих элементов форм» в нашей форме представляет текстовое поле yourName.  Варианты идентификации:

Идентификация групп радиокнопок

В нашей форме есть группа их двух радиокнопок с именем sex. Группа радиокнопок представляет собой массив, в котором к отдельной кнопке с индексом i (индексация начинается с нуля) можно обращаться следующим образом:

Идентификация элементов списка

В нашей форме представлен список с именем town. Его элементы представляет собой массив options[]. К элементу этого массива с индексом i (индексация начинается с нуля) можно обращаться следующим образом:

Универсальная идентификация

Есть и альтернативная возможность идентификации. Все элементы формы представлены массивом elements[], в котором содержатся в порядке их объявления в документе HTML.



vvz.nw.ru  > JavaScript