Чтение онлайн

на главную - закладки

Жанры

JavaScript. Подробное руководство, 6-е издание
Шрифт:

В четвертой части книги нет описания элемента

Button
. Описание всех элементов-кнопок, включая описание элементов, создаваемых с помощью тега
<button>,
вы найдете в разделе, посвященном элементу
Input
.

15.9.5. Переключатели и флажки

Флажки и радиокнопки имеют два визуально различимых состояния: они могут быть либо установлены, либо сброшены. Пользователь может изменить состояние такого элемента, щелкнув на нем. Радиокнопки обычно объединяются в группы связанных элементов, имеющих одинаковые значения HTML-атрибута

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

И флажки, и переключатели имеют свойство

checked
. Это доступное для чтения и записи логическое значение определяет, отмечен ли элемент в данный момент. Свойство
defaultChecked
представляет собой доступное только для чтения логическое значение, содержащее значение HTML-атрибута
checked
: оно определяет, должен ли элемент отмечаться, когда страница загружается в первый раз.

Флажки и радиокнопки сами не отображают какой-либо текст и обычно выводятся вместе с прилегающим к ним HTML-текстом (или со связанным тегом

<label>
). Это значит, что установка свойства
value
элемента флажка или радиокнопки не изменяет внешнего вида элемента. Свойство
value
можно установить, но это изменит лишь строку, отсылаемую на веб-сервер при передаче данных формы.

Когда пользователь щелкает на флажке или радиокнопке, элемент вызывает свой обработчик

onclick
. Если состояние флажка или радиокнопки изменяется в результате щелчка мышью, они также вызывают обработчик событий
onchange
. (При этом радиокнопки, изменяющие состояние в результате щелчка на другой радиокнопке, не вызывают обработчик
onchange
.)

15.9.6. Текстовые поля ввода

Однострочные текстовые поля ввода

Text
применяются в HTML-формах и JavaScript-программах, пожалуй, чаще других. Они позволяют пользователю ввести короткий однострочный текст. Свойство
value
представляет текст, введенный пользователем. Установив это свойство, можно явно задать выводимый текст.

Определяемый стандартом HTML5 атрибут

placeholder
позволяет указать строку приглашения к вводу, которая будет отображаться в поле ввода до того момента, пока пользователь не введет какой-нибудь текст:

Дата прибытия: <input type="text" name="arrival" placeholder="yyyy-mm-dd">

Обработчик событий

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

Элемент

Textarea
(многострочное текстовое поле ввода) очень похож на элемент
Text
за исключением того, что разрешает пользователю ввести (a JavaScript-npoграмме вывести) многострочный текст. Многострочное текстовое поле создается тегом
<textarea>,
синтаксис которого существенно отличается от синтаксиса тега
<input>,
используемого для создания однострочного текстового поля. (Подробнее об этом см. в разделе с описанием элемента
Textarea
в четвертой части книги.) Тем не менее эти два типа элементов ведут себя очень похожим образом. Свойство
value
и обработчик событий
onchange
элемента
Textarea
можно использовать точно так же, как в случае с элементом
Text
.

Элемент

<input type="password">
– это модификация однострочного текстового поля ввода, в котором вместо вводимого пользователем текста отображаются символы звездочек. Как можно заключить из имени элемента, его можно использовать, чтобы дать пользователю возможность вводить пароли, не беспокоясь о том, что другие прочитают их через плечо. Следует понимать, что элемент
Password
защищает введенные пользователем данные от любопытных глаз, но при отправке данных формы эти данные никак не шифруются (если только отправка не выполняется по безопасному HTTPS-соединению) и при передаче по сети могут быть перехвачены.

Наконец, элемент

<input type="file">
предназначен для ввода пользователем имени файла, который должен быть выгружен на веб-сервер. По существу, это однострочное текстовое поле, совмещенное со встроенной кнопкой, выводящей диалог выбора файла. У элемента выбора файла, как и у однострочного текстового поля, есть обработчик событий
onchange
. Однако, в отличие от текстового поля ввода, свойство
value
элемента выбора файла доступно только для чтения. Это не дает злонамеренным JavaScript-программам обмануть пользователя, выгрузив файл, не предназначенный для отправки на сервер.

Различные текстовые элементы ввода определяют обработчики событий on

keypress, onkeydown
и
onkeyup
. Можно вернуть
false
из обработчиков событий
onkeypress
или
onkeydown
, чтобы запретить обработку нажатой пользователем клавиши. Это может быть полезно, например, когда требуется заставить пользователя вводить только цифры. Этот прием демонстрируется в примере 17.6.

15.9.7. Элементы Select и Option

Элемент

Select
представляет собой набор вариантов (представленных элементами
Option
), которые могут быть выбраны пользователем. Броузеры обычно отображают элементы
Select
в виде раскрывающихся меню, но, если указать в атрибуте
size
значение больше чем 1, они будут отображать их в виде списков (возможно, с полосами прокрутки). Элемент
Select
может работать двумя сильно различающимися способами, а выбор того или иного способа определяется значением свойства
type
.

Если в теге

<select>
определен атрибут
multiple
, пользователь сможет выбрать несколько вариантов, а свойство
type
объекта
Select
будет иметь значение «select-multiple». В противном случае, если атрибут
multiple
отсутствует, может быть выбран только один вариант и свойство
type
будет иметь значение «select-one».

Поделиться:
Популярные книги

На границе империй. Том 10. Часть 7

INDIGO
Вселенная EVE Online
Фантастика:
боевая фантастика
космическая фантастика
попаданцы
5.00
рейтинг книги
На границе империй. Том 10. Часть 7

Фантом памяти

Маринина Александра
2. Преступления правильной жизни
Детективы:
прочие детективы
8.43
рейтинг книги
Фантом памяти

Я снова не князь! Книга XVII

Дрейк Сириус
17. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я снова не князь! Книга XVII

Товарищ "Чума" 7

lanpirot
7. Товарищ "Чума"
Фантастика:
городское фэнтези
попаданцы
альтернативная история
5.00
рейтинг книги
Товарищ Чума 7

Целого Мира Мало

Джиллиан Алекс
Любовные романы:
современные любовные романы
8.88
рейтинг книги
Целого Мира Мало

Хозяин Стужи 4

Петров Максим Николаевич
4. Злой Лед
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Хозяин Стужи 4

#Бояръ-Аниме. Газлайтер. Том 13

Володин Григорий Григорьевич
13. История Телепата
Фантастика:
боевая фантастика
аниме
попаданцы
фэнтези
5.00
рейтинг книги
#Бояръ-Аниме. Газлайтер. Том 13

Дважды одаренный

Тарс Элиан
1. Дважды одаренный
Фантастика:
альтернативная история
аниме
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Дважды одаренный

Здравствуй, 1985-й

Иванов Дмитрий
2. Девяностые
Фантастика:
альтернативная история
5.25
рейтинг книги
Здравствуй, 1985-й

Изгой Проклятого Клана. Том 3

Пламенев Владимир
3. Изгой
Фантастика:
аниме
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
Изгой Проклятого Клана. Том 3

Эволюционер из трущоб. Том 10

Панарин Антон
10. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Эволюционер из трущоб. Том 10

Неучтенный элемент. Том 3

NikL
3. Антимаг. Вне системы
Фантастика:
фэнтези
5.00
рейтинг книги
Неучтенный элемент. Том 3

Двойник короля 17

Скабер Артемий
17. Двойник Короля
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Двойник короля 17

Я все еще не князь. Книга XV

Дрейк Сириус
15. Дорогой барон!
Фантастика:
юмористическое фэнтези
попаданцы
аниме
5.00
рейтинг книги
Я все еще не князь. Книга XV