Шаг 8 - Массив элементов формы

Для хранения "внутренностей" у каждой формы существует два массива. Массив elements хранит все элементы формы для облегчения доступа к ним. Для опций элементов формы типа <select> предназначен массив options. Пример:

<html>
	<form action=1.cgi method=get name=forma1>
		E-Mail: <input type=text name=email>
		<input type=submit>
	</form>
</html>

Доступ к элементам массива можно осуществлять несколькими способами. Например в следующем примере показаны несколько способов доступа к элементу формы с именем email:

document.forms[0].elements[0];
document.forms[0].elements["email"];
document.forms[0].email;
document.forma1.email;
.....

Количество элементов в массиве можно узнать стандартным для всех массивов способом с помощью свойства length:

document.forma1.elements.length;

Если Вы внимательно посмотрите на спецификацию html, а скорее Вам просто стоит вспомнить какими атрибутами владеют все элементы формы. К любому атрибуту можно обратиться по его имени. Например, к атрибуту value тегов <input> Вы можете обратиться так:

document.forma1.email.value="mail@mail.ru";

Аналогично можно поступать с любыми другими атрибутами элемента, кроме атрибутов type и name, которые задают тип элемента на этапе создания формы.

Как мы уже говорили, создается еще один массив options. Он предназначен для определения выделенности пунктов меню в теге <select muptiple>. Если пункт меню выделен, то атрибут selected принимает значение true, если не выделено, то false. Вот примерчик:

<html>
<form name=f>

<select multiple name=s> 
<option value=1>1
<option value=2 selected>2
<option value=3>3
<option value=4>4
</select>

</form>

<script>
	document.writeln(document.f.s.options[0].selected);
	document.writeln(document.f.s.options[1].selected);
	document.writeln(document.f.s.options[2].selected);
</script>
</html>

В данном случае скрипт выведет такой результат:

false true false

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

Очень интересно менять размеры элементов формы. Например у <input> за размер отвечает атрибут size, а у <textarea> атрибуты cols и rows. Вы, например, можете предусмотреть парочку кнопок для увеличения и уменьшения размеров полей редактирования, помоему посетителям будет интересно ими поиграться %)


Предыдущий Шаг | Следующий Шаг | Оглавление
Автор Кузин Андрей.