Какой тип имеет свойство elements объекта form

Аннотация: Рассматривается самая старая часть спецификации JavaScript – программирование HTML-форм. Разбираются различные методы обработки событий, перехват отправки данных на сервер и способы организации обмена данными при помощи форм и JavaScript-кода.

Контейнер FORM

Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:

Поэтому в программах на JavaScript к ним обращаются по имени:

document.fname.iname.value=”Текст”;

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

document.forms[0].elements[0].value=”Текст”;
document.forms[‘fname’].elements[‘iname’].value=”Текст”;

Рассмотрим подробнее объект Form, который соответствует контейнеру FORM. Его свойства, методы и события используются для задания реакции на действия пользователя, например, изменения значений полей или нажатие кнопок.

Свойства, методы и события объекта Form

Свойства	Методы	События
length action method target encoding elements[]	reset() submit()	Reset Submit

Свойства объекта Form

Свойство action

Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там, где можно указать URL, можно указать и его схему javascript:, например:

Обратите внимание на тот факт, что в контейнере FORM указан атрибут METHOD. В данном случае это сделано для того, чтобы к URL, заданному в атрибуте ACTION, не дописывался символ ” ?”. Дело в том, что методом доступа по умолчанию является метод GET. В этом методе при обращении к ресурсу из формы создается элемент URL под названием search. Этот элемент предваряется символом ” ?”, который дописывается в конец URL скрипта. В нашем случае это привело бы к неправильной работе JavaScript-кода, поскольку конструкция вида

провоцирует ошибку JavaScript. Метод POST передает данные формы скрипту в теле HTTP-сообщения, поэтому символ ” ?” не добавляется к URL, и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа, и браузер не генерирует событие Submit, т.е. не обращается к серверу при нажатии на кнопку, как это было бы при стандартной обработке формы.

Свойство method

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы, он может выбрать тот или иной метод доступа. На практике чаще всего используются методы GET и POST.

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

<FORM NAME=f ACTION=”javascript: alert(‘Работает!’);”>
<SCRIPT>
document.write(‘По умолчанию установлен метод: ‘+document.f.method+’.<BR>’);
</SCRIPT>
<INPUT TYPE=button onClick=”document.f.method=’post'” VALUE=”Сменить метод на POST”>
<INPUT TYPE=button onClick=”document.f.method=’get'” VALUE=”Сменить метод на GET”><BR>
<INPUT TYPE=submit VALUE=”JavaScript в ACTION”>
</FORM>

5.1.
Изменение метода формы (GET и POST) скриптом

По умолчанию установлен метод GET.

В данном примере стоит обратить внимание на два момента:

Прежде чем открывать окно предупреждения, следует нажать кнопку “Метод POST”. Если этого не сделать, то появится сообщение об ошибке JavaScript. Здесь все выглядит достаточно логично. Формирование URL происходит при генерации события submit, а вызов скрипта – после того, как событие сгенерировано. Поэтому вставить переопределение метода в обработчик события нельзя, так как к этому моменту будет уже сгенерирован URL, который, в свою очередь, будет JavaScript-программой с символом ” ?” на конце. Переопределение метода должно быть выполнено раньше, чем произойдет событие Submit.
В тело документа через контейнер SCRIPT встроен JavaScript-код, который сообщает метод доступа, установленный в форме по умолчанию. Этот контейнер расположен сразу за контейнером FORM. Ставить его перед контейнером FORM нельзя, так как в момент получения интерпретатором управления объект FORM не будет создан, и, следовательно, работать с его свойствами не представляется возможным.

Никаких других особенностей свойство method не имеет. В данном свойстве можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.

Свойство target

Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. При этом всегда есть альтернативы: можно использовать значение этого свойства внутри JavaScript-программ для указания окна или фрейма, куда требуется загружать результат работы CGI-скрипта, а можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top и parent. Кроме того, для загрузки внешнего файла в некоторое окно или фрейм можно также применить метод window.open(). Все эти варианты будут продемонстрированы в разделе “Передача данных во фрейм”.

Свойство encoding

Свойство encoding объекта Form (а также атрибут enctype контейнера FORM ) задает, каким образом данные из формы должны быть закодированы перед их отправкой на сервер. Возможные значения:

Значения свойства encoding объекта Form

