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

154

посл. ред. 12.07.2016

Наиболее частым применением JavaScript является проверка форм перед отправкой на сервер. Обычно, на вводимую пользователями информацию налагаются определённые требования. JavaScript позволяет на лету обработать введённые данные и сразу указать пользователю на ошибки. Такое поведение страницы очень удобно для взаимодействия.

Навигация по элементам формы

В DOM используются специальные свойства для доступа к любому элементу формы. Прежде всего, необходимо получить ссылку на саму форму. Для этого можно воспользоваться поисковыми методами или свойством document.forms.

`forms`

Свойство forms представляет список всех форм в документе. Доступ к форме осуществляется по её имени или по индексу.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search"></form>
</body>
</html>

<script>
  var form = document.forms.search; // или
  var form = document.forms['search']; // или
  var form = document.forms[0];
</script>

`elements`

Доступ к элементу формы осуществляется аналогично свойству document.forms. Каждая форма имеет свойство elements, в котором содержится список всех элементов формы.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search">
    <input name="query">
  </form>
</body>
</html>

<script>
  var form = document.forms.search;
  var input = form.elements.query; // или
  var input = form.elements['query']; // или
  var input = form.elements[0];
</script>

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

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search">
    <input type="radio" name="query" value="1">
    <input type="radio" name="query" value="2">
  </form>
</body>
</html>

<script>
  var form = document.forms.search;
  var input = form.elements.query;
  alert(input[0].value); /* 1 */
  alert(input[1].value); /* 2 */
</script>

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

Особенности элемента `<input>`

`value`

Свойство value содержит текущее введённое пользователем значение. До начала ввода пользователем нового значения данное свойство определяется атрибутом value, если он указан.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="user_form" onsubmit="showValue(); return false" autocomplete="off">
    <input type="text" placeholder="some text" name="user_input">
    <input type="submit" value="Показать VALUE">
  </form>
</body>
</html>

<script>
  var form = document.forms.user_form;
  var input = form.elements.user_input;

function showValue() {
  alert(input.value); /* всегда выводит текущее значение */
}
</script>

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

`checked`

У элементов с типом checkbox и radio свойство value не может изменяться пользователем. При их использовании необходимо знать, выбраны ли они пользователем. Для этого используется логическое свойство checked. Оно отражает текущее состояние элемента (отмечен или не отмечен) и позволяет его изменить.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search" autocomplete="off">
    <input type="radio" name="query" value="1">    
    <input type="radio" name="query" value="2" checked>
  </form>
</body>
</html>

<script>
  var form = document.forms.search;
  var input = form.elements.query;
  alert(input[0].checked); /* false */
  alert(input[1].checked); /* true */
</script>

`files`

Поле для отправки файла (тип file) имеет свойство files. Это объект, содержащий список всех вставленных файлов.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="upload" onsubmit="showFile(); return false">
    <input type="file" name="user_file">
    <input type="submit" value="Отправить">
  </form>
</body>
</html>

<script>
function showFile() {
  var form = document.forms.upload;
  var files = form.elements.user_file.files;
  alert(files[0].name); /* покажет имя файла */
  alert(files[0].lastModifiedDate); /* покажет время последнего изменения файла */
}
</script>

`focus()`, `blur()`

С помощью методов focus() и blur() поле ввода можно сделать активным или неактивным. Например, можно автоматически сделать активным то поле, в котором допущена ошибка, и т.п.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search">
    <label>Введите что-нибудь: <input name="text_in" oninput="show()"></label>
    <br>
    <label>Вы ввели: <input name="text_out"></label>
  </form>
</body>
</html>

<script>
  var form = document.forms.search;
  var text_in = form.elements.text_in;
  var text_out = form.elements.text_out;
  text_in.focus(); /* автофокус на поле */

function show() {
  text_in.blur(); /* снимает фокус с поля */
  text_out.value = text_in.value;
  text_in.value = '';
}
</script>

`select()`

Метод select() используется для выделения введённого пользователем текста. При этом поле становится активным.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="search">
    <label>Введите что-нибудь: <input name="text_in" oninput="show()"></label>
    <br>
    <label>Вы ввели: <input name="text_out"></label>
  </form>
</body>
</html>

<script>
  var form = document.forms.search;
  var text_in = form.elements.text_in;
  var text_out = form.elements.text_out;
  text_in.focus();

function show() {
  text_out.value = text_in.value;
  text_out.select(); /* выделяет содержимое */
}
</script>

Особенности элемента `<textarea>`

Элемент <textarea> аналогичен полю <input>. Для него так же доступны методы focus(), blur(), select(). Их значения и действия полностью совпадают с теми же методами элемента <input>.

`value`

Элемент <textarea> не имеет атрибута value, но свойство value всё равно имеет. Его значением является содержимое тега.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="test" autocomplete="off">
    <textarea name="user_textarea">Текст</textarea>
  </form>
</body>
</html>

<script>
  var form = document.forms.test;
  var textarea = form.elements.user_textarea;
  alert(textarea.value); /* Текст */
</script>

Особенности элемента `<select>`

`value`

Элемент <select> не имеет атрибута value. Однако, свойство value всё равно присутствует. Его значение берётся из той опции (из её свойства value), которая выбрана в данный момент. Если выбрано несколько опций, то значение берётся из первой.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="test" autocomplete="off">
    <select name="user_select" multiple>
      <option value="1" selected>Число 1</option>
      <option value="2" selected>Число 2</option>
    </select>
  </form>
</body>
</html>

<script>
  var form = document.forms.test;
  var select = form.elements.user_select;
  alert(select.value); /* 1 */
</script>

`selectedIndex`

Свойство selectedIndex содержит индекс той опции, которая выбрана в данный момент (если используется атрибут multiple, то свойство содержит индекс первой из выбранных опций). Изменяя данное свойство, можно изменить текущее значение в поле <select>. Нумерация начинается с нуля. Значение -1 устанавливается для очистки поля.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="test" autocomplete="off">
    <select name="user_select">
      <option value="1">Число 1</option>
      <option value="2" selected>Число 2</option>
      <option value="3">Число 3</option>
    </select>
  </form>
</body>
</html>

<script>
  var form = document.forms.test;
  var select = form.elements.user_select;
  alert(select.selectedIndex); /* 1 */
  select.selectedIndex = -1;
  alert(select.value); /* пустая строка */
</script>

`options`

Свойство options содержит список всех тегов <option> внутри данного элемента <select>.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="user_form" onsubmit="showNum(); return false" autocomplete="off">
    <select name="user_select">
      <option value="1">Число 1</option>
      <option value="2">Число 2</option>
      <option value="3">Число 3</option>
      <option value="4">Число 4</option>
      <option value="5">Число 5</option>
      <option value="6">Число 6</option>
    </select>
    <input type="submit" value="Отправить">
  </form>
</body>
</html>

<script>
  var form = document.forms.user_form;
  var select = form.elements.user_select;


function showNum() {
  alert('Доступно опций: ' + select.options.length);
}
</script>

`selectedOptions`

Свойство selectedOptions содержит список тех тегов <option>, которые в данный момент выбраны.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="user_form" onsubmit="showNum(); return false" autocomplete="off">
    <select name="user_select" multiple>
      <option value="1">Число 1</option>
      <option value="2">Число 2</option>
      <option value="3">Число 3</option>
      <option value="4">Число 4</option>
      <option value="5">Число 5</option>
      <option value="6">Число 6</option>
    </select>
    <input type="submit" value="Отправить">
  </form>
</body>
</html>

<script>
  var form = document.forms.user_form;
  var select = form.elements.user_select;


function showNum() {
  alert('Выбрано опций: ' + select.selectedOptions.length);
}
</script>

`selected`

Элементы <option> имеют булевое свойство selected. Оно характеризует состояние опции: выбрана или не выбрана.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <form name="test" autocomplete="off">
    <select name="user_select">
      <option value="1">Число 1</option>
      <option value="2" selected>Число 2</option>
    </select>
  </form>
</body>
</html>

<script>
  var form = document.forms.test;
  var select = form.elements.user_select;
  alert(select.options[0].selected); /* false */
  alert(select.options[1].selected); /* true */
</script>

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

Навигация по элементам формы

forms

elements

Особенности элемента <input>

value

checked

files

focus(), blur()

select()

Особенности элемента <textarea>

value

Особенности элемента <select>

value

selectedIndex

options

selectedOptions

selected

`forms`

`elements`

Особенности элемента `<input>`

`value`

`checked`

`files`

`focus()`, `blur()`

`select()`

Особенности элемента `<textarea>`

`value`

Особенности элемента `<select>`

`value`

`selectedIndex`

`options`

`selectedOptions`

`selected`