В данном уроке мы разберем разные полезные темы JavaScript: работу с выделением, работу с формами.

Работа с формами

Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) элементов).

Мы можем, к примеру, обратиться к любой форме, как к энному элементу массива, например, к форме с номером 0: 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
</body>
document.forms[0].innerHTML = '!';

HTML код станет выглядеть так: 

<body>
	<form>
		!
	</form>
	<form>
		<input type="text" value="1">
		<input type="text" value="2">
		<input type="text" value="2">
	</form>
</body>

А можем перебрать все формы с помощью цикла: 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
</body>
var forms = document.forms;

for (var i = 0; i < forms.length; i++) {
	forms[i].innerHTML = '!';
}

HTML код станет выглядеть так: 

<body>
	<form>
		!
	</form>
	<form>
		!
	</form>
</body>

Следующем образом - document.forms[i].elements - можно найти общее количество форм на странице.

Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега <form>. Например, если форме дать имя test, то к ней можно обратиться так - document.forms['test'] или так - document.forms.test.

В следующем примере форме с именем form1 поставим текст '!', а форме с именем form2 - текст '?' (двумя разными способами): 

<body>
	<form name="form1">
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form name="form2">
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
</body>
document.forms.form1.innerHTML = '!';
document.forms['form2'].innerHTML = '?';

HTML код станет выглядеть так: 

<body>
	<form name="form1">
		!
	</form>
	<form name="form2">
		?
	</form>
</body>

Обращение к элементам форм

У каждой формы есть свойство elements, которое содержит массив элементов формы. С его помощью можно обратиться к определенному элементу формы по его номеру.

Для примера давайте обратимся к форме номер 1, а затем к ее элементу номер 0: 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
</body>
document.forms[1].elements[0].value = '!';

HTML код станет выглядеть так: 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="!">
		<input value="2">
		<input value="3">
	</form>
</body>

Можно также перебрать все элементы формы с помощью цикла. Давайте получим форму с номером 1 и всем элементам этой формы поставим value '!': 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
</body>
var elements = document.forms[1].elements;

for (var i = 0; i < elements.length; i++) {
	elements[i] = '!';
}

HTML код станет выглядеть так: 

<body>
	<form>
		<input value="1">
		<input value="2">
		<input value="3">
	</form>
	<form>
		<input value="!">
		<input value="!">
		<input value="!">
	</form>
</body>

При необходимости с помощью двух вложенных циклов можно перебрать все формы и все элементы внутри них.

Обращение к элементам форм по имени

К элементам формы, так же, как и к самим формам, можно обращаться по имени из атрибута name: 

<body>
	<form name="form1">
		<input value="1" name="input1">
		<input value="2" name="input2">
		<input value="3" name="input3">
	</form>
</body>
document.forms.form1.elements.input1.value = '!';

HTML код станет выглядеть так: 

<body>
	<form name="form1">
		<input value="!" name="input1">
		<input value="2" name="input2">
		<input value="3" name="input3">
	</form>
</body>

Тег fieldset

Свойство elements также есть у тегов fieldset.

Работа с селектами

Посмотрите также новый видеоурок на рекурсию, там этот материал раскрыт подробнее: https://youtu.be/dtuQ0EyoNsU

Давайте теперь разберем, как работать с выпадающими списками select через JavaScript.

Пусть в переменной select лежит выпадающий список, тогда так - select.value - мы можем получить value выбранного пункта списка: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
alert(select.value); //выведет 'one'

Результат выполнения кода:

one

Если записать в select.value значение атрибута value определенного тега option - он станет выбранным: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.value = 'one';

HTML код станет выглядеть так: 

<select id="select">
	<option value="one" selected>Один</option>
	<option value="two">Два</option>
	<option value="three">Три</option>
</select>

Можно обращаться к пунктам списка не по value, а по порядковому номеру таким образом - select.selectedIndex (нумерация начинается с нуля).

Давайте сделаем выбранным нулевой пункт списка: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.selectedIndex = 0;

HTML код станет выглядеть так: 

<select id="select">
	<option value="one" selected>Один</option>
	<option value="two">Два</option>
	<option value="three">Три</option>
</select>

А теперь выведем номер выбранного пункта: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
alert(select.selectedIndex); //выведет 1

Результат выполнения кода:

1

Если в select.selectedIndex присвоить -1, то не один из пунктов списка не будет выбран: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.selectedIndex = -1;

HTML код станет выглядеть так: 

<select id="select">
	<option value="one">Один</option>
	<option value="two">Два</option>
	<option value="three">Три</option>
</select>

Есть и альтернативный способ сменить отмеченный пункт списка - обратиться не к селекту, а в нужному пункту списка вот так - option.selected (option - это название переменной, в которой лежит пункт списка). Если присвоить свойству selected значение true - этот пункт станет выбранным, если false - наоборот.

Посмотрите как работать с этим свойством на следующем примере: 

<select>
	<option value="one" id="option">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var option = document.getElementById('option');
option.selected = true;

HTML код станет выглядеть так: 

<select id="select">
	<option value="one" id="option" selected>Один</option>
	<option value="two">Два</option>
	<option value="three">Три</option>
</select>

Можно также не только указывать новое значение этому свойству, но и считывать его, например, чтобы узнать, выбран данный пункт или нет.

Для тега option также есть свойство index, в котором хранится порядковый номер пункта списка (только для чтения), и свойство text, в котором хранится текст пункта списка.

Обращение к тегам option

Для тега select есть свойство options, в котором хранится список пунктов.

Давайте с его помощью последовательно выведем содержимое атрибутов value тегов option: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
var options = select.options;

for (var i = 0; i < options.length; i++) {
	alert(options[i].value);
}

А теперь в текст каждого тега option запишем '!', если это выбранный пункт, и '?' - если не выбранный: 

<select id="select">
	<option value="one">Один</option>
	<option value="two" selected>Два</option>
	<option value="three">Три</option>
</select>
var select = document.getElementById('select');
var options = select.options;

for (var i = 0; i < options.length; i++) {
	if (options[i].selected === true) {
		options[i].text = '!';
	} else {
		options[i].text = '?';
	}
}

HTML код станет выглядеть так: 

<select id="select">
	<option value="one">?</option>
	<option value="two" selected>!</option>
	<option value="three">?</option>
</select>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.