Значение	Описание
application/x-www-form-urlencoded	Это значение по умолчанию. Означает, что в данных, передаваемых на сервер, пробелы заменяются на “+”, а специальные символы заменяются на их 16-ричное ASCII значение, например, буква Щ заменяется на %D0%A9.
text/plain	Пробелы заменяются на “+”, но специальные символы не кодируются (передаются как есть).
multipart/form-data	Никакие символы не кодируются (они передаются как есть). Данное значение необходимо указывать, если в форме имеются элементы отправки файлов: <INPUT TYPE=file>.

Коллекция elements[]

При генерации встроенного в документ объекта Form браузер создает и связанный с ним массив ( коллекцию ) полей формы elements[]. Обычно к полям обращаются по имени, но можно обращаться и по индексу массива полей формы:

Индексирование полей в массиве начинается с нуля. Общее число полей в форме f доступно двумя способами: как свойство массива document.f.elements.length и как свойство объекта формы: document.f.length.

Методы объекта Form

Метод submit()

Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер:

<FORM NAME=f ACTION=”https://www.intuit.ru/rating_students/”>
Ваше имя пользователя на intuit:<INPUT NAME=query>
</FORM>
<A HREF=”javascript:document.f.submit();”>Посмотреть рейтинг</A>

Как видите, кнопки отправки ( submit ) у формы нет, но нажав на ссылку, мы выполняем отправку данных на сервер. Обычно при такой “скрытой” отправке данных на сервер браузеры, в целях безопасности, запрашивают подтверждение, действительно ли пользователь желает отправить данные. Отправка данных путем вызова метода submit() имеет отличия от нажатия пользователем кнопки INPUT типа TYPE=submit ; их мы рассмотрим в конце лекции.

Метод reset()

Метод reset() (не путать с обработчиком события onReset, рассматриваемым ниже) позволяет восстановить значения полей формы, заданные по умолчанию. Другими словами, вызов метода reset() равносилен нажатию на кнопку INPUT типа TYPE=reset, но при этом саму эту кнопку создавать не требуется.

<FORM NAME=f>
<INPUT VALUE=”Значение по умолчанию” SIZE=30>
<INPUT TYPE=button VALUE=”Изменим текст в поле ввода”
onClick=”document.f.elements[0].value=’Изменили текст’;”>
</FORM>
<A HREF=”javascript:document.f.reset();void(0);”>
Установили значение по умолчанию</A>

В данном примере если кликнуть по гипертекстовой ссылке, то в форме происходит восстановление значений полей по умолчанию.

События объекта Form

Событие Submit

Событие Submit возникает (и соответствующий обработчик события onSubmit вызывается) при нажатии пользователем на кнопку типа submit или при выполнении метода submit(). Действие по умолчанию, которое выполняет браузер при возникновении этого события – отправка введенных в поля формы данных на сервер, указанный в атрибуте ACTION, с помощью метода, указанного в атрибуте METHOD, с использованием способа кодирования, указанного в атрибуте ENCTYPE, и с указанием того, что результаты работы CGI-скрипта должны быть показаны в окне или фрейме с именем, указанным в атрибуте TARGET.

Фукцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onSubmit=”код_программы” у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Порядок выполнения этих действий и действий браузера, а также использование оператора return false для отмены последних, полностью аналогичны тем, что описаны ниже для onReset. Пример:

<SCRIPT>
function TestBeforeSend()
{
if(document.f.query.value==”)
{
alert(‘Пустую строку не принимаем!’);
return false;
}
else return true;
}
</SCRIPT>

<FORM NAME=f METHOD=post onSubmit=”return TestBeforeSend();”
ACTION=”https://www.intuit.ru/rating_students/”>
Ваше имя пользователя на intuit:<INPUT NAME=query>
<INPUT TYPE=submit VALUE=”Посмотреть рейтинг”>
</FORM>

В этом примере следует обратить внимание на конструкцию return TestBeforeSend(). Сама функция TestBeforeSend() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.

Событие Reset

Событие Reset возникает (и соответствующий обработчик события onReset вызывается) при нажатии пользователем на кнопку типа reset или при выполнении метода reset(). Действие по умолчанию, которое выполняет браузер при возникновении этого события – восстановление значений по умолчанию в полях формы. Однако функцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onReset=”код_программы” у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Браузер сначала выполняет эти действия, а затем – свое действие по умолчанию. Но если последним оператором в обработчике onReset будет return false, то действие браузера по умолчанию выполняться не будет. Этот прием называется перехватом события. Пример:

Здесь команда return false предотвратила восстановление значения поля. Команда return true, равно как и отсутствие оператора return, позволило бы браузеру продолжить обработку события – и восстановить значение поля.

Источник

Свойства элементов формы

Какой тип имеет свойство elements объекта form Здравствуйте! В этом уроке мы с вами рассмотрим элементы формы и навигацию по форме в JavaScript. Надо сказать, что элементы form имею довольно много свойств, которые мы сегодня и разберем. Да если вдруг забыли что такое HTML форма, то почитайте здесь.

Элементы формы javascript

Псевдомассив form.elements

Элементы FORM вы можете получить по имени или номеру, используя специальное свойство document.forms[name/index].

Вот так например:

document.forms.form1 — форма с именем ‘form1’
document.forms[0] — первая форма в документе

А любой элемент формы можно получить аналогичным образом, через свойство form.elements.
Вот пример:

Но на форме может быть и несколько элементов с одинаковым именем. В этом случае form.elements[name] вернет коллекцию элементов. Коллекция элементов напоминает массив в ней, также как и в массиве каждый элемент имеет свой индекс и отсчет начинается с нуля. Но на этом сходство и заканчивается дело в том, что коллекции не поддерживают методы массивов:

<body>
<form>
<input type=”radio” name=”age” value=”20″>
<input type=”radio” name=”age” value=”30″>
</form>
<script>
var form = document.forms[0];
var elem = form.elements.age;
alert(elem[0].value); // 20, первый input
</script>
</body>

Эти ссылки не зависят от окружающих их тегов. Элемент может быть где-то глубоко в форме, но он всё равно доступен через form.elements.
Свойство elements также есть у элементов <fieldset>. Вот пример:

<body>
<form>
<fieldset name=”set”>
<legend>fieldset</legend>
<input name=”text” type=”text”>
</fieldset>
</form>
<script>
var form1 = document.forms[0];
alert( form1.elements.text); // INPUT
alert( form1.elements.set.elements.text); // INPUT
</script>
</body>

Доступ form.name тоже работает, но с особенностями

Получить доступ к элементам формы можно не только через form.elements[name/index], но и проще: form[index/name].

Этот способ конечно короче, но обладает одной неприятной особенностью: если к элементу обратиться по его атрибуту name, а потом атрибут name изменить, то он по-прежнему будет доступен под старым именем.

Звучит конечно странно, поэтому вот пример.

<form name=”form”>
<input name=”text”>
</form>
<script>
var form = document.forms.form;
alert( form.elements.text == form.text ); // true, это тот самый INPUT
form.text.name = “new-name”; // меняем name ему
// нет больше элемента с таким именем
alert( form.elements.text ); // undefined
alert( form.text ); // INPUT (а должно быть undefined!)
</script>

Ссылка на форму element.form

По элементу можно получить его форму, используя свойство element.form.

Пример:

<body>
<form>
<input type=”text” name=”surname”>
</form>
<script>
var form = document.forms[0];
var elem = form.elements.surname;
alert(elem.form == form); // true
</script>
</body>

Элемент label

Элемент label – один из самых важных в формах.

Клик на label засчитывается как фокусировка или клик на элементе формы, к которому он относится.

Это позволяет посетителям кликать на большой красивой метке, а не на маленьком квадратике. Конечно, это довольно очень удобно.

Есть два способа показать, какой элемент относится к label:

Дать метке атрибут for, равный id соответствующего input:
<table>
<tr>
<td>
<label for=”agree”>Согласен с правилами</label>
</td>
<td>
<input id=”agree” type=”checkbox”>
</td>
</tr>
<tr>
<td>
<label for=”not-a-robot”>Я не робот</label>
</td>
<td>
<input id=”not-a-robot” type=”checkbox”>
</td>
</tr>
</table>

Завернуть элемент в label. В этом случае можно обойтись без дополнительных атрибутов:
<label>Кликни меня <input type=”checkbox”></label>

Элементы input и textarea

Для большинства типов элемента input значение ставится/читается через свойство value.

input.value = “Новое значение”;
textarea.value = “Новый текст”;

Не используйте textarea.innerHTML

Для элементов textarea также доступно и свойство innerHTML, но лучше им не пользоваться: поскольку оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.
Исключения составляют кнопки-переключатели – input type=»checkbox» и input type=»radio»
Текущее «отмеченное» состояние для checkbox и radio находится в свойстве checked (true/false).

if (input.checked) {
alert( “Чекбокс выбран” );
}

select и option

Элемент <select> имеет 3 важных свойства:

select.options – коллекция из подэлементов <option>,
select.value – значение выбранного в данный момент <option>,
select.selectedIndex – номер выбранного <option>.

Они дают три разных способа установить значение в <select>:

Найти соответствующий элемент <option> и установить в option.selected значение true.
Установить в select.value значение нужного <option>.
Установить в select.selectedIndex номер нужного <option>.

Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.

Вот эти способы на примере:

<select id=”select”>
<option value=”apple”>Яблоко</option>
<option value=”pear”>Груша</option>
<option value=”banana”>Банан</option>
</select>

В отличие от большинства других элементов управления, <select> позволяет нам выбрать несколько вариантов одновременно, если у него стоит атрибут multiple. Эту возможность используют редко, но в этом случае для работы со значениями необходимо использовать первый способ, то есть ставить или удалять свойство selected у подэлементов <option>.

Их коллекцию можно получить как select.options, например:

<select id=”select” multiple>
<option value=”blues” selected>Блюз</option>
<option value=”rock” selected>Рок</option>
<option value=”classic”>Классика</option>
</select>

alert(selected); // blues,rock
</script>

Создание нового элемента списка

В стандарте есть очень любопытный короткий синтаксис для создания элемента с тегом option:

option = new Option(text, value, defaultSelected, selected);

Параметры:

text – содержимое,
value – значение,
defaultSelected и selected поставьте в true, если чтобы сделать элемент выбранным.

Его можно использовать вместо document.createElement(‘option’), например:

var option = new Option(“Текст”, “value”);
// создаст вот такой <option value=”value”>Текст</option>

Такой же элемент, но выбранный:

var option = new Option(“Текст”, “value”, true, true);

Дополнительные свойства option

selected
выбрана ли опция или нет
index
номер опции в списке селекта
text
Текстовое содержимое опции (то, что видит посетитель).

Итого

Свойства для перемещения по формам:

document.forms
Форму можно получить как document.forms[name/index].
form.elements
Элементы в форме: form.elements[name/index]. Каждый элемент имеет ссылку на форму в свойстве form. Свойство elements также есть у <fieldset>.

Значение элементов читается/ставится через value или checked.

Для элемента select можно задать опцию по номеру через select.selectedIndex и перебрать опции через select.options. При этом выбранные опции (в том числе при мультиселекте) будут иметь свойство option.selected = true.

Задачи

Добавьте пункт в список

Есть список:

При помощи JavaScript:

Выведите значение и текст текущей выбранной опции.
Добавьте опцию: <option value=»Popsa»>Попса</option>.
Сделайте её выбранной.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Твитнуть

Источник

Поля формы и их объекты

Как было сказано ранее, контейнеру <FORM> соответствует объект (назовем его f ) класса Form ; он является свойством объекта document. В свою очередь, элементы формы, вложенные в контейнер <FORM>, например, <INPUT> различных типов, тоже соответствуют объектам различных классов, причем эти объекты являются свойствами объекта f.

У всех объектов, отвечающих полям формы, есть несколько стандартных свойств, доступных только для чтения: name (имя элемента, заданное в атрибуте NAME ), type (тип элемента, например, для контейнеров <INPUT TYPE=”…”> он совпадает со значением атрибута TYPE ), form (указывает на форму f, в которой данный элемент содержится).

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

document.форма.элемент.свойство // точечная нотация
document.форма.элемент[“свойство”] // скобочная нотация
document.forms[“имя_формы”].elements[“имя_элемента”].свойство
document.forms[индекс_формы].elements[индекс_элемента].свойство

Однако получающиеся выражения – довольно громоздкие. Поэтому было введено следующее соглашение: в обработчике события формы или элемента формы имя текущего элемента можно опускать (вместе со всей предшествующей “приставкой”). Кроме того, ссылаться на сам текущий элемент можно с помощью ключевого слова this. Последнее может потребоваться, например, когда нужно передать в функцию не какое-то свойство объекта, а сам объект.

Например, предположим, что у нас есть форма:

Тогда вместо полной записи:

мы можем использовать краткую, опустив приставку ” document.f.e “, указывающую на текущий элемент:

Более того, в этом контексте эквивалентны следующие записи:

value // короче не бывает!
this.value // здесь this ссылается на элемент “e”
form.e.value // form есть свойство объекта “e” (равное “f”)
this.form.e.value // комбинируем оба способа
document.f.e.value // почти полная запись
window.document.f.e.value // это самая полная запись
document.f.e.form.e.value // можно итерировать “form.e.”

Например, здесь в 3-й строчке form есть свойство (текущего!) элемента document.f.e – напомним, что это свойство ссылается на объект document.f. Аналогично, в обработчик onClick элемента b мы можем поместить скрипт form.e.value=50 (краткое обращение к свойству другого элемента формы: document.f.e.value ) или alert(form.method) (краткое обращение к свойству самой формы document.f.method ) или даже TestForBugs(this) (в пользовательскую функцию TestForBugs() будет передан (по ссылке) объект document.f.b ).

Как видим, это соглашение не только дает некоторую экономию кода, но также позволяет ссылаться на текущий элемент или на форму, не зная его имени или номера. Это предоставляет дополнительную гибкость при программировании форм; например, можно переименовать форму, ничего не меняя во всех скриптах. Далее мы рассмотрим объекты JavaScript, соответствующие полям различных типов в HTML-формах. При этом мы будем пользоваться данным соглашением. Поскольку свойства name, type и form есть у объектов всех элементов формы, то мы не будем их указывать особо.

Текстовое поле ввода (объект Text)

Поля ввода (контейнер INPUT типа TYPE=text ) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, выводя в эти поля промежуточные значения переменных и свойств объектов.

<A HREF=”https://site.com/”>ссылка 1</A>
<FORM>Число гипертекстовых ссылок к данному моменту:
<SCRIPT>
document.write(‘<INPUT NAME=t VALUE=’+document.links.length+’>’);
</SCRIPT>
<BR><INPUT TYPE=button
VALUE=”Число ссылок по окончании загрузки страницы”
onClick=”form.t.value=document.links.length;”>
<BR><INPUT TYPE=reset>
</FORM>
<A HREF=”https://rite.com/”>ссылка 2</A>

5.2.

В данном примере первое поле формы – это поле ввода. Мы присваиваем ему значение по умолчанию, равное числу гипертекстовых ссылок, имеющихся выше этого места в HTML-документе. Затем при помощи кнопки изменяем это значение на общее количество гипертекстовых ссылок во всем HTML-документе.

С каждым текстовым полем ввода <INPUT TYPE=text> связан свой объект класса Text, который является свойством той формы, в которой он был описан. Этот объект, в свою очередь, характеризуется следующими свойствами, методами и событиями:

Свойства, методы и события объекта Text

Свойства	Методы	Обработчики событий
defaultValue value size maxLength disabled readOnly	focus() blur() select()	onChange onSelect onFocus onBlur onClick onDblClick	onMouseOver onMouseOut onMouseDown onMouseUp onKeyPress onKeyDown onKeyUp

Все перечисленные свойства можно менять. Смысл их таков: value (текущее значение поля ввода), defaultValue (значение поля ввода по умолчанию), size (число умещающихся в поле символов, т.е. видимых) maxLength (максимальное число символов, которое можно присвоить значению данного поля) readOnly (может ли пользователь менять значение поля) disabled (может ли пользователь установить фокус на этом поле).

Опишем вкратце методы: focus() – устанавливает фокус на данном поле, blur() – убирает фокус с данного поля, select() – выделяет весь введенный текст (чтобы, например, его можно было скопировать в буфер, либо удалить, нажав клавишу Delete).

Смысл обработчиков событий вполне понятен из их названий: обработчик onChange вызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля ввода); onSelect – когда пользователь начинает выделять текст, расположенный в поле; onFocus и onBlur – когда поле получает и теряет фокус, соответственно; onClick и onDblClick – когда пользователь совершил одинарный или двойной щелчок мышью на поле, соответственно. Вторая колонка событий – стандартна для большинства элементов HTML-страницы. Нужно лишь иметь в виду, что обработчики событий onMouseDown, onMouseUp, onKeyPress, onKeyDown, onKeyUp срабатывают у того элемента формы, который в данный момент находится в фокусе.

Источник