Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17330 / 1604 | Оценка: 3.91 / 4.09 | Длительность: 12:32:00
Лекция 17:

HTML5. Работа с веб - формами

Свойства и методы формы

Для форм в JavaScript определены следующие свойства, часть из которых представляет собой трансляцию атрибутов HTML элемента form. Свойства и их описание представлены в таблице 17.2 :

Таблица 17.2.
Свойство Описание
name Имя формы
action Адрес файла серверного сценария, который будет обрабатывать заполненную и переданную форму
method Метод передачи данных серверу
encoding Тип содержимого, используемый для отправки формы на сервер
target Имя окна или фрейма для загрузки документа, сгенерированного сценарием на основании принятых из формы данных
length Количество элементов формы
elements[] Массив элементов формы

Для формы определены два метода, эмулирующие нажатие на кнопки типа submit и reset:

  • submit();
  • reset().

Свойства элементов управления

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

Общими для всех элементов форм являются следующие свойства:

  • name – наименование элемента формы;
  • value – строка, определяющее значение, отображаемое элементом и / или используемая серверным сценарием, обрабатывающим полученные из формы данные;
  • disabled – определяет доступность элемента в текущем контексте;
  • form – наименование формы.

Ряд элементов формы обладает свойствами отличными от других элементов.

Свойства элемента input:

  • type – тип элемента input;
  • defaultValue – текст, первоначально отображающийся в элементе формы (только для text и password);
  • checked – булево значение, определяющее отмечен ли в данный момент элемент формы (для radio и checkbox);
  • defaultChecked – булево значение, определяющее отмечен ли элемент формы по умолчанию (для radio и checkbox).

Для элемента textarea помимо прочих определено свойство defaultValue – текст, первоначально отображающийся в многострочном текстовом поле.

Свойства определенные только для элемента select:

  • length – количество элементов списка;
  • options[] – массив элементов списка;
  • selectedIndex – номер выбранного в текущий момент элемента списка.

Свойства, определенные только для элемента option:

  • text –строка, задающая текст элемента списка;
  • selected – булево значение, определяющее выбран ли в данный момент элемент списка;
  • defaultSelected – булево значение, определяющее выбран элемент списка по-умолчанию.

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

Ключевые термины и определения

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

Краткие итоги

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

Более подробно создание веб - форм будет рассмотрено в рамках практического занятия №2. С отдельными элементами веб - форм мы также будем сталкиваться при выполнении других практических заданий.

Список материалов для самостоятельного изучения

  1. http://www.w3schools.com/html/html_forms.asp
  2. http://www.w3schools.com/tags/tag_input.asp
  3. http://ktonanovenkogo.ru/html/html-new/html-dlya-nachinayushhix-sozdanie-i-rabota-s-html-formami-tegi-form-input-select-option-textarea-1.html
  4. http://www.html-form-guide.com/html-form/html-form-input.html
  5. http://vvz.nw.ru/Lessons/JavaScript/Forms/JS-form-elements-method-evetns.htm
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Сергей Мороз
Сергей Мороз
Беларусь
Владимир Крюков
Владимир Крюков
Казахстан