Организация ввода данных

Интерактивные HTML-документы могут включать в себя следующие взаимодействия с пользователем:

·      регистрацию и вход на сайтах;

·      ввод личной информации (имя, адрес, данные кредитной карты и др.);

·      фильтрацию контента (с помощью выпадающих списков, флажков и др.);

·      выполнение поиска;

·      загрузку файлов.

Для этого используют блочный элемент form.  Для него обязательны атрибуты:

·      action содержит адрес, который определяет, куда будет отправлена информация формы;

·      method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.

Как правило, информация формы посылается на сервер. Но мы сейчас будем рассматривать обработку информации средствами языка JavaScript. Если в HTML-документе определена форма, то она доступна языку JavaScript как объект, входящий в объект document с именем, заданным атрибутом name тега form.  Если HTML-документе имеется форма

<FORM NAME="Test">

То в JavaScript обращение к форме будет таким:

DOCUMENT.Test

Внутри элемента form используются интерактивные элементы управления формы:

·      текстовые поля для одной строки (тег input);

·      текстовые поля для нескольких строк (тег textarea);

·      переключатели (тег input);

·      флажки (тег input);

·      выпадающие списки (тег select);

·      кнопки (тег input).

Эти элементы управления задействуют разные теги HTML, но большинство из них использует тег input. Но тип поля определяется его атрибутом type:

<input type="text">                    <!-- поле для текста -->

<input type="hidden">               <!—скрытое поле -->

<input type="file">                     <!-- поле для отправки файла -->

<input type="password">           <!-- поле для пароля (в поле ввода вместо символов будут черные кружочки)-->

<input type="checkbox">           <!--Флажок-->

<input type="radio">                  <!--Переключатель-->

<input type="reset">                  <!—Кнопка очистки полей ввода на форме -->

<input type="button">                <!—Кнопка-->

<input type="image">                <!—Кнопка с изображением-->

Как и форма, эти элементы  тоже являются объектами языка JavaScript. Обращаются к ним, обязательно указав форму, где они находятся. Например:

<FORM NAME="Test">

Фамилия:<input type="text" name="Fam" >

</FORM>

То обращение к элементу будет таким:

DOCUMENT.Test.Fam

Отметим основные свойства объектов, полученных с помощью тега input:

Type

Свойства

Значение

button,

reset,

submit

name

имя объекта

 

value

надпись на кнопке

text

name

имя объекта

defaultValue

начальное содержимое поля

 

value

текущее содержимое поля

checkbox

name

имя объекта

 

value

надпись на кнопке

checked

cостояние флажка: true- флажок установлен, false - флажок не установлен

defaultChecked

отражает наличие атрибута CHECKED: true - есть, false – нет

radio

name

имя объекта

value

надпись на кнопке

checked

cостояние флажка: true - флажок установлен, false - флажок не установлен

defaultChecked

отражает наличие атрибута CHECKED: true - есть, false – нет

length

количество переключателей в группе

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

Событие

Назначение

onblur

Потеря фокуса

onchange

Изменение значения элемента формы

ondblclick

Двойной щелчок левой кнопкой мыши на элементе

onfocus

Получение фокуса

onkeydown

Клавиша нажата, но не отпущена

onkeypress

Клавиша нажата и отпущена

onkeyup

Клавиша отпущена

onload

Документ загружен

onmousedown

Нажата левая кнопка мыши

onmousemove

Перемещение курсора мыши

onmouseout

Курсор покидает элемент

onmouseover

Курсор наводится на элемент

onmouseup

Левая кнопка мыши отпущена

onreset

Форма очищена

onselect

Выделен текст в поле формы

onscroll

Событие onscroll происходит при прокручивании содержимого веб-страницы

onsubmit

Форма отправлена

onunload

Закрытие окна

Для тега input отметим также следующие атрибуты:

Атрибут

Назначение

checked

Предварительно активированный переключатель или флажок.

list

Указывает на список вариантов, которые можно выбирать при вводе текста.

max

Верхнее значение для ввода числа или даты.

maxlength

Максимальное количество символов разрешённых в тексте.

min

Нижнее значение для ввода числа или даты.

minlength

Минимальное количество символов разрешённых в тексте.

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

placeholder

Выводит подсказывающий текст.

readonly

Устанавливает, что поле не может изменяться пользователем.

required

Обязательное для заполнения поле.

size

Ширина текстового поля.

src

Адрес графического файла для кнопки с изображением.

step

Шаг приращения для числовых полей.

value

Значение элемента.

Для создания выпадающих списков используется тэг select, а элементы выпадающего списка определяются с помощью тэга option.  Синтаксис:

<select>

<option>Пункт1</option>

<option>Пункт2</option>

  . . .

</select>

Имеются атрибуты:

Атрибут

Назначение

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

multiple

Выбор одновременно несколько элементов

Отметим основные свойства объекта select:

Свойства

Значение

name

имя объекта

value

надпись на кнопке

selectedIndex

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

length

количество элементов в списке

options

массив элементов списка, заданных тегами OPTION

value

значение атрибута VALUE у тега OPTION

text

текст, указанный после тега OPTION

index

индекс элемента списка

selected

присвоив этому свойству значение true, можно выбрать данный элемент

defaultSelected

отражает наличие атрибута SELECTED: true - есть, false – нет

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

<textarea>

    текст

</textarea>

Имеются атрибуты:

Атрибут

Назначение

cols

Ширина поля в символах.

maxlength

Максимальное количество символов разрешённых в тексте.

minlength

Минимальное количество символов разрешённых в тексте.

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

placeholder

Выводит подсказывающий текст.

readonly

Устанавливает, что поле не может изменяться пользователем.

required

Обязательное для заполнения поле.

rows

Высота поля в строках текста.

Отметим основные свойства объекта textarea:

Свойства

Назначение

name

имя объекта

value

надпись на кнопке

defaultvalue

начальное содержимое области

Для группировки части формы используют тэг fieldset, а затем эту группу можно озаглавить с помощью тэга legend (смотри рис. 10).

Тег label (англ. - метка) служит текстовой меткой для элемента input. По своему виду метка ничем не отличается от обычного текста, но благодаря ей пользователь может выбрать элемент формы кликом по тексту, расположенному внутри элемента label, а не по самому элементу input.

Приведем пример HTML-документа, где организовано заполнение анкеты и обработка данных после ввода данных с помощью формы и основных элементов управления:

<html>

<head>

  <meta charset="utf-8">

  <title>Анкета для работы в зоопарке</title>

  <style>

    body {

        background-color:rgba(255, 255, 0, 0.5); 

        color: red;         font-family: Arial;

      }

    span {  color: red;  }

    div {  color:blue;  }

    fieldset {  color: green;  }

    #zag {  color:blue; text-align: center;  }

    #bt1, #bt2 {  color:blue;   font-size: 14pt; margin-left: 50px; }

  </style>

  <script>

     function getDate()

     {

        var today = new Date();

        return "\n Время записи: "+today.toLocaleString();

     }

     function CheckBox(form, value) {

        switch(value)

        {

          case '1': 

            form.Letter.value = "Наверное, у тебя рубашка в полоску?"+getDate();

            break;   

          case '2':

            form.Letter.value = "Ну, ты крутой!!!"+getDate();

            break;  

          case '3':

            form.Letter.value = "Да слов нету ...!"+getDate();

            break; 

        }

     }

     function btnClick()

     {

       var b_fio = 1, b_tel = 1,

           fio = document.anketa.Fio.value, sait = document.anketa.Sait.value,

           age = document.anketa.Age.value, ball;

       if ((fio.trim()!='')&&(age!=''))

       {   

          ball=Number(b_fio);  

          if (sait!='')      ball = ball + 2;

          ball = ball + Number(age);

          n_scool = document.anketa.Scool.selectedIndex;

          if (n_scool>-1) 

             ball = ball + Number(document.anketa.Scool.options[n_scool].value);

          if (document.anketa.Z1.checked) {

            ball = ball + Number(document.anketa.Z1.value);

          }

          if (document.anketa.Z2.checked) {

            ball = ball + Number(document.anketa.Z2.value);

          }

          if (document.anketa.Z3.checked) {

            ball = ball + Number(document.anketa.Z3.value);

          }

          if ((ball>24)&&(ball<65)) {

            str = "Поздравляю, ВЫ, приняты на работу!";

          }

          else {

            str = "К сожалению, работа в зоопарке не для Вас!" ; }

// Результат обработки данных поместим внутрь абзаца с id=’itog’

          document.getElementById('itog').innerHTML = "<HR>" + fio.bold() + ", Вы набрали, баллов: <span>" + ball + "</span>. " + str + "<HR>";

       }

       else

       {

          alert('Вы не заполнили обязательные поля');

          var Elements = document.getElementsByTagName("em");

          if (fio.trim()=='')  { Elements[0].style.color='red';}

          if (age=='')        { Elements[1].style.color='red';}

       }

     }

  </script>

</head>

<body>

  <h1 id="zag">Анкета для работы в зоопарке</h1>

  <form name='anketa'>

    <fieldset>

      <legend>Контактная информация:</legend>     

      <B><em>Как вас величать? </em><span>*</span>:< /B>

      <INPUT TYPE='text' NAME='Fio' placeholder="Введите фамилию и имя">

      <br><br><B>е-mail< /B>:

      <input name='Sait' list="Sait">

        <datalist id="Sait">

          <option>@rambler.ru</option>

          <option>@yandex.ru</option>

          <option>@google.ru</option>

          <option>@mail.ru</option>

        </datalist>

    </fieldset><br>

    <fieldset>

      <legend>Персональная информация</legend>

      <B><em>Возраст</em><span>*</span>:

      </B><INPUT TYPE='number' NAME='Age' min='16' max='60' step='1'> &nbsp; &nbsp; &nbsp;

      <br><br><label for="Scool"><B>Образование:< /B></label>

        <select name="Scool">

          <option value="0" selected="selected"></option>

          <option value="2">Общее среднее</option>

          <option value="3">Специальное среднее</option>

          <option value="5">Высшее</option>

        </select>      

    </fieldset><br>

    <fieldset>

      <legend>Выберите ваших любимых животных: </legend>

      <label for="Z1"> &nbsp; &nbsp; &nbsp;

      <input name="Z1" type="checkbox" value="1" onClick="if (this.checked) CheckBox(this.form,this.value);"> Зебра</label>

      <label for="Z2"> &nbsp; &nbsp; &nbsp;

      <input name="Z2" type="checkbox" value="2" onClick="if (this.checked) CheckBox(this.form,this.value);"> Тигр</label>

      <label for="Z3"> &nbsp; &nbsp; &nbsp;

      <input name="Z3" type="checkbox" value="3" onClick="if (this.checked) CheckBox(this.form,this.value);"> Анаконда</label>

      &nbsp;& nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

      <B>Примечания:< /B><TEXTAREA NAME="Letter" ROWS=3 COLS=35>

      </TEXTAREA>

    </fieldset><br>

    <INPUT id="bt1" TYPE="button" VALUE="Обработать анкету" onClick="btnClick();">

    <INPUT id="bt2" TYPE="reset" VALUE="Очистить анкету">

  </form>

  <div id="itog"> </div>

</body>

</html>

Вид HTML-документа в браузере:

Рис. 10

Вид HTML-документа в браузере после заполнения анкеты:

Рис. 11