Javascript var document form

Содержание
  1. Формы и javascript. FORM
  2. Свойства форм
  3. Свойства первого набора
  4. Элементы форм
  5. Кнопки (BUTTON, RESET, SUBMIT)
  6. Свойства
  7. Метод
  8. Пример
  9. Нажатие кнопки
  10. Флажок (CHECKBOX)
  11. Свойства
  12. Метод
  13. Пример
  14. Метод click флажка
  15. Переключатель (RADIO)
  16. Свойства
  17. Метод
  18. Пример
  19. Метод click группы переключателей
  20. Список (SELECT)
  21. Свойства
  22. Методы
  23. Пример
  24. Работа с готовым списком
  25. Пример
  26. Динамическое заполнение списка
  27. Поле ввода (TEXT)
  28. Свойства
  29. Методы
  30. Пример
  31. Заполните анкету
  32. Текстовая область (TEXTAREA)
  33. Свойства
  34. Методы
  35. Пример
  36. Отправьте телеграмму
  37. Поле ввода пароля (PASSWORD)
  38. Свойства
  39. Методы
  40. Пример
  41. Регистрация
  42. Как я могу использовать select box как навигационное меню?
  43. Как я могу использовать картинку для кнопки submit?
  44. Передача данных между формами на различных страницах
  45. Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
  46. Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
  47. Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
  48. Как я могу отключить поле текстового ввода?
  49. Как сделать загрузку страницы при выборе флажка?
  50. Сохранение данных в локальное хранилище браузера:
  51. Особенности onClick, onSubmit, onReset
  52. DOM объект элемента INPUT:

Формы и javascript. FORM

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

  • action. Значение атрибута ACTION тега FORM .
  • encoding. Значение атрибута ENCTYPE тега FORM .
  • method. Значение атрибута METHOD тега FORM .
  • target. Значение атрибута TARGET тега FORM .
  • elements. Массив всех элементов формы.
  • length. Размер массива elements.
Читайте также:  Date

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


Кнопки (BUTTON, RESET, SUBMIT)


Свойства


Метод


Пример

      

Нажатие кнопки

Нажатие кнопки

Флажок (CHECKBOX)


Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
  • defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод


Пример

    

Метод click флажка

Флажок Состояние флажка можно изменить и этой кнопкой

Метод click флажка

Переключатель (RADIO)


Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • length. Количество переключателей в группе.
  • checked. Состояние переключателя: true — переключатель включен, false — выключен.
  • defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод


Пример

     

Метод click группы переключателей

Мужской Женский Состояние переключателей можно изменить и этой кнопкой

Метод click группы переключателей

Список (SELECT)


Свойства

  • name. Имя объекта.
  • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
  • length. Количество элементов (строк) в списке.
  • options. Массив элементов списка, заданных тегами OPTION .
  • value. Значение атрибута VALUE .
  • text. Текст, указанный после тега OPTION .
  • index. Индекс элемента списка.
  • selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
  • defaultSelected. Отражает наличие атрибута SELECTED : true — есть, false — нет.

Методы


Пример

     

Работа с готовым списком

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый — свойству selected .

Пример

    

Динамическое заполнение списка

Динамическое заполнение списка

Поле ввода (TEXT)


Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

      

Заполните анкету

Фамилия: Имя: Возраст: Телефон:

Заполните анкету

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

Текстовая область (TEXTAREA)


Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое области.
  • value. Текущее содержимое области.

Методы

  • focus( ). Передает области фокус ввода.
  • blur( ). Отбирает у области фокус ввода.
  • select( ). Выделяет содержимое области.

Пример

      

Отправьте телеграмму

Отправьте телеграмму

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