2. Управляющие элементы
Мы задавали поведение обычным HTML-элементам страницы: абзацам,
заголовкам, картинкам и так далее. Но все эти элементы больше
предназначены для чтения информации. Для ввода данных существуют
управляющие элементы. Они позволяет пользователю подстраивать страницу
«под себя». Рассмотрим три управляющих элемента: кнопку, текстовое поле и
радиокнопку. Это обычные HTML-элементы, и все они создаются
тегом <input>.
Кнопка
Тегом <input> с обязательным атрибутом type="button" создаётся
кнопка. Атрибутом value задаётся надпись на ней. Пример:
<input type="button" value="Нажми меня" />
Как видите, при нажатии на такую кнопку ничего не происходит. Для того,
чтобы задать ей поведение, необходимо в открывающем теге записать событие
и обработчик.
Задание 1
Во временной странице Untitled-1.html добавьте кнопку с надписью «Пуск».
При щелчке на ней должно появляться окно сообщения с текстом «Это
кнопка».
Текстовое поле
Тегом <input type="text"> создаётся текстовое поле для ввода строки.
Атрибутом value задаётся начальный текст (при необходимости). Пример:
<input type="text" value="Введите имя"/>
Вв едите им
Текстовое поле может отслеживать событие onChange — изменение текста.
Оно возникает при изменении информации в текстовом поле с последующим
уходом из него курсора. Событие onChange удобно использовать для
проверки того, что ввёл в поле пользователь.
Задание 2
Создайте текстовое поле и напишите для него сценарий, по которому после
изменения текста и ухода курсора из него вызывавлось окно сообщения «Вы
изменили текст — уверены, что он правильный?».
Что должно получиться
Измените текст и щёлкните по другой строке
Радиокнопка
Радиокнопка имеет два состояния: «включена» или «выключена». Если
кнопки имеют одинаковые имена name, то они становятся
взаимоисключающими: если одна кнопка включена, то все остальные
выключены. Название «радиокнопка» произошло от автомобильных
радиоприёмников, имевших несколько выступащих кнопок. Для выбора
диапазона (ДВ, СВ, КВ, УКВ и т. д.) нужно было нажать одну из них, при этом
выбранная кнопка фиксировалась в утопленном положении, а все остальные
автоматически выключались.
1
Радиокнопка
создаётся
тегом
<input
type="radio">.
Атрибут checked="checked" позволяет включить радиокнопку по
умолчанию. Радиокнопки обычно объединяют в группу, задавая одинаковые
значения
атрибутов
name,
в
этом
случае
они
становятся
взаимоисключающими. Пример:
<input
type="radio"
name="radio"
checked="checked"/>
<input
type="radio"
name="radio"
/>
<input type="radio" name="radio" />
Для программирования реакции на включение радиокнопки в каждый из них
записывают событие onclick со своим обработчиком. Когда пользователь
щёлкает на радиокнопке, она вызывает свой обработчик.
Задание 3
Сделайте группу из трёх радиокнопок, которые реагировали бы на
переключение выдачей соответствующего сообщения.
Что должно получиться
Первая кнопка
Вторая кнопка
Третья кнопка
Событие
ondblclick
—
двойной
щелчок
мыши.
Пример:
<p ondblclick="window.alert('Двойное спасибо')"> Щёлкни
по мне! </p>
Задание 4
Поставьте на страницу обычную кнопку, реагирующую на двойной щелчок.
Таким образом, мы научились любому HTML-элементу задавать событие и
обработчик.
Мы
познакомились
с
четырмя
событиями: onclick, onmouseover, onChange, ondblclick.
Обработчиком
события
в
наших
примерах
был
один
метод window.alert(), вызывающий окно сообщения.
2
