Формы

name

Зачем нужен атрибут name?

HTML `<form id="my-form">...</form>`	HTML `<form name="my-form">...</form>`
JavaScript `document.getElementById("my-form");`	JavaScript `document.forms["my-form"];` `document.forms[0];`
Без `name`	С `name`

elements

Свойство формы elements содержит коллекцию всех значащих элементов

HTML

<form name="form">
<input name="text-input" type="text">
</form>

JavaScript

var form = document.forms.form; form.elements["text-input"]; form.elements[0];

elements

Элементы формы с потомками так же имеют свойство elements

HTML

<form name="form">
  <fieldset name="fieldset">
    <input name="text-input" type="text">
  </fieldset>
</form>

JavaScript

var form = document.forms.form;
var fields = form.elements.fieldset;
fields.elements["text-input"];

form.name

Получить доступ к элементам формы можно не только через form.elements[name/index], но и проще: form[index/name].

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

Проверим

form

Элементы формы ссылаются на свою форму через свойство form

HTML

<form>
  <fieldset name="fieldset">
    <input id="input" type="text">
  </fieldset>
</form>

JavaScript

var input = document.getElementById("input");
input.form;

value

Текущее значение элемента формы можно получить через свойство value

HTML

<form name="form">
  <fieldset name="fieldset">
    <input name="input" type="text">
  </fieldset>
</form>

JavaScript

document.forms[0].elements.input.value;

value

Свойство value элемента select соответствует свойству value выбранного в данный момент элемента option

HTML

<form name="form">
  <select name="select">
    <option value="0">
      First option
    </option>
  </select>
</form>

JavaScript

document.forms[0].elements.select.value;

selectedIndex

Свойство selectedIndex элемента select указывает на позицию в списке выбранного в данный момент элемента option

HTML

<select name="select">
  <option value="0">
    First option
  </option>
</select>

JavaScript

var s = document.forms[0].elements.select; s.selectedIndex;

Установка selectedIndex = -1 очистит выбор.

options

Список всех опций select можно получить через его свойство options

HTML

<select name="select">
  <option value="0">
    First option
  </option>
  <option value="1">
    Second option
  </option>
</select>

JavaScript

var s = document.forms[0].elements.select; s.options;

new Option

Новую опцию можно создать с помощью конструктора new Option. Добавить опцию в select можно методом add.

JavaScript

var s = document.forms[0].elements.select;
var opt = new Option(text, value, dafaultSelected, selected);
var opt = new Option("Text", 123, false, true);
s.add(opt, index);
s.add(opt, 2);

checked

Значение поля checkbox можно забрать через свойство checked

HTML

<input type="checkbox" name="checkbox" checked>

JavaScript

var c = document.forms[0].elements.checkbox; c.checked;

radio

Значение radio можно забрать через свойство value

HTML

<input type="radio" name="radio" value="1">
<input type="radio" name="radio" value="2">
<input type="radio" name="radio" value="3">

JavaScript

var c = document.forms[0].elements.radio; c.value;

События в формах

focus

Фокус на полях можно не только слушать, но и принудительно выставлять

HTML

<input type="text" name="input">

JavaScript

var text = document.forms[0].elements.input;
text.addEventListener("focus", function(e){
console.log("focus");
}, true);
text.focus();

blur

Фокус точно также можно и убирать

HTML

<input type="text" name="input" autofocus>

JavaScript

var text = document.forms[0].elements.input;
text.addEventListener("blur", function(e){
console.log("blur");
}, true);
text.blur();

Кстати, текущий элемент, на котором фокус, доступен как document.activeElement.

change

Событие change происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано.

HTML

<input type="text" name="input">

JavaScript

var text = document.forms[0].elements.input;
text.addEventListener("change", function(e){
console.log("change");
});

input

Событие input срабатывает тут же при изменении значения текстового элемента.

HTML

<input type="text" name="input">

JavaScript

var text = document.forms[0].elements.input;
text.addEventListener("input", function(e){
console.log("input");
});

IE9- не умеет input

Копипаста!

Событие change происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано.

JavaScript

var text = document.forms[0].elements.input;
var events = ["copy", "paste", "cut"];
for (var i = 0, len = events.length; i < len; i++) {
  text.addEventListener(events[i], function(event) {
    event.preventDefault();
  });
}

submit

Чтобы отправить форму на сервер, можно либо нажать кнопку <input type="submit"> или <input type="image">, либо нажать Enter, находясь на каком-нибудь поле.

HTML

<form name="form">
<input name="text-input" type="text">
</form>

JavaScript

var form = document.forms[0];
text.addEventListener("submit", function(e){
console.log("submit");
});
form.submit();