Контейнер FORM и поля форм в JavaScript

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

<FORM NAME=f_name METHOD=get
ACTION="javascript:void(0);">
<INPUT NAME=i_name SIZE=30 MAXLENGTH=30>
</FORM>

window.document.f_name.i_name.value="Текстовое поле";

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

window.document.forms[0].elements[0].value="Текстовое поле";

В данном примере не только к форме, но и к полю формы мы обращаемся как к элементу массива.

Рассмотрим подробнее объект Form, который соответствует контейнеру FORM.

Сами по себе методы, свойства и события объекта Form используются нечасто. Их переопределение обычно связано с реакцией на изменения значений полей формы.

1. action

<FORM METHOD=post
ACTION="javascript:window.alert('We use JavaScript-code as an URL');
void(0);">
<INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в action">
</FORM>

2. elements[]

<FORM NAME=fe>
<INPUT NAME=fe1 SIZE=30 MAXLENGTH=30>
<INPUT TYPE=button VALUE="Ввести текст по имени"
onClick="document.fe.fe1.value='Ввести текст по имени';">
<INPUT TYPE=button VALUE="Ввести текст по индексу"
onClick="document.fe.elements[0].value='Ввести текст по индексу';">
<INPUT TYPE=reset VALUE="Очистить">
</FORM>

document.forms[i].elements.length.

3. reset()

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

4. submit()

<FORM NAME=s METHOD=post
ACTION="javascript:window.alert('Данные подтверждены');void(0);">
Введите цифру или букву:<INPUT SIZE=1 MAXLENGTH=1>
</FORM>
<A HREF="javascript:document.s.submit();">Отправить данные</A>

5. onReset

Для этой цели в него введен атрибут onReset:

<FORM onReset="javascript:window.alert(
'Event Reset');return false;">
<INPUT VALUE="Значение по умолчанию">
<INPUT TYPE=reset VALUE="Восстановить">
</FORM>

6. onSubmit

Функция, определенная в этом атрибуте, будет выполняться перед тем, как отправить данные на сервер. При этом в зависимости от того, что функция вернет в качестве значения, данные либо будут отправлены, либо нет.

function test()
{
if(parseInt(document.sub.digit.value).toString()=="NaN")
{
window.alert("Некорректные данные в поле формы.");
return false;
}
else
{
return true;
}}
...
<FORM NAME=sub onSubmit="return test();" METHOD=post
ACTION="javascript:window.alert('Данные подтверждены');void(0);">
<INPUT NAME=digit SIZE=1 MAXLENGTH=1><INPUT TYPE=submit VALUE="Отправить">
</FORM>

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

Соответственно, данные либо отправляются на сервер, либо нет.

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

<FORM>Число гипертекстовых ссылок:
<INPUT SIZE=10 MAXLENGHT=10 VALUE="&{document.links.length};">
 до момента обработки формы.
<INPUT TYPE=button VALUE="Число всех гипертекстовых ссылок в документе"
onClick="window.document.forms[0].elements[0].value=document.
links.length;">
<INPUT TYPE=reset VALUE="Установить по умолчанию">
</FORM>

В данном примере первое поле формы — это поле ввода. Используя подстановку, мы присваиваем ему значение по умолчанию, а потом при помощи кнопки изменяем это значение.

Объект Text (текстовое поле ввода) характеризуется следующими свойствами, методами и событиями:

Свойства объекта Text — это стандартный набор свойств поля формы. В полях ввода можно изменять только значение свойства value.

Обычно при программировании полей ввода решают две типовых задачи: защита поля от ввода данных пользователем и реакция на изменение значения поля ввода.

Рекомендуем в повседневной деятельности:

Скачать - инструкцию по созданию загрузочной флешки = 50,02мин.	20.04.2014г.
Скачать - правила получение аттестата Webmoney  (30.61 MB) = 7. 5 мин.	11.01.2013г.
Скачать ссылки на каталоги - для регистрации сайта (69.5 MB) = 9. 7 мин.	01.10.2013г.
Скачать - wifi router настройка модема (41.72 MB) = 7 мин. 46 сек.	26.01.2013г.
Скачать - TDSSKiller диагностика, лечение систем (24,71 MB) = 6,02 мин.	01.12.2012г.
Скачать - пример готового проэкта в Lazarus (91,59 MB) = 1,31мин.	08.04.2013г.
Скачать - правила установки MySQL в Lazarus (20,17 MB) = 4,55 мин.	25.02.2013г.

Загрузка...