Главная » Языки программирования

Доступ к формам javascript

Содержание
  1. Доступ к элементам формы
  2. Доступ к текстовым полям
  3. Доступ к флажкам
  4. Доступ к радио-кнопкам
  5. Доступ к спискам выбора
  6. .forms
  7. Кратко
  8. Как пишется
  9. Как пользоваться
  10. Доступ к формам
  11. Взаимодействие с полями
  12. Как понять
  13. На практике
  14. Владислав Чичужко советует

Доступ к элементам формы

Как правило, доступ к элементу HTML осуществляется по его идентификатору с помощью метода document.getElementById() . Но для доступа к HTML-формам чаще всего используется свойство document.forms . Свойство document.forms представляет собой массив всех форм на текущей странице. Поэтому если на странице находится лишь одна форма, то она доступна с помощью первого элемента массива document.forms[0] . С другой стороны, форме можно присвоить имя:

Тогда она доступна с помощью элемента массива document.forms[‘myForm’] .

Обращение ко всем элементам формы также осуществляется по имени, которое служит в качестве индекса массива в свойстве elements формы. Допустим, например, что у первой формы на странице имеется элемент с атрибутом name=»element1″ . Тогда доступ к этому элементу осуществляется с помощью следующего кода JavaScript:

document.forms[0].elements['element1']

Имеется и более краткая форма доступа к информации формы. Например, сокращенная форма доступа к элементу element1 формы myForm выглядит так:

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

Доступ к текстовым полям

В HTML поддерживаются три вида текстовых полей:

Несмотря на то что эти поля действуют по-разному в браузере, доступ к ним в JavaScript осуществляется практически одинаково. Атрибут value каждого из этих полей содержит текст внутри поля. Его можно использовать как для чтения, так и для записи текста в поле.

Читайте также:  Создать пустую папку python

В приведенном ниже фрагменте кода демонстрируется два следующих приема: доступ к свойству поля и применение выражения this.form для упрощенного доступа к форме данного поля.

function showText(f)  window.alert(f.elements['textfield'].value); >
 type="text" name="textfield" /> type="button" value="Show text" onclick="showText(this.form);" />

Доступ к флажкам

Флажок в HTML-форме может находиться в двух состояниях: установленном и сброшенном. Поэтому обращение к флажку их кода JavaScript чаще всего осуществляется для определения его состояния.

Свойство checked флажка возвращает логическое значение true , если флажок установлен, а в противном случае — логическое значение false .

function showStatus(f)  window.alert('The checkbox is ' + (f.elements['chkbox'].checked ? 'checked.' : 'not checked.')); >
 type="checkbox" name="chkbox" /> type="button" value="Show status" onclick="showStatus(this.form);" />

Доступ к радио-кнопкам

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

document.forms[номер].elements[группа_кнопок]

Каждый элемент данного массива представляет собой отдельную кнопку-переключатель и поддерживает свойство checked . Это свойство действует таким же образом, как и аналогичное свойство флажка, возвращая логическое значение true , если кнопка-переключатель выбрана, а в противном случае — логическое значение false .

С помощью свойства value доступно также значение каждой кнопки-переключателя. В приведенном ниже фрагменте кода осуществляется циклическое обращение к каждой кнопке-переключателю и вывод ее состояния.

function showStatus(f)  var s= ''; for (var i=0; f.elements['radiobutton'].length; i++)  var bth = f.elements['radiobutton'][i]; s += btn.value + ':' + btn.checked + "\n"; > window.alert(s); >
 type="radio" name="radiobutton" value="R" />red type="radio" name="radiobutton" value="G" />green type="radio" name="radiobutton" value="B" />blue type="button" value="Show status" onclick="showStatus(this.form);" />

Доступ к спискам выбора

Список выбора в HTML-форме состоит из двух элементов. Так, элемент закладывает основание для такого списка и предоставляет его имя, хранящееся в атрибуте name . А отдельные элементы списка представлены элементами , предоставляющими следующие данные: надпись элемента списка, отображаемую в окне браузера, а также значение, посылаемое серверу при предъявлении формы.

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

  • selectedIndex . Предоставляет начинающийся с нуля индекс элемента. выбранного в настоящий момент из списка. Значение -1 этого свойства означает, что ни один из элементов не был выбран, что справедливо только для списков, состоящих из более чем одного элемента.
  • options . Массив со всеми элементами выбора из списка. Каждый такой элемент поддерживает свойство selected . Если это свойство принимает логическое значение true , значит, данный элемент выбран из списка.

Как правило, свойства selectedIndex оказывается достаточно для проверки. А свойство options очень удобно для доступа к выбранному из списка элементу. В этом случае атрибут value выбранного элемента списка предоставляет данные, отправляемые серверу, а свойство text возвращает надпись данного элемента, отображаемую в окне браузера.

В приведенном ниже листинге осуществляется доступ ко всем важным данным, связанным с выбранным элементом списка:

function showStatus(f)  var index = f.elements['selectionlist'].selectedIndex; if (index == -1)  window.alert('No element selected'); > else  var element = f.elements['selectionlist'].options[index]; window.alert('Element #' + index + ' (caption: ' + element.text + ', value: ' + element.value + ') selected'); > >
 name="selectionlist" size="3"> value="R">red value="G">green value="B">blue  type="button" value="Show status" onclick="showStatus(this.form);" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • 1С:Предприятие (31)
  • API (29)
  • Bash (43)
  • CLI (100)
  • CMS (139)
  • CSS (50)
  • Frontend (75)
  • HTML (66)
  • JavaScript (150)
  • Laravel (72)
  • Linux (147)
  • MySQL (76)
  • PHP (125)
  • React.js (66)
  • SSH (27)
  • Ubuntu (68)
  • Web-разработка (509)
  • WordPress (73)
  • Yii2 (69)
  • БазаДанных (95)
  • Битрикс (66)
  • Блог (29)
  • Верстка (43)
  • ИнтернетМагаз… (84)
  • КаталогТоваров (87)
  • Класс (30)
  • Клиент (27)
  • Ключ (28)
  • Команда (69)
  • Компонент (60)
  • Конфигурация (62)
  • Корзина (32)
  • ЛокальнаяСеть (28)
  • Модуль (34)
  • Навигация (31)
  • Настройка (140)
  • ПанельУправле… (29)
  • Плагин (33)
  • Пользователь (26)
  • Практика (99)
  • Сервер (74)
  • Событие (27)
  • Теория (105)
  • Установка (66)
  • Файл (47)
  • Форма (58)
  • Фреймворк (192)
  • Функция (36)
  • ШаблонСайта (68)

Источник

.forms

Возвращает живую коллекцию всех форм, которые есть на странице.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

forms — это поле объекта document . Оно хранит коллекцию всех элементов , которые есть на текущей странице.

Коллекция доступна только для чтения.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызывается обращением к свойству объекта document . Так можно получить коллекцию всех форм:

 const collection = document.forms const collection = document.forms

Как пользоваться

Скопировать ссылку «Как пользоваться» Скопировано

Для примера создадим три формы на одной странице: форму для применения промокода, форму с полем для подписки на рассылку, и форму авторизации с помощью номера телефона.

      .     .      form> label for="promocode">Промокодlabel> input id="promocode" type="text" name="promocode" placeholder="WIN-1234" required> button type="submit">Применитьbutton> form> . form id="subscriptionFormId"> label for="email">Почтаlabel> input id="email" type="email" name="email" placeholder="email@example.com" required> button type="submit">Подписатьсяbutton> form> . form id="loginFormId" name="loginFormName"> label for="phone">Ваш номерlabel> input id="phone" type="tel" name="phone" placeholder="776-2323" required> button type="submit">Отправить код подтвержденияbutton> form>

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

Формы, у которых указаны атрибуты id или name , можно получить по значениям этих атрибутов. В остальных случаях получить форму можно по индексу, который совпадает с порядком описания форм на странице.

Доступ к формам

Скопировать ссылку «Доступ к формам» Скопировано

Первая форма в примере выше не имеет атрибутов. Единственный способ обращения к ней — через её индекс в коллекции:

 document.forms[0] document.forms[0]

У второй формы задан атрибут id , а значит, обращаться можно и по значению атрибута, и по индексу:

 document.forms['subscriptionFormId']document.forms.subscriptionFormIddocument.forms[1] document.forms['subscriptionFormId'] document.forms.subscriptionFormId document.forms[1]

Третья форма содержит как атрибут id , так и name . У нас появляется возможность получить форму ещё и по имени, указанному в атрибуте name :

 // По имени:document.forms['loginFormName']document.forms.loginFormName // По id:document.forms['loginFormId']document.forms.loginFormId // По индексу:document.forms[2] // По имени: document.forms['loginFormName'] document.forms.loginFormName // По id: document.forms['loginFormId'] document.forms.loginFormId // По индексу: document.forms[2]

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

В случае, если элементов на странице нет, коллекция будет доступной, но пустой. Её длина будет равна нулю.

По аналогии со свойством length у массивов, можно получить общее количество форм на странице, запросив значение длины коллекции:

 document.forms.length document.forms.length

Взаимодействие с полями

Скопировать ссылку «Взаимодействие с полями» Скопировано

Элементы коллекции document . forms имеют тип HTML Form Element и фактически являются ссылками на соответствующие элементы форм на странице.

Например, чтобы получить номер телефона в форме логина, мы напишем:

 const phone = document.forms.loginFormName.phone.value const phone = document.forms.loginFormName.phone.value

Выключим кнопку отправки для промокода:

 document.forms[0].querySelector('[type="submit"]').disabled = true document.forms[0].querySelector('[type="submit"]').disabled = true

Или даже вызовем интерактивную валидацию формы подписки:

 document.forms.subscriptionFormId.reportValidity() document.forms.subscriptionFormId.reportValidity()

Другими словами, работа с формой и её полями в этом случае ничем не отличается от взаимодействия с DOM-элементом формы, запрошенным по селектору.

Читайте подробнее об этом в статье «Работа с формами».

Как понять

Скопировать ссылку «Как понять» Скопировано

Все элементы на странице отслеживаются браузером в реальном времени и доступны в специальном поле объекта document . В любой момент, из любого нашего скрипта, независимо от контекста.

Благодаря этому мы получаем ещё один вариант взаимодействия с формами в обход использования любых селекторов.

Так как свойство form возвращает коллекцию, то можно пройтись по всем формам циклом. Это может быть полезно для глобальных операций на странице. Например, для сбора аналитики или отключения отправки форм из-за потери связи с сервером.

Ещё один плюсик в копилку использования тега 🙂

На практике

Скопировать ссылку «На практике» Скопировано

Владислав Чичужко советует

Скопировать ссылку «Владислав Чичужко советует» Скопировано

🛠 По коллекции можно пройтись методами, предусмотренными для массивов, но сперва необходимо обернуть её в метод Array . from ( ) или использовать цикл for . . . of :

 Array.from(document.forms).forEach((form) =>  console.log(form)>) for (const form of document.forms)  console.log(form)> Array.from(document.forms).forEach((form) =>  console.log(form) >) for (const form of document.forms)  console.log(form) >

🛠 Формы, которым задан атрибут name , также попадают и в сам объект document . К ним можно обращаться напрямую, в обход коллекции document . forms :

 document.myFormName document.myFormName

Источник

Оцените статью
© 2024 Программирование