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

DOM интерфейс

На чтение 10 мин
Содержание
  1. .forms
  2. Кратко
  3. Как пишется
  4. Как пользоваться
  5. Доступ к формам
  6. Взаимодействие с полями
  7. Как понять
  8. На практике
  9. Владислав Чичужко советует
  10. Элементы форм
  11. Навигация по элементам формы
  12. forms
  13. elements
  14. value
  15. checked
  16. files
  17. focus() , blur()
  18. select()
  19. value
  20. value
  21. selectedIndex
  22. options
  23. selectedOptions
  24. selected

.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

Источник

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

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

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

forms

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

elements

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

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

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

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

value

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

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

checked

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

files

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

focus() , blur()

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

     
Введите что-нибудь: 
Вы ввели:

select()

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

     
Введите что-нибудь: 
Вы ввели:

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

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

value

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

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

value

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

selectedIndex

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

options

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

         var form = document.forms.user_form; var select = form.elements.user_select; function showNum()

selectedOptions

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

         var form = document.forms.user_form; var select = form.elements.user_select; function showNum()

selected

Элементы имеют булевое свойство selected . Оно характеризует состояние опции: выбрана или не выбрана .
  • Панель навигации
  • Размер шрифта
    1. Автоматически
    2. Самый мелкий
    3. Мелкий
    4. Средний
    5. Крупный
    6. Самый крупный
  • Цветовая схема
    1. Тёмная
    2. Светлая

© 2014-2023 WebGentleman | WG
При использовании материалов сайта ссылка на исходную статью обязательна

О сайте: Основная цель: Предоставить полезную и актуальную информацию по всем этапам создания сайтов. Целевая аудитория: Начинающие пользователи, кто хочет самостоятельно создавать сайты, и опытные веб-разработчики.

Источник

Читайте также:  Объектные типы данных java
Оцените статью
© 2023 Программирование