Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 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.

Сергей Крупко
Сергей Крупко

Добрый день.

Я сейчас прохожу курс  повышения квалификации  - "Профессиональное веб-программирование". Мне нужно получить диплом по этому курсу. Я так полагаю нужно его оплатить чтобы получить диплом о повышении квалификации. Как мне оплатить этот курс?

 

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия