Form

Объект Form представляет собой HTML элемент <form>.

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

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

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

action

Свойство action возвращает или устанавливает значение атрибута action данного элемента.

Синтаксис

formObject.action [ = str_action ]

str_action - определяет URL, который указывает, куда отправлять данные формы. Возможные значения:

• Абсолютный URL - указывает на другой веб - сайт (нпример: action="http://www.example.com/example.htm")
• Относительный URL - указывает на файл в пределах веб - сайта (нпример: action="example.htm");
• Код JavaScript ( например: action="javascript: alert('Работает!');"

Возвращаемое значение

Строка, представляющая URL, куда отправить формы-данные

Пример

<form id="f1" method="post" name="form1" action="javascript: f()">
  Имя: <input type="text" name="name" value="Василий"><br>
 Отчество: <input type="text" name="pname" value="Петрович"><br>
 Фамилие:  <input type="text" name="fname" value="Иванов"><br>
<input type=submit value="Попробуй">
</form>

<script>
var frm = document.forms[0];
function f() {var t='';
t += '<br>name = ' + frm.name;
t += '<br>method = ' + frm.method;
t += '<br>target = ' + frm.target;
t += '<br>action = ' + frm.action;
t += '<br>encoding = ' + frm.encoding;
t += '<br>length = ' + frm.length;
t += '<br>elements[] = ';
for (var i = 0; i< frm.length; i++) {
        t = t + '"'+frm.elements[i].value + '" '; }
t += '<br>Новые Значения:';
frm.action = "handler.php";
frm.method = "get";
frm.target = "_self";
var x = frm.elements[frm.length-1];
x.style.color="red";
x.value = "Попробуй ещё раз!";
t += '<br>method = ' + frm.method;
t += '<br>target = ' + frm.target;
t += '<br>action = ' + frm.action;
t += '<br>submt.value = ' + x.value;
document.getElementById('demo').innerHTML = t;  }
</script>

elements

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

Синтаксис

formObject.elements

Комментарии

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

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>

<script>
var formObject = document.forms[0];
var elems = formObject.elements.age;
alert(elems[0].value); // 10, первый input
</script>

Эти ссылки не зависят от окружающих тегов. Элемент может быть «зарыт» где-то глубоко в форме, но он всё равно доступен через formObject.elements.

Пример

encoding

Свойство encoding задает, каким образом данные из формы должны быть закодированы перед их отправкой на сервер.

Синтаксис

formObject.action [ = str_encoding ]

str_encoding - application/x-www-form-urlencoded | multipart/form-data | text/plain

application/x-www-form-urlencoded

Это значение по умолчанию. Означает, что в данных, передаваемых на сервер, пробелы заменяются на "+", а специальные символы заменяются на их 16-ричное ASCII значение.

multipart/form-data

Пробелы заменяются на "+", но специальные символы не кодируются (передаются как есть).

multipart/form-data

Никакие символы не кодируются (они передаются как есть). Данное значение необходимо указывать, если в форме имеются элементы отправки файлов: <INPUT TYPE=file>.

Возвращаемое значение

Строка, представление того, как форма-данных должна быть закодирована перед отправкой его на сервер

Пример

length

Свойство length возвращает количество элементов в форме.

Синтаксис

formObject.length

Возвращаемое значение

Количество, представляющее число элементов в форме

Пример

method

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера.

Синтаксис

formObject.method [ = str_method ]

str_method - get | post

get

Это значение по умолчанию. Означает, что к URL добавляются данные: имя = значение & имя = значение & ...

post

Данные посылаются в виде HTTP POST операции.

Возвращаемое значение

Строка, представляющий метод HTTP , используемый для отправки формы (либо "get" или "post").

Пример

name

Свойство name возвращает или устанавливает значение атрибута name данного элемента.

Синтаксис

formObject.name [ = str_name ]

str_name - название формы

Возвращаемое значение

Строка, представляющая имя формы

Пример

reset()

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

Синтаксис

formObject.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>

target

Свойство target возвращает или устанавливает значение атрибута target данного элемента.

Синтаксис

formObject.target [ = str_target ]

str_name - "_blank", "_self", "_parent", "_top" или "framename":

_blank

Загружает страницу в новое окно браузера.

_self

Загружает страницу в текущее окно.

_parent

Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top

Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

framename

Загружает страницу в указанный фрейм.

Возвращаемое значение

Строка, представляющая значение атрибута target.

Пример

submit()

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

Синтаксис

formObject.submit()

Пример

<FORM NAME=f ACTION="handler.php">
  <INPUT NAME="test" value="Пробуем_метод_submit()" type="hidden">
</FORM>

<b>
  <A HREF="javascript:document.f.submit();"> Попробуем </A>
</b>

Событие Reset

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

<FORM onReset="javascript: alert('Не дадим восстановить!');return false;">
<INPUT VALUE="Измените этот текст" SIZE=30>
<INPUT TYPE=reset VALUE="Восстановить">
</FORM>

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

Событие Submit

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

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

<FORM NAME=f METHOD=post onSubmit="return TestBeforeSend();"
      ACTION="handler.php">
Ваш Логин: <INPUT NAME="Login""> 
<INPUT TYPE=submit VALUE="Отправить данные">
</FORM>

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

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