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

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

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

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

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

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

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

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

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

<body>
  <form name="form1">
    <input name="one" value="1">
    <input name="two" value="2">
  </form>

  <script>
    var form1 = document.forms.form1; // можно document.forms[0]
    var elem1 = form.elements.one; // можно form.elements[0]
    alert( elem.value ); // 1
  </script>
</body>

Но на форме может быть и несколько элементов с одинаковым именем. В этом случае 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].

Читайте также  Изменение элементов формы: change, input, cut, copy, paste

Этот способ конечно  короче, но обладает одной неприятной особенностью: если к элементу обратиться по его атрибуту 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:

  1. Дать метке атрибут 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

Селект в JavaScript можно установить двумя путями: поставив значение select.value, либо установив свойство select.selectedIndex в номер нужной опции:

select.selectedIndex = 0; // первая опция

Установка selectedIndex = -1 очистит выбор.
Список элементов-опций доступен через select.options.

Читайте также  Изменение элементов формы: change, input, cut, copy, paste

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

Пример:

<form name="form"> 
<select name="genre" multiple> 
<option value="blues" selected>Блюз</option> 
<option value="rock" selected>Рок</option> 
<option value="classic">Попса</option> 
</select> 
</form> 
<script> 
var form = document.forms[0]; 
var select = form.elements.genre; 
for (var i = 0; i < select.options.length; i++) { 
var option = select.options[i]; 
if(option.selected) { alert( option.value ); } 
  } 
</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.

Задачи

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

Есть список:

<select>
  <option value="Rock">Рок</option>
  <option value="Blues" selected>Блюз</option>
</select>

При помощи JavaScript:

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

Об авторе

admin administrator

Сообщить об опечатке

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