JavaScript и формы Web-страниц

(Здесь обсуждается использование! Создание форм тут.)

Весь процесс создания формы направлен на удобство пользователя.

Для программиста же наиважнейшим является процесс извлечения и использования того, что пользователь ввел. То есть встает вопрос: как считать (определить) значения элементов форм.

Для этого нужно обратиться к нему следующим образом, разделяя смысловые фрагменты точками: 

	document.ИмяФормы.ИмяЭлемента.Свойство

Но это обращение, абсолютно правильное с точки зрения синтаксиса, представляет собой фамилию + имя + отчество. Также, как и в реальной жизни, его иногда можно сократить до имени: 

	ИмяЭлемента.Свойство

Это сработает только при выводе полей без создания формы (без соответствующих тегов). Важно только соблюсти уникальность имен, что очень непросто.

При правильном создании, отбросить можно только слово document. 

	ИмяФормы.ИмяЭлемента.Свойство

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

Если с именем формы (оно обязано быть уникальным!) и именем элемента (уникально в пределах формы) всё должно быть ясно, то запрашиваемые свойства необходимо обсудить.

Важнейшие свойства (атрибуты) объектов форм

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

Для начала создадим комплексную форму, содержащую все виды элементов 

<form name="test">
</form>
Число:

Флажки: Первый Второй Третий
Переключатель: Красный Зеленый Синий

Свойство value

Смысл данного свойства из перевода с английского (значение) не совсем однозначен, хотя иногда нам поможет команда создания элемента, в явном виде содержащая это слово.

Свойство checked

Свойство selected

Свойство readonly

Свойство disabled

Метод onchange (изменение значения поля)

Метод onblur (выход из поля)

Метод onfocus (вход в поле)

a

a

a

a

a

a

Работа с кнопкой

Кнопка для нас крайне важна, так как очень удобна для запуска действия (программы). В приведенном далее коде происходит создание кнопки (без создания формы) с именем but1 и реакцией на нажатие в виде диалога, содержащего значение надписи. 

  <input type="button" name="but1" value="Кнопка but1" onclick="alert(this.value);">
  →

Пускай следующая кнопка (сделанная другим тегом и также вне формы), уже безымянная, выполняет две команды, разделенные точкой с запятой:
первая — изменит надпись предыдущей кнопки, обратившись к ней по имени (but1),
вторая — выведет значение надписи на нажатой кнопке (this). Жмите! 

  <button onclick="but1.value='Меня изменили программно!';alert(this.value);">Кнопка</button>
  →

Теперь нажмите кнопку but1 и она сообщит содержание своей новой надписи. Обновление экрана клавишей F5 возвратит всё к исходному состоянию.

А здесь произойдет смена надписи на кнопке после нажатия (this, а не but1): 

  <button onclick="this.value='На меня нажали!';">Кнопочка</button>
  →

Далее будет приводится только описание метода onclick!

Текстовые поля (поля ввода)

Кнопки кнопками, но обрабатывать придется введенную информацию.

Его можно реализовать двумя тегами: <INPUT> и <TEXTAREA>.

<INPUT type="text">

Основной вариант для ввода текстовой информации пользователем.

Поэтому сразу опишем его со всеми важными атрибутами: 

  <input type="text" name="tq" value="значение по умолчанию" size="25">

Атрибут value задает то, что уже будет введено в поле: не забывайте его задавать, если заботитесь о пользователях. Хотя не всегда можно предсказать стандартный ввод. Тогда атрибут отбрасывается и поле будет пустым.

<TEXTAREA>

Парный текст, формирующий область ввода многострочного текста. Может содержать абзацы.

В теге можно указать ширину в символах и число строк, а также вставить между тегами текст по умолчанию: 

  <TEXTAREA name="tar" cols=60 rows=3>Заготовленный
  текст</TEXTAREA>

Флажки (checkbox)

Эти элементы имеют два состояния: выбран (стоит галочка) и сброшен (галочки нет). Отсюда вытекает их большое значение для работы с согическими величинами.

Реализуется флажок тегом <INPUT>. 

  <input type="checkbox" name="chq1" title="Нажми на меня!"> Первый
  <input type="checkbox" name="chq2" checked=true> Второй
  <input type="checkbox" name="chq3"> Третий
Первый Второй Третий

В примере применено новое свойство — title. Это значит, что при наведении мышки на первый флажок появится соответствующая надпись.

Второй флажок выводится на экран уже помеченным.

Переключатели (radio buttons)

Английскоге название элемента происходит от способа переключения диапазонов на старых приемниках: кнопками.

Как видно из примера, включение атрибута checked=1 приводит к автоматическому выбору соответствующего пункта. Если атрибут не ставить никуда, ни один элемент не будет помечен. 

<form name='ss'>
  <input type="radio" name="rb" value="r1"> Первый<br>
  <input type="radio" name="rb" value="r2" checked=1> Второй<br>
  <input type="radio" name="rb" value="r3"> Третий
  <input type="radio" name="rb1" value="r4"> Четвертый<br>
  <input type="radio" name="rb1" value="r5"> Пятый
</form>

Здесь ДВА набора: rb и rb1, которые вставлены для удобства в таблицу (в дополнение к приведенному коду).

rb
Первый
Второй
Третий

rb1
Четвертый
Пятый

Возле списков вставлены кнопки, которые позволяют считать значение и состояние каждого перключателя. Ниже приведен код для вывода первой и второй кнопок: 

<input type="button" value="rb — первый" onclick="alert(ss.rb[0].value+' — '+ss.rb[0].checked);">
<input type="button" value="rb - второй " onclick="alert(ss.rb[1].value+' — '+ss.rb[1].checked);">

Списки (list box)

<select name="q">
  <option disabled>Выберите город</option>
  <option value="o1">Астрахань</option>
  <option value="o2" selected>Москва</option>
  <option value="o3">Якутск</option>
</select>

В предыдущих примерах можно было выбрать только один пункт. Это и нужно чаще всего, но иногда желателен выбор нескольких пунктов. Добавление ключевого слова multiple полностью развернет список и позволит осуществлять выбор со стандартным (для тех, кто не спал на уроках) использованием клавиш Ctrl и Shift. 

<select name="q" multiple>
  <option disabled>Выберите город</option>
  <option value="o1">Астрахань</option>
  <option value="o2" selected>Москва</option>
  <option value="o3">Якутск</option>
</select>

Следующий вариант может быть востребован, когда нужно помочь пользователю быстрее найти данные за счет их объединения в группы внутри списка. (А не для смешивания несовместимого, как полагает большинство авторов в Интернете.) 

<select name="ww">
 <optgroup label="Одежда">
    <option value="c1">Головные уборы</option>
    <option value="c2">Рубашки</option>
    <option value="c3">Плащи</option>
   </optgroup>
   <optgroup label="Обувь">
    <option value="s1">Домашняя</option>
    <option value="s2">Зимняя</option>
    <option value="s3">Спортивная</option>
   </optgroup>
</select>

 

a = , b = , действие (a?b):

формы

Первый
Второй
Copyright © 1993–2024 Мацкявичюс Д.А. Все права защищены.
Никакая часть сайта не может быть воспроизведена никаким способом без письменного разрешения правообладателя и явной ссылки на данный ресурс.