change, input, cut, copy, paste
На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.
Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.
Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдёт событие onchange.
<input type="text" onchange="alert(this.value)">
<input type="button" value="Кнопка">Для остальных же элементов: select, input type=checkbox/radio оно срабатывает сразу при выборе значения.
В IE8- checkbox/radio при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
Для того, чтобы видеть изменения checkbox/radio тут же – в IE8- нужно повесить обработчик на событие click (оно произойдёт и при изменении значения с клавиатуры) или воспользоваться событием propertychange, описанным далее.
Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.
В IE9 оно поддерживается частично, а именно – не возникает при удалении символов (как и onpropertychange).
Пример использования (не работает в IE8-):
<input type="text"> oninput: <span></span>
<script>
var input = document.body.children[0];
input.oninput = function() {
document.getElementById('result').innerHTML = input.value;
};
</script>В современных браузерах oninput – самое главное событие для р
HTML События
События HTML — это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких, как JavaScript и вызываемых, когда на странице происходит какое-либо действие. События позволяют сделать вашу страницу динамической.
Атрибуты событий окна
События, вызываемые на объект окна (применяются с тегом <body>):
| Атрибут | Значение | Описание |
|---|---|---|
| onafterprint | script | Скрипт срабатывает после того, как документ будет напечатан |
| onbeforeprint | script | Скрипт выполняется перед распечаткой документа |
| onbeforeunload | script | Скрипт срабатывает до загрузки документа |
| onerror | script | Скрипт срабатывает, при возникновении ошибки |
| onhashchange | script | Скрипт срабатывает при изменении в названии #якоря из текущего URL-адреса |
| onload | script | Скрипт запустится после завершения полной загрузки страницы |
| onmessage | script | Скрипт выполняется при срабатывании сообщения |
| onoffline | script | Скрипт срабатывает, когда браузер начинает работать в автономном режиме |
| ononline | script | Скрипт срабатывает, когда браузер начинает работать онлайн |
| onpagehide | script | Скрипт срабатывает, когда пользователь покидает страницу |
| onpageshow | script | Скрипт срабатывает, когда пользователь переходит на страницу |
| onpopstate | script | Скрипт срабатывает при изменении окна истории |
| onresize | script | Скрипт срабатывает, когда окно браузера изменяется |
| onstorage | script | Скрипт срабатывает, когда веб-хранилище данных обновляется |
| onunload | script | Скрипт срабатывает при выходе пользователя из документа |
События формы
События срабатывают на действия внутри HTML формы (могут применяться почти ко всем элементам HTML, но чаще всего применяются к элементам формы):
| Атрибут | Значение | Описание |
|---|---|---|
| onblur | script | Скрипт срабатывает, когда элемент теряет фокус |
| onchange | script | Скрипт срабатывает при изменении значений элемента |
| oncontextmenu | script | Скрипт срабатывает при вызове контекстного меню |
| onfocus | script | Скрипт срабатывает, когда элемент получает фокус |
| oninput | script | Скрипт срабатывает, когда элемент получает ввод данных от пользователя |
| oninvalid | script | Скрипт срабатывает, когда элемент станет недействителен |
| onreset | script | Скрипт срабатывает при сбросе формы |
| onsearch | script | Скрипт срабатывает, когда пользователь пишет что-то в поле поиска (для <input=»search»>) |
| onselect | script | Скрипт срабатывает при выделении текста в элементе |
| onsubmit | script | Скрипт срабатывает при отправке формы |
События клавиатуры
События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):
| Атрибут | Значение | Описание |
|---|---|---|
| onkeydown | script | Скрипт срабатывает, когда пользователь нажимает на клавишу |
| onkeypress | script | Скрипт срабатывает после того, как пользователь нажал на клавишу |
| onkeyup | script | Скрипт срабатывает после того, как нажатая клавиша была отпущена |
События мыши
События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML):
| Атрибут | Значение | Описание |
|---|---|---|
| onclick | script | Скрипт срабатывает при клике левой кнопки мыши на элементе |
| ondblclick | script | Скрипт срабатывает после двойного клика мыши на элементе |
| ondrag | script | Скрипт срабатывает при перетаскивании элемента |
| ondragend | script | Скрипт срабатывает после операции перетаскивания |
| ondragenter | script | Скрипт срабатывает, когда элемент будет перенесен на заданную зону (цель для переноса) |
| ondragleave | script | Скрипт срабатывает, когда элемент выходит из допустимой зоны для переноса |
| ondragover | script | Скрипт срабатывает, когда элемент перемещают над допустимой зоной для переноса |
| ondragstart | script | Скрипт срабатывает, когда пользователь начинает перетаскивать элемент |
| ondrop | script | Скрипт срабатывает после того, как перетаскиваемый элемент опустился на объект перетаскивания |
| onmousedown | script | Скрипт срабатывает при нажатии кнопки мыши на элементе |
| onmousemove | script | Скрипт срабатывает, пока указатель мыши перемещается над элементом |
| onmouseout | script | Скрипт срабатывает, когда указатель мыши перемещается за пределы элемента |
| onmouseover | script | Скрипт срабатывает, когда указатель мыши начал перемещаться над элементом |
| onmouseup | script | Скрипт срабатывает при отпускании кнопки мыши с элемента |
| onmousewheel | script | Устарел в HTML5. Используйте атрибут onwheel |
| onscroll | script | Скрипт срабатывает во время прокручивания полосы прокрутки элемента |
| onwheel | script | Скрипт срабатывает при использовании колеса мыши на элементе |
События буфера обмена
| Атрибут | Значение | Описание |
|---|---|---|
| oncopy | script | Скрипт срабатывает, когда пользователь копирует содержимое элемента |
| oncut | script | Скрипт срабатывает, когда пользователь вырезает содержимое элемента |
| onpaste | script | Скрипт срабатывает, когда пользователь вставляет содержимое в элемент |
События медиа-файлов
События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object>, and <video>):
| Атрибут | Значение | Описание |
|---|---|---|
| onabort | script | Скрипт срабатывает при прерывании |
| oncanplay | script | Скрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать) |
| oncanplaythrough | script | Скрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации |
| oncuechange | script | Скрипт, который будет запускаться, когда изменения метки в элементе <track> |
| ondurationchange | script | Скрипт срабатывает при изменении длины продолжительности медиа файла |
| onemptied | script | ScСкрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом) |
| onended | script | Скрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр) |
| onerror | script | Скрипт срабатывает, если возникнет ошибка при загрузке файла |
| onloadeddata | script | Скрипт срабатывает при загрузке данных медиа файла |
| onloadedmetadata | script | Скрипт срабатывает, когда загружены мета-данные (например размер и продолжительность) |
| onloadstart | script | Скрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле |
| onpause | script | Скрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно |
| onplay | script | Script to be run when the media is ready to start playing |
| onplaying | script | Скрипт срабатывает, когда файл готов начать воспроизводиться |
| onprogress | script | Скрипт срабатывает, когда браузер находится в процессе получения данных медиа файла |
| onratechange | script | Скрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки) |
| onseeked | script | Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение «false», т.е.текущая позиция воспроизведения найдена |
| onseeking | script | Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение «true», т.е. текущая позиция воспроизведения перемещается |
| onstalled | script | Скрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине |
| onsuspend | script | Скрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине |
| ontimeupdate | script | Скрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения) |
| onvolumechange | script | Скрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука) |
| onwaiting | script | Скрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных) |
Прочие события
| Атрибут | Значение | Описание |
|---|---|---|
| onerror | script | Скрипт срабатывает, когда происходит ошибка во время загрузки внешнего файла |
| onshow | script | Скрипт срабатывает, когда элемент <menu> отображается как контекстное меню |
| ontoggle | script | Скрипт срабатывает, когда пользователь открывает или закрывает элемент <details> |
Атрибут событий oninput | HTML справочник
Атрибуты событийЗначение и применение
Атрибут событий oninput позволяет задать срабатывание скрипта, когда элемент получает ввод данных от пользователя.
Это событие аналогично событию onchange. Разница заключается в том, что событие oninput происходит сразу после того как значение элемента изменилось, а событие onchange происходит, когда элемент теряет фокус. Другим отличием является то, что событие onchange имеет более широкую поддержку браузерами и работает с такими элементами как <keygen>, <select> и более расширено с элементом <input>.
Поддержка браузерами
Синтаксис
<element oninput = "script" >
Пример использования
Пример вывода текста, набранного в элементе <input> на «лету», используя атрибут событий oninput. Обратите внимание, что если бы мы использовали атрибут событий onchange, то текст отобразился бы только при смене фокуса целиком.
<!DOCTYPE html>
<html>
<head>
<title>Событие oninput</title>
</head>
<body>
<p>Набирите произвольный текст:</p>
<input type = "text" name = "testInput" id = "testInput" oninput = "testFunction()">
<p id = "info" ></p>
<script>
function testFunction() {
var x = document.getElementById("testInput").value;
document.getElementById("info").innerHTML = "Вы набираете следующий текст: " + x;
}
</script>
</body>
</html>
Набирите произвольный текст:
Отличия HTML 4.01 от HTML 5
Атрибут событий oninput является новым в HTML5.
Поддерживаемые теги
<input> (type = «password | search | text») и <textarea>.
Атрибуты событий| Атрибут | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|
| onabort | Скрипт срабатывает при прерывании. | Да | Да | Да | Да | 9.0 | Да |
| oncanplay | Скрипт срабатывает, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован, чтобы начать). | Да | Да | Да | Да | 9.0 | Да |
| oncanplaythrough | Скрипт срабатывает, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации. | Да | Да | Да | Да | 9.0 | Да |
| ondurationchange | Скрипт срабатывает при изменении длины продолжительности медиа файла. | Да | Да | Да | Да | 9.0 | Да |
| onemptied | Скрипт срабатывает, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом). | Да | Да | Да | Да | 9.0 | Да |
| onended | Скрипт срабатывает, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр). | Да | Да | Да | Да | 9.0 | Да |
| onerror | Скрипт срабатывает, если возникнет ошибка при загрузке файла. | Да | Да | Да | Да | 9.0 | Да |
| onloadeddata | Скрипт срабатывает при загрузке данных медиа файла. | Да | Да | Да | Да | 9.0 | Да |
| onloadedmetadata | Скрипт срабатывает, когда загружены мета-данные (например размер и продолжительность). | Да | Да | Да | Да | 9.0 | Да |
| onloadstart | Скрипт срабатывает при загрузке файла прежде, чем начнет загружаться на самом деле. | Да | Да | Да | Да | 9.0 | Да |
| onpause | Скрипт срабатывает, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно. | Да | Да | Да | Да | 9.0 | Да |
| onplay | Скрипт срабатывает, когда файл готов начать воспроизводиться. | Да | Да | Да | Да | 9.0 | Да |
| onplaying | Скрипт срабатывает при воспроизведении файла. | Да | Да | Да | Да | 9.0 | Да |
| onprogress | Скрипт срабатывает, когда браузер находится в процессе получения данных медиа файла. | Да | Да | Да | Да | 9.0 | Да |
| onratechange | Скрипт срабатывает, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки). | Да | Да | Да | Да | 9.0 | Да |
| onseeked | Скрипт срабатывает, когда атрибут object.seeking у тегов <audio> или <video> имеет значение «false» (пользователь не переходит на новые позиции воспроизведения — окончание «перемотки»). | Да | Да | Да | Да | 9.0 | Да |
| onseeking | Скрипт срабатывает, когда атрибут object.seeking у тегов <audio> или <video> имеет значение «true» (пользователь переходит к новой позиции воспроизведения — «перемотка»). | Да | Да | Да | Да | 9.0 | Да |
| onstalled | Скрипт срабатывает, когда браузер не может получить данные медиа файла по любой причине. | Да | Да | Да | Да | 9.0 | Да |
| onsuspend | Скрипт срабатывает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине. | Да | Да | Да | Да | 9.0 | Да |
| ontimeupdate | Скрипт срабатывает, когда позиция воспроизведения изменилась (например, когда пользователь выбрал другую точку воспроизведения). | Да | Да | Да | Да | 9.0 | Да |
| onvolumechange | Скрипт срабатывает каждый раз при изменении значения громкости звука (включая полное отключение звука). | Да | Да | Да | Да | 9.0 | Да |
| onwaiting | Скрипт срабатывает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных). | Да | Да | Да | Да | 9.0 | Да |
HTML атрибуты событий
События HTML 5 — это специальные глобальные атрибуты, используемые в тегах для вызова обработчиков событий, написанных на различных языках сценариев таких, как JavaScript и вызываемых, когда на странице происходит какое-либо действие. События позволяют сделать вашу страницу динамической.
Атрибуты событий окна
События, вызываемые на объект окна (применяются с тегом <body>):
| Атрибут | Описание |
|---|---|
| onafterprint | Скрипт запустится после того, как документ будет распечатан. |
| onbeforeprint | Скрипт запустится прежде, чем документ будет распечатан. |
| onbeforeonload | Скрипт запустится до загрузки документа. |
| onblur | Скрипт запустится, когда окно потеряет фокус. |
| onerror | Скрипт запустится, если произойдет ошибка. |
| onfocus | Скрипт запустится, когда окно получит фокус. |
| onhaschange | Скрипт запустится, после изменения документа. |
| onload | Код события будет выполнен после полной загрузки страницы, т.е. когда всё содержимое веб-страницы полностью загружено, включая изображения, внешние таблицы стилей и внешние скрипты. |
| onmessage | Скрипт запустится при срабатывании сообщения. |
| onoffline | Скрипт запустится, когда документ перейдет в автономный режим. |
| ononline | Скрипт запустится, когда документ войдет в сеть. |
| onpagehide | Скрипт запустится, когда окно будет скрыто. |
| onpageshow | Скрипт запустится, когда окно станет видимым. |
| onpopstate | Скрипт запустится при изменении окна истории. |
| onredo | Скрипт запустится, когда документ начнет выполнять повтор. |
| onresize | Скрипт запустится при изменении размеров окна. |
| onstorage | Скрипт запустится при загрузке документа. |
| onundo | Скрипт запустится при выполнении команды отменить в документе. |
| onunload | Скрипт запустится при выходе пользователя из документа. |
События формы
События срабатывают на действия внутри HTML формы (могут применяться ко всем элементам HTML, но чаще всего применяются к элементам формы):
| Атрибут | Описание |
|---|---|
| onblur | Скрипт запустится, когда элемент потеряет фокус. |
| onchange | Скрипт запустится при изменении элемента. |
| oncontextmenu | Скрипт запустится при вызове контекстного меню. |
| onfocus | Скрипт запустится, когда элемент получит фокус. |
| onformchange | Скрипт запустится при изменении формы. |
| onforminput | Скрипт запустится, когда пользователь будет вводить данные в форму. |
| oninput | Скрипт запустится, когда элемент станет получать пользовательский ввод. |
| oninvalid | Скрипт запустится, когда элемент станет недействителен. |
| onselect | Скрипт запустится при выборе элемента. |
| onsubmit | Скрипт запустится при отправке формы. |
События клавиатуры
События, вызываемые клавиатурой (могут применяться ко всем элементам HTML):
| Атрибут | Описание |
|---|---|
| onkeydown | Скрипт запустится, когда будет нажата клавиша. |
| onkeypress | Скрипт запустится после того, как клавиша была нажата и отпущена. |
| onkeyup | Скрипт запустится при отпускании клавиши. |
События мыши
События, вызываемые действиями мышкой или аналогичными действиями пользователя (могут применяться ко всем элементам HTML):
| Атрибут | Описание |
|---|---|
| onclick | Код события будет выполнен по клику левой кнопкой мыши на элементе. |
| ondblclick | Скрипт запустится после двойного клика мыши. |
| ondrag | Скрипт запустится при перетаскивании элемента. |
| ondragend | Скрипт запустится после операции перетаскивания. |
| ondragenter | Скрипт запустится, когда элемент будет перенесен на допустимую зону падения. |
| ondragleave | Скрипт запустится, когда элемент отпустят в действующий зоне падения. |
| ondragover | Скрипт запустится, если элемент тащат за допустимую зону падения. |
| ondragstart | Скрипт запустится в начале операции перетаскивания элемента. |
| ondrop | Скрипт запустится после перетаскивания элемента при падении. |
| onmousedown | Скрипт запустится при нажатии кнопки мыши. |
| onmousemove | Скрипт запустится, когда указатель мыши начнет перемещаться. |
| onmouseout | Скрипт запустится, когда указатель мыши будет перемещаться из элемента. |
| onmouseover | Скрипт запустится, когда указатель мыши будет перемещаться над элементом. |
| onmouseup | Скрипт запустится при отпускании кнопки мыши. |
| onmousewheel | Скрипт запустится при нажатии на колесо мыши. |
| onscroll | Скрипт запустится во время прокручивания полосы прокрутки элемента. |
События медиа-файлов
События, вызываемые для медиа файлов, таких как видео, изображения и аудио (могут применяться ко всем элементам HTML, но чаще всего применяются к таким элементам, как <audio>, <embed>, <img>, <object> и <video>):
| Атрибут | Описание |
|---|---|
| onabort | Скрипт запустится при прерывании. |
| oncanplay | Скрипт запустится, когда файл будет готов, чтобы начать проигрывание (когда будет достаточно буферизирован). |
| oncanplaythrough | Скрипт запустится, когда файл может быть воспроизведен полностью (от начала до конца), не останавливаясь для буферизации. |
| ondurationchange | Скрипт запустится при изменении длины продолжительности медиа файла. |
| onemptied | Скрипт запустится, когда произошла какая-то неполадка и файл стал недоступен (например при разрыве связи с интернетом). |
| onended | Скрипт запустится, когда аудио/видео файл дойдет до конца (например для вывода сообщения: спасибо за прослушивание/просмотр). |
| onerror | Скрипт запустится, если возникнет ошибка при загрузке файла. |
| onloadeddata | Скрипт запустится при загрузке данных медиа файла. |
| onloadedmetadata | Скрипт запустится, когда загружены мета-данные (например размер и продолжительность). |
| onloadstart | Скрипт запустится при загрузке файла прежде, чем начнет загружаться на самом деле. |
| onpause | Скрипт запустится, если воспроизведение файла приостановлено (нажали паузу) пользователем или программно. |
| onplay | Скрипт запустится, когда файл готов начать воспроизводиться. |
| onplaying | Скрипт запустится при воспроизведении файла. |
| onprogress | Скрипт запускается, когда браузер находится в процессе получения данных медиа файла. |
| onratechange | Скрипт запускается, каждый раз, при изменении режима воспроизведения (например, когда пользователь переключается на медленное воспроизведение или режим быстрой перемотки). |
| onreadystatechange | Скрипт запускается, каждый раз, при изменении состояния готовности (состояние готовности отслеживает состояние данных файла). |
| onseeked | Скрипт запускается, когда атрибут seeked у тегов audio или video имеет значение «false», т.е.текущая позиция воспроизведения найдена. |
| onseeking | Скрипт запускается, когда атрибут seeking у тегов audio или video имеет значение «true», т.е. текущая позиция воспроизведения перемещается. |
| onstalled | Скрипт запускается, когда браузер не может получить данные медиа файла по любой причине. |
| onsuspend | Скрипт запускается, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине. |
| ontimeupdate | Скрипт запускается, когда позиция воспроизведения изменилась (например, когда пользователь выбрал точку воспроизведения на много дальше от текущей). |
| onvolumechange | Скрипт запускается каждый раз при изменении значения громкости звука (включая полное отключение звука). |
| onwaiting | Скрипт запускается, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных). |
Тег // Вебшкола онлайн
Пример
<html>
<body>
<form action=»»>
Имя:
<input type=»text» name=»firstname»>
<br>
Фамилия:
<input type=»text» name=»lastname»>
</form>
</body>
</html>
Описание и использование
Тег <input> используется для ввода информации пользователем.
Поле ввода может варьироваться в зависимости от атрибута type. Оно может быть текстовым полем, полем для ввода пароля, кнопкой, выпадающим меню выбора и т.д.Браузерная поддержка
Тег <input> поддерживается всеми основными браузерами.
Отличия между HTML и XHTML
В HTML тег <input> не имеет закрывающего тега.
В XHTML тег <input> обязательно должен быть закрыт, что достигается так: <input/>.
Совет
Используйте тег <label> для задания метки полю ввода.
Альтернативные атрибуты
DTD показывает в какой версии DTD использование атрибута разрешено. S=Strict, T=Transitional и F=Frameset.
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| accept | MIME-тип | Указывает тип файла, который может быть загружен пользователем на сервер (только для type=»file») | STF |
| align | left right top middle bottom |
Устарело. Используйте CSS. Определяет выравнивание кнопки-изображения (только для type=»image») |
TF |
| alt | текст | Указывает альтернативный текст для кнопки-изображения (только для type=»image») | STF |
| checked | checked | Определяет выбор по умолчанию для кнопки (только для type=»checkbox» или type=»radio») | STF |
| disabled | disabled | Указывает на то, что поле ввода должно быть неактивно при загрузке страницы | STF |
| maxlength | число | Указывает максимальное количество символов поля ввода (только для type=»text» или type=»password») | STF |
| name | имя | Указывает название элемента | STF |
| readonly | readonly | Указывает на то, что поле не может изменяться пользователем (только для type=»text» или type=»password») | STF |
| size | число | Определяет ширину текстового поля | TF |
| src | URL | Определяет адрес изображения, используемого в качестве кнопки подтверждения | TF |
| type | button checkbox file hidden image password radio reset submit text |
Указывает тип поля ввода | TF |
| value | текст | Указывает значение элемента формы | TF |
Стандартные атрибуты
Тег <input> поддерживает следующие стандартные атрибуты:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| accesskey | символ (клавиша) | Определяет клавишу (сочетание клавиш) для быстрого доступа к элементу | STF |
| class | название класса | Указывает название класса для элемента | STF |
| dir | rtl ltr |
Указывает направление вывода текста для элемента | STF |
| id | id | Указывает id для элемента | STF |
| lang | код_языка | Указывает код языка содержимого элемента | STF |
| style | описание_элемента | Указывает строчный стиль элемента | STF |
| tabindex | порядковый номер | Указывает порядковый номер элемента при переключении с помощью клавиши Tab | STF |
| title | текст | Указывает дополнительную информацию об элементе | STF |
| xml:lang | код_языка | Указывает код языка содержимого элемента в XHTML документах | STF |
Дополнительная информация о стандартных атрибутах.
События
Тег <input> поддерживает следующие атрибуты событий:
| Атрибут | Значение | Описание | DTD |
|---|---|---|---|
| onblur | скрипт | Скрипт, который должен быть выполнен, когда элемент теряет фокус (т.е. курсор мыши уходит с элемента) | STF |
| onchange | скрипт | Скрипт, который должен быть выполнен при изменении элемента | STF |
| onclick | скрипт | Скрипт, который должен быть выполнен при одинарном щелчке мышью | STF |
| ondblclick | скрипт | Скрипт, который должен быть выполнен при двойном щелчке мышью | STF |
| onfocus | скрипт | Скрипт, который должен быть выполнен, когда элемент попадает в фокус (т.е. курсор мыши попадает на элемент) | STF |
| onmousedown | скрипт | Скрипт, который должен быть выполнен, если пользователь зажал кнопку мыши | STF |
| onmousemove | скрипт | Скрипт, который должен быть выполнен при движении курсора мыши | STF |
| onmouseout | скрипт | Скрипт, который должен быть выполнен, если пользователь передвинул курсор мыши за пределы элемента | STF |
| onmouseover | скрипт | Скрипт, который должен быть выполнен, когда пользователь двигает курсор мыши над элементом | STF |
| onmouseup | скрипт | Скрипт, который должен быть выполнен, когда пользователь отпускает кнопку мыши | STF |
| onkeydown | скрипт | Скрипт, который должен быть выполнен при нажатии клавиши пользователем | STF |
| onkeypress | скрипт | Скрипт, который должен быть выполнен при нажатии и отпускании клавиши пользователем | STF |
| onkeyup | скрипт | Скрипт, который должен быть выполнен при отпускании клавиши пользователем | STF |
| onselect | скрипт | Скрипт, который должен быть выполнен если элемент выбран | STF |
Дополнительная информация о cобытиях HTML.
Примеры
Создание поля для пароля
Пример иллюстрирует вставку ссылки.
Создание кнопки
Пример иллюстрирует использование изображения в качестве ссылки.
Форма с флажками (checkbox)
Открывание ссылки в новом окне браузера.
Форма с переключателями (radiobutton)
Вставка ссылки на определенное место (закладку) в открытом документе.
Событие onchange | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Событие возникает при изменении значения элемента формы, вроде текстового поля или списка. Например, событие onchange добавленное к тегу <textarea> срабатывает каждый раз, когда введен новый текст и поле потеряло фокус.
Синтаксис
onchange="скрипт"Значения
Код скрипта
Значение по умолчанию
Нет.
Применяется к тегам
<input>, <select>, <textarea>
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Событие onchange</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Быстрый переход по сайту</legend>
<select onchange="document.location=this.options[this.selectedIndex].value">
<option value="#">Выберите раздел сайта</option>
<option value="depart.html">Отделения</option>
<option value="techinfo.html">Техническая информация</option>
<option value="study.html">Обучение</option>
</select>
</fieldset>
</form>
</body>
</html>В данном примере при выборе пункта списка происходит переход на страницу, заданную значением атрибута value тега <option>.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.