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

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

<input>

Как уже упоминалось, элемент <form> является своего рода контейнером для других элементов управления.

Чаще всего для определения элементов управления используется тег <input>.

<input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Атрибуты тега <input>:

  • accept– устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов;
  • accesskey – задает комбинацию клавиш, позволяющую перейти к элементу;
  • align –определяет выравнивание изображения;
  • altальтернативный текст для кнопки с изображением;
  • autocomplete –включает или отключает автозаполнение, соответственно принимает значения on и off;
  • border – задает толщину рамки вокруг изображения.;
  • checked – предварительно активированный переключатель или флажок;
  • disabled – блокирует доступ и изменение элемента;
  • form – связывает поле с формой по её идентификатору;
  • formaction – определяет адрес обработчика формы;
  • formenctype – устанавливает способ кодирования данных формы при их отправке на сервер;
  • formmethod – сообщает браузеру каким методом следует передавать данные формы на сервер (GET или POST);
  • formnovalidate – отменяет встроенную проверку данных на корректность введенных значений;
  • formtarget – определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы;
  • list – указывает на список вариантов, которые можно выбирать при вводе текста;
  • max– максимально допустимое значение для ввода числа или даты;
  • maxlength –максимально допустимое количество символов разрешенных в тексте;
  • min - минимально допустимое значение для ввода числа или даты;
  • multiple –позволяет загрузить несколько файлов одновременно;
  • name – задает имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать;
  • pattern – устанавливает шаблон ввода;
  • placeholder –выводит подсказывающий текст;
  • readonly –устанавливает, что поле не может изменяться пользователем;
  • required – отмечает, что поле является обязательным для заполнения;
  • size –задает ширину текстового поля;
  • src – определяет адрес графического файла для поля с изображением;
  • step – задает шаг приращения для числовых полей;
  • tabindex – определяет порядок перехода между элементами с помощью клавиши Tab;
  • type – сообщает браузеру, к какому типу относится элемент формы.
  • value –определяет значение элемента.

Основной атрибут тега <input>, определяющий вид элемента — type. В таблице 17.1 перечислены значения, которые может принимать этот атрибут.

Таблица 17.1.
Значение атрибута type Описание
button Кнопка
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных.
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных.
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.
color Виджет для выбора цвета.
date Поле для выбора календарной даты.
datetime Указание даты и времени.
datetime-local Указание местной даты и времени.
email Для адресов электронной почты.
number Поле ввода чисел. Ввод символов, не являющихся цифрами приведет к выводу предупреждения.
range Ползунок для выбора чисел в указанном диапазоне.
search Поле для поиска.
tel Поле для телефонных номеров.
time Поле для времени.
url Поле для веб-адресов.
month Поле для выбора месяца.
week Поле для выбора недели.

Работа с формами в JavaScript

Вся интерактивность при работе с формами, фактически, определяется логикой веб - сценариев. Рассмотрим основные моменты работы с формами.

Идентификация элементов управления

Существенным моментом программирования форм является идентификация их элементов. Рассмотрите еще раз иерархическую схему объектов раздела "Объектная модель документа DOM". Массив форм forms[] вложен в объект document; элементы форм являются вложенными объектами самой формы; элементы списка являются вложенными объектами объекта select.

Допустим, что задана следующая форма:

<form name="form">
   ФИО:<br>
  <input type="text" name="Name">
   Ваш пол:<br>
  <input type="radio" name="gender" value="male">мужской<br>
  <input type="radio" name="gender" value="female">женский<p>
    Город:<br>
  <select name="town">
   <option value="msk">Москва</option>
   <option value="spb">Санкт-Петербург</option>
   <option value="tmsk">Томск</option>
   <option value="other">другой</option>
  </select>
  </form>

Во всех случаях при идентификации элементов форм используются имена (значения атрибута name) заданных элементов HTML. По имени идентифицируется и сама форма; для нашей формы это обращение вида document.form.

К примеру, к элементу управления Name можно обратиться следующим образом:

  • document.form.Name;
  • document.form['Name'] .

К группе элементов с одинаковым именем можно обратиться так:

  • document.form. gender [i];
  • document.form[' gender '][i].

Элементы списка можно идентифицировать таким способом:

  • document.form.options[i];
  • document.form['options'][i] .

Также все элементы формы представлены массивом elements[], в котором содержатся в порядке их объявления в документе HTML.

Эмиль Галеев
Эмиль Галеев

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

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

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 () "

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

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

Мария Гуселетова
Мария Гуселетова
Россия, Омск
Анастасия Теницкая
Анастасия Теницкая
Россия