ОБЪЕКТНАЯ МОДЕЛЬ БРАУЗЕРА

урок 8 | зачет | задания | дополнения | урок 10

урок 9: формы (флажки, радиокнопки)

Рассмотрим еще две разновидности тега <INPUT>:

• type="checkbox" — флажок
• type="radio" — радиокнопка

Флажки, или как говорят, кнопки с независимой фиксацией — хорошо знакомый элемент компьютерного интерфейса:

 100%10 есть true
 !0     есть true
 ""     есть true
 1      есть true

<INPUT type="checkbox">

Дополнительные атрибуты:

• name — имя; используется в скриптах для доступа к экземпляру объекту, созданному браузером для тега INPUT.
• checked — логический атрибут; для него не указывается значения. Присутствие атрибута означает, что флажок установлен по умолчанию:
  
  

  <INPUT type=checkbox checked>
  <INPUT type=checkbox>

программное управление

Объект, построенный браузером для тега <INPUT type=checkbox>, имеет свойство checked. Это свойство принимает значение true, когда флажок установлен, и false — в противном случае.

<FORM>
  <INPUT name=flag type=checkbox>
  <INPUT type=button value=Проверить
         onclick="if(this.form.flag.checked)
                    alert('флажок установлен')
                  else
                    alert('флажок не установлен')">
  <INPUT type=button value=Изменить
         onclick="this.form.flag.checked=
                    !this.form.flag.checked">
</FORM>

Проделайте следующие опыты:

1. Нажмите кнопку Проверить. Появится сообщение “флажок не установлен”. Флажок и в самом деле не установлен, ведь он задан кодом, в котором отсутствует атрибут checked:

   <INPUT type=checkbox name=flag>

   Свойство checked объекта, построенного для тега этого <INPUT>, имеет значение false, как и выражение this.form.flag.checked, в команде if.
   
   

2. Нажмите кнопку Изменить. Сработает код:

   this.form.flag.checked = !this.form.flag.checked;

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

3. Нажмите кнопку Проверить. На экран выводится сообщение “флажок установлен”. Теперь выражение this.form.flag.checked имеет значение true.

Как видите, свойство checked можно не только читать, но и менять, устанавливая или сбрасывая флажок программным путем.

Обратите внимание на то, что свойство checked объекта имеет совсем другой смысл, чем одноименный атрибут тега <INPUT>. Атрибут указывает, что флажок установлен по умолчанию, а свойство хранит текущее состояние флажка, которое может меняться пользователем или программой.

Программы, которые “страдают склерозом”, могут легко проверить, был ли установлен атрибут checked в теге <INPUT>, если обратятся к свойству defaultchecked соответствующего объекта.

<FORM>
  <INPUT name=flag type=checkbox >
  <INPUT type=button value=checked
         onclick="alert(this.form.flag.checked);">
  <INPUT type=button value=defaultChecked
         onclick="alert(this.form.flag.defaultChecked);">
</FORM>

Проделайте следующие опыты:

1. Нажмите последовательно кнопки checked; и defaultChecked. Получим сообщения “true” и “true”. Это означает, что флажок установлен и отметка установлена по умолчанию.
2. Снимите отметку с флажка и снова нажмите кнопки checked и defaultChecked. Получим сообщения “false” и “true”. Это означает, что флажок не установлен, но он был установлен по умолчанию.
3. Уберите из тега <INPUT type=checkbox checked name=flag> атрибут checked и снова нажмите кнопки checked и defaultChecked. Получим сообщения “false” и “false”. Это означает, что флажок сейчас не установлен и не был установлен по умолчанию.
4. Отметьте флажок и нажмите кнопки checked и defaultChecked. Получим сообщения “true” и “false”. Это означает, что флажок установлен, но он не был установлен по умолчанию.

пример

 !0 && !""
 !0 || !""
  0 && !""
  0 || !""

В качестве значения атрибута name в тегах-флажках можно указывать одно и то же имя для флажков, входящих в одну группу. Доступ к отдельному флажку в группе выполняется так же, как к элементам массива при помощи индекса. Флажки в группе нумеруются в порядке их следования в HTML-коде, и нумерация начинается с нуля. Форму из предыдущего документа можно записать так:

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

 Корней Чуковский
 Уолтер Де ла Мэр
 Льюис Кэрролл
 Владимир Высоцкий
 Олег Какаулин

<INPUT type=radio>

Дополнительные атрибуты:

• name — значением является индентификатор. Кнопки, входящие в одну взаимосвязанную группу, должны иметь одинаковое имя. Именно по этому критерию (одинаковое имя) браузер распознает переключатель и организует снятие отметки с кнопки, когда выбрана другая в этой же самой группе. Имя используется в скриптах для доступа к экземпляру объекта, который создается браузером для тега INPUT. Доступ к отдельной кнопке в группе выполняется так же, как к элементам массива при помощи индекса. Кнопки в группе нумеруются в порядке их следования в HTML-тексте, и нумерация начинается с нуля.
• checked — логический атрибут; для него не указывается значения. Присутствие атрибута означает, что отметка на кнопке установлена по умолчанию:

  <INPUT name=r type=radio>
  <INPUT name=r type=radio checked>

программное управление

Объект, построенный браузером для тега <INPUT type=radio> имеет свойство checked. Это свойство принимает значение true, когда кнопка выбрана и false — в противном случае.

Значит, можно проверить, выбрана кнопка или нет, и использовать это в своей программе:

<FORM>
  <INPUT name=tst type=radio>
  <INPUT type=button value=Проверить
         onclick="if(this.form.tst[0].checked)
                    alert('отметка на 1-ой кнопке установлена')
                  else
                    alert('отметка на 1-ой кнопке не установлена');">
  <INPUT type=button value=Изменить
         onclick="var x=this.form.tst[0].checked;
                  this.form.tst[0].checked=this.form.tst[1].checked;
                  this.form.tst[1].checked=x;"><BR>
  <INPUT name=tst type=radio checked>
</FORM>

Проделайте следующие опыты:

1. Нажмите кнопку Проверить. Появится сообщение “Отметка на 1-ой кнопке не установлена”. Радиокнопка и в самом деле выключена, ведь она задана кодом <INPUT type=radio name=tst>, в котором отсутствует атрибут checked. Это означает, что свойство checked объекта, построенного для этой радиокнопки, имеет значение false, как и выражение this.form.tst[0].checked в команде if.
2. Нажмите кнопку Изменить. Выполнится код:

   onclick="var x = this.form.tst[0].checked;
            this.form.tst[0].checked=this.form.tst[1].checked;
            this.form.test[1].checked=x;"
   

   Этот код перебросит отметку со второй кнопки на первую.

3. Нажмите кнопку Проверить. Последует сообщение “Отметка на 1-ой кнопке установлена”. Это означает, что теперь выражение this.form.tst[0].checked имеет значение true.

Свойство checked объекта не совпадает с одноименным атрибутом тега <INPUT>. Атрибут checked устанавливает отметку на кнопке по умолчанию, а свойство checked отражает текущее состояние кнопки. Как и в случае с флажками, атрибуту checked соответствует свойство defaultChecked.

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

пример. умножитель

Дополнительный материал

Нажмите кнопку Сброс, затем приступайте к решению.

Дополнительный материал

1. Создайте HTML-страницу с работающей формой из первого задания зачетного класса.
2. Создайте HTML-страницу с работающей формой из второго задания зачетного класса.
3. Создайте HTML-приложение с такой формой:

   Страничка по заказу заголовок картинка собака одинокий цветок букет насос фон текст

   По нажатию на кнопку Показать приложение должно открыть новое окно и показать в нем заказанные картинки с короткими подписями. Новое окно должно создаваться “на лету” с использованием информации, которую ввел в форму пользователь.

   Можно использовать картинки из каталога ".\pic" книжки:

   dog.jpg (собака)
   bigdaisy.jpg (одинокий цветок)
   flower.jpg (букет)
   nasos.jpg (насос)

   Пример возможной страницы:
   
   

4. Зайдите в электронный магазин за "покупками". Измените приложение (скопировав его текст в новый файл):
   • измените название магазина;
   • измените число товаров, их название, описание и цены.
5. Добавьте в таблицу с описанием товаров электронного магазина из предыдущего задания колонку с их изображением.