Атрибут novalidate (Не Проверять)
Атрибут novalidate указывает, что форма или поле ввода не должны проверяться при отправке формы.
Если этот атрибут присутствует, форма не будет проверять введенные данные.
Замечание: Атрибут novalidate работает с: <form> и типами ввода <input>: text, search, url, telephone, email, password, средства выбора даты/времени (date, time , ...), range и color.
Пример
|
Атрибут pattern (Шаблон, Образец)
Атрибут pattern определяет шаблон, используемый для проверки поля ввода.
В качестве шаблона используется регулярное выражение. Вы можете прочитать о регулярных выражениях в наших уроках JavaScript.
Замечание: Атрибут pattern работает со следующими типами <input>: text, search, url, telephone, email и password
Пример ниже показывает текстовое поле, которое может содержать только три латинских буквы (никаких чисел или специальных символов):
Пример
|
Атрибут placeholder (Заполнитель)
Атрибут placeholder показывает подсказку об ожидаемом значении поля ввода.
Замечание: Атрибут placeholder работает с типами ввода <input>: text, search, url, telephone, email и password
Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:
Пример
|
Атрибут required (Обязательное Поле)
Атрибут required указывает, что поле должно быть заполнено в обязательном порядке перед отправкой формы.
Замечание: Атрибут required работает с типами <input>: text, search, url, telephone, email, password, date, time (и другие типы выбора даты/времени), number, checkbox, radio и file.
Пример
|
HTML5
HTML5 улучшает функциональную совместимость и уменьшает стоимость разработки, утверждая точные правила о том, как трактовать все HTML элементы и как обрабатывать ошибки.
В качестве новых особенностей HTML5 можно упомянуть функции для внедрения аудио, видео, графики, веб хранилища на стороне клиента и интерактивные документы. HTML5 также содержит новые элементы, например <nav>, <header>, <footer>, и <figure>.
Группа по разработке HTML5 включает Microsoft, IBM, Apple, Google, AOL, Mozilla, Nokia, Opera и не одну сотню других производителей.
Замечание: HTML5 пока не является рекомендацией W3C!
Упорядочено по Алфавиту
Новый : Новые теги в HTML5.
| Тег | Описание |
| <!--...--> | Определяет комментарий |
| <!DOCTYPE> | Определяет тип документа |
| <a> | Определяет гиперссылку |
| <abbr> | Определяет аббревиатуру |
| <acronym> | Не поддерживается в HTML5 |
| <address> | Определяет элемент "адрес" |
| <applet> | Не поддерживается в HTML5 |
| <area> | Определяет участок на карте изображения |
| <article>Новый | Определяет статью |
| <aside>Новый | Определяет контент - отступление от основного содержания страницы |
| <audio>Новый | Определяет звуковой контент |
| <b> | Определяет жирный текст |
| <base> | Определяет базовый адрес URL для всех ссылок на странице |
| <basefont> | Не поддерживается в HTML5 |
| <bdo> | Определяет направление отображения текста |
| <big> | Не поддерживается в HTML5 |
| <blockquote> | Определяет длинную цитату |
| <body> | Определяет элемент body (тело страницы) |
| <br> | Вставка переноса строки |
| <button> | Определяет кнопку |
| <canvas>Новый | Определяет графику |
| <caption> | Определяет заголовок таблицы |
| <center> | Не поддерживается в HTML5 |
| <cite> | Определяет цитирование |
| <code> | Определяет текст компьютерного кода |
| <col> | Определяет атрибуты для колонок таблицы |
| <colgroup> | Определяет группы колонок таблицы |
| <command>Новый | Определяет командную кнопку |
| <datalist>Новый | Определяет выпадающий список |
| <dd> | Определяет описание термина в списке определений |
| <del> | Определяет удаленный текст |
| <details>Новый | Определяет детали элемента |
| <dfn> | Определяет термин |
| <dir> | Не поддерживается в HTML5 |
| <div> | Служит для группировки элементов |
| <dl> | Определяет список определений |
| <dt> | Определяет термин |
| <em> | Определяет акцентированный текст |
| <embed>Новый | Определяет внешний интерактивный контент или плагин |
| <fieldset> | Определяет набор полей |
| <figcaption>Новый | Определяет заголовок элемента figure |
| <figure>Новый | Определяет группу медиа контента и ее заголовок |
| <font> | Не поддерживается в HTML5 |
| <footer>Новый | Определяет нижний колонтитул (подвал) для раздела или страницы |
| <form> | Определяет форму |
| <frame> | Не поддерживается в HTML5 |
| <frameset> | Не поддерживается в HTML5 |
| <h1> - <h6> | Определяет заголовки 1 - 6 |
| <head> | Определяет информацию о документе |
| <header>Новый | Определяет верхний колонтитул (заголовок) для раздела или страницы |
| <hgroup>Новый | Определяет информацию о разделе документа |
| <hr> | Определяет горизонтальную линию |
| <html> | Определяет html документ |
| <i> | Определяет курсивный (наклонный) текст |
| <iframe> | Определяет встроенное окно (фрейм) |
| <img> | Определяет изображение |
| <input> | Определяет поле ввода |
| <ins> | Определяет вставленный текст |
| <keygen>Новый | Определяет генератор ключей на форме |
| <kbd> | Определяет текст с клавиатуры |
| <label> | Определяет подпись для элемента управления form |
| <legend> | Определяет заголовок в наборе полей |
| <li> | Определяет пункт списка |
| <link> | Определяет ссылку на ресурс |
| <map> | Определяет карту изображения |
| <mark>Новый | Определяет помеченный текст |
| <menu> | Определяет список меню |
| <meta> | Определяет метаинформацию |
| <meter>Новый | Определяет измерение в предопределенном диапазоне |
| <nav>Новый | Определяет ссылки навигации |
| <noframes> | Не поддерживается в HTML5 |
| <noscript> | Определяет участок кода, который будет использоваться, если не работают скрипты |
| <object> | Определяет встроенный объект |
| <ol> | Определяет упорядоченный список |
| <optgroup> | Определяет группу опций |
| <option> | Определяет опцию в выпадающем списке |
| <output>Новый | Определяет некоторые типы вывода |
| <p> | Определяет параграф |
| <param> | Определяет параметр для объекта |
| <pre> | Определяет предварительно отформатированный текст |
| <progress>Новый | Определяет прогресс выполения задачи любого сорта |
| <q> | Определяет короткую цитату |
| <rp>Новый | Используется в ruby комментариях для определения, что показывать, если браузер не поддерживает элемент ruby (агат) |
| <rt>Новый | Определяет объяснение ruby комментариев |
| <ruby>Новый | Определяет ruby комментарий |
| <s> | Определяет текст, который является некорректным |
| <samp> | Определяет образец компьютерного кода |
| <script> | Определяет скрипт |
| <section>Новый | Определяет раздел (рубрику, секцию) |
| <select> | Определяет список выбора |
| <small> | Определяет небольшой текст |
| <source>Новый | Определяет медиа ресурсы, источники |
| <span> | Используется для группировки элементов |
| <strike> | Не поддерживается в HTML5 |
| <strong> | Определяет акцентированный текст |
| <style> | Определяет определение стиля |
| <sub> | Определяет подстрочный текст |
| <summary>Новый | Определяет заголовок элемента "детали" |
| <sup> | Определяет надстрочный текст |
| <table> | Определяет таблицу |
| <tbody> | Определяет тело таблицы |
| <td> | Определяет ячейку таблицы |
| <textarea> | Определяет текстовая область |
| <tfoot> | Определяет нижний колонтитул таблицы |
| <th> | Определяет заголовок столбца/строки таблицы |
| <thead> | Определяет заголовок таблицы |
| <time>Новый | Определяет время/дату |
| <title> | Определяет заголовок документа |
| <tr> | Определяет столбец таблицы |
| <tt> | Не поддерживается в HTML5 |
| <u> | Не поддерживается в HTML5 |
| <ul> | Определяет неупорядоченный список |
| <var> | Определяет переменную |
| <video>Новый | Определяет видео |
| <wbr>Новый | Определяет возможный перенос слова |
| <xmp> | Не поддерживается в HTML5 |
HTML5 Глобальные Атрибуты
|
|
|
|
|
|
|
|
|
Новый : Новые глобальные атрибуты в HTML5.
| Атрибут | Значение | Описание |
| accesskey | символ | Указывает горячую клавишу на клавиатуре для доступа к элементу |
| class | имя_класса | Указывает имя класса для элемента (используется таблицами стилей css) |
| contenteditableНовый | true false | Указывает, может ли пользователь редактировать контент или нет |
| contextmenuНовый | идентификатор_меню | Указывает контекстое меню для элемента |
| dir | ltr rtl | Указывает направление текста для содержимого элемента |
| draggableНовый | true false auto | Указывает, может ли пользователь перетаскивать элемент |
| dropzoneНовый | copy move link | Указывает, что должно произойти, когда перетаскиваемые элементы/данные отпускаются над элементом |
| hiddenНовый | hidden | Указывает не существенный (не значимый) элемент. Спрятанные элементы не отображаются |
| id | идентификатор id | Указывает уникальный идентификатор для элемента |
| lang | код_языка | Определяет код языка для содержимого элемента |
| spellcheckНовый | true false | Указывает, должен ли элемент осуществлять проверку правописания и грамматики |
| style | определение_стиля | Указывает встроенный стиль для элемента |
| tabindex | число | Указывает порядок табуляции для элемента |
| title | текст | Указывает дополнительную информацию об элементе |
Глобальные Атрибуты Событий
HTML 4 добавил возможность запускать ответные реакции на события в браузере, например выполнять скрипт JavaScript, когда пользователь щелкает на элементе.
Чтобы узнать больше о программировании событий, пожалуйста, посетите наши уроки JavaScript и наши уроки DHTML.
Ниже перечислены глобальные атрибуты событий, которые могут быть вставлены в элементы HTML5 для определения ответных действий - реакций на события.
Новый : Новые атрибуты событий в HTML5.
Оконные Атрибуты Событий
События, возникающие в оконном объекте.
Применяется к тегу <body>:
| Атрибут | Значение | Описание |
| onafterprintНовый | скрипт | Скрипт, запускаемый после того, как документ распечатается |
| onbeforeprintНовый | скрипт | Скрипт, запускаемый перед печатью документа |
| onbeforeonloadНовый | скрипт | Скрипт, запускаемый перед загрузкой документа |
| onblur | скрипт | Скрипт, запускаемый, когда окно теряет фокус |
| onerrorНовый | скрипт | Скрипт, запускаемый, когда происходит ошибка |
| onfocus | скрипт | Скрипт, запускаемый, когда окно получает фокус |
| onhaschangeНовый | скрипт | Скрипт, запускаемый, когда документ изменился |
| onload | скрипт | Скрипт, запускаемый, когда документ загружается |
| onmessageНовый | скрипт | Скрипт, запускаемый при получении сообщения |
| onofflineНовый | скрипт | Скрипт, запускаемый, когда документ переходит в оффлайн режим |
| ononlineНовый | скрипт | Скрипт, запускаемый, когда документ переходит в режим онлайн |
| onpagehideНовый | скрипт | Скрипт, запускаемый, когда окно становится невидимым |
| onpageshowНовый | скрипт | Скрипт, запускаемый, когда окно становится видимым |
| onpopstateНовый | скрипт | Скрипт, запускаемый, когда история окна изменяется |
| onredoНовый | скрипт | Скрипт, запускаемый, когда документ выполняет восстановление последней операции |
| onresizeНовый | скрипт | Скрипт, запускаемый, когда изменяется размер окна |
| onstorageНовый | скрипт | Скрипт, запускаемый, когда документ загружается |
| onundoНовый | скрипт | Скрипт, запускаемый, когда документ выполняет отмену последней операции |
| onunloadНовый | скрипт | Скрипт, запускаемый, когда пользователь закрывает документ |
События Формы
События, возникающие при выполнении действий с HTML формами.
Применяются ко всем элементам HTML5, но обычно используются в элементах формы:
| Атрибут | Значение | Описание |
| onblur | скрипт | Скрипт, запускаемый, когда элемент теряет фокус |
| onchange | скрипт | Скрипт, запускаемый, когда элемент изменяется |
| oncontextmenuНовый | скрипт | Скрипт, запускаемый, когда запускается контекстное меню |
| onfocus | скрипт | Скрипт, запускаемый, когда элемент получает фокус |
| onformchangeНовый | скрипт | Скрипт, запускаемый, когда форма изменяется |
| onforminputНовый | скрипт | Скрипт, запускаемый, когда получает пользователь вводит данные в форму |
| oninputНовый | скрипт | Скрипт, запускаемый, когда пользователь вводит данные в элемент |
| oninvalidНовый | скрипт | Скрипт, запускаемый, когда элемент неработоспособный |
| onreset | скрипт | Скрипт, запускаемый, когда форма сбрасывается Не поддерживается в HTML5 |
| onselect | скрипт | Скрипт, запускаемый, когда элемент выбирается |
| onsubmit | скрипт | Скрипт, запускаемый при отправке формы |
События Клавиатуры
События, инициируемые клавиатурой.
Применяется ко всем элементам HTML5.
| Атрибут | Значение | Описание |
| onkeydown | скрипт | Скрипт, запускаемый при нажатии кнопки |
| onkeypress | скрипт | Скрипт, запускаемый, когда кнопка была нажата, а затем отпущена |
| onkeyup | скрипт | Скрипт, запускаемый при отпускании кнопки |
События Мыши
События, возникающие при выполнении действий с мышью или подобных действиях пользователя:
Применяется ко всем элементам HTML5.
| Атрибут | Значение | Описание |
| onclick | скрипт | Скрипт, запускаемый при клике мышью |
| ondblclick | скрипт | Скрипт, запускаемый при двойном щелчке кнопкой мыши |
| ondragНовый | скрипт | Скрипт, запускаемый, когда элемент перетаскивается |
| ondragendНовый | скрипт | Скрипт, запускаемый в конце операции перетаскивания |
| ondragenterНовый | скрипт | Скрипт, запускаемый, когда перетаскиваемый элемент оказался над допустимой целевой областью, над которой его можно отпустить |
| ondragleaveНовый | скрипт | Скрипт, запускаемый, когда перетаскиваемый элемент покидает допустимую целевую область, где его можно было отпустить |
| ondragoverНовый | скрипт | Скрипт, запускаемый, когда элемент перетаскивается над допустимой целевой областью, где его можно отпустить |
| ondragstartНовый | скрипт | Скрипт, запускаемый в начале операции перетаскивания |
| ondropНовый | скрипт | Скрипт, запускаемый, когда перетаскиваемый элемент отпускается |
| onmousedown | скрипт | Скрипт, запускаемый при нажатии кнопки мыши |
| onmousemove | скрипт | Скрипт, запускаемый при перемещении указателя мыши |
| onmouseout | скрипт | Скрипт, запускаемый, когда указатель мыши выходит за пределы элемента |
| onmouseover | скрипт | Скрипт, запускаемый, когда указатель мыши перемещается над элементом |
| onmouseup | скрипт | Скрипт, запускаемый, когда кнопка мыши отпущена |
| onmousewheelНовый | скрипт | Скрипт, запускаемый, когда прокручивается колесо мыши |
| onscrollНовый | скрипт | Скрипт, запускаемый, когда прокручивается ползунок полосы прокрутки элемента |
Медиа События
События, возникающие в медиа элементах, например video (видео), image (изображения) и audio (аудио).
Применяются ко всем элементам HTML5, но наиболее часто используются в медиа элементах, таких как audio, embed, img, object и video:
| Атрибут | Значение | Описание |
| onabort | скрипт | Скрипт, запускаемый при отмене |
| oncanplayНовый | скрипт | Скрипт, запускаемый, когда медиа может начать воспроизведение, но может остановиться для буферизации |
| oncanplaythroughНовый | скрипт | Скрипт, запускаемый, медиа может воспроизводиться до конца - без остановок для буферизации |
| ondurationchangeНовый | скрипт | Скрипт, запускаемый, когда продолжительность медиа изменяется |
| onemptiedНовый | скрипт | Скрипт, запускаемый, когда медиа источник внезапно становится пустым (ошибки сети, ошибки при загрузке и т.д.) |
| onendedНовый | скрипт | Скрипт, запускаемый, когда медиа достигает конца воспроизведения |
| onerrorНовый | скрипт | Скрипт, запускаемый, когда происходит ошибка при загрузке элемента |
| onloadeddataНовый | скрипт | Скрипт, запускаемый, когда данные медиа загружены |
| onloadedmetadataНовый | скрипт | Скрипт, запускаемый, когда данные о продолжительности или другая информация о медиа элементе загружены |
| onloadstartНовый | скрипт | Скрипт, запускаемый, когда браузер начинает загружать медиа данные |
| onpauseНовый | скрипт | Скрипт, запускаемый при остановке (паузе) медиа |
| onplayНовый | скрипт | Скрипт, запускаемый при старте воспроизведения медиа |
| onplayingНовый | скрипт | Скрипт, запускаемый, когда медиа уже начало воспроизводиться |
| onprogressНовый | скрипт | Скрипт, запускаемый, когда браузер извлекает медиа данные |
| onratechangeНовый | скрипт | Скрипт, запускаемый, когда скорость медиа потока (количество бит в секунду) изменяется |
| onreadystatechangeНовый | скрипт | Скрипт, запускаемый, когда состояние готовности изменяется |
| onseekedНовый | скрипт | Скрипт, запускаемый, когда атрибут поиска медиа элемента более не используется, и поиск завершен |
| onseekingНовый | скрипт | Скрипт, запускаемый, когда атрибут поиска медиа элемента используется, и поиск начат |
| onstalledНовый | скрипт | Скрипт, запускаемый при возникновении ошибки в процессе извлечения медиа данных (остановка) |
| onsuspendНовый | скрипт | Скрипт, запускаемый, когда браузер уже начал извлекать медиа данные, но процесс был приостановлен прежде, чем медиа файл был полностью извлечен |
| ontimeupdateНовый | скрипт | Скрипт, запускаемый, когда медиа изменяет позицию проигрывания |
| onvolumechangeНовый | скрипт | Скрипт, запускаемый, когда изменяется уровень громкости медиа, а также, когда уровень громкости устанавливается в "mute" (без звука) |
| onwaitingНовый | скрипт | Скрипт, запускаемый, когда медиа перестало воспроизводиться и ожидает возобновления |
Пример
|
HTML5 Новые Элементы Форм
HTML5 имеет несколько новых элементов и атрибутов для форм.
Этот урок охватытвает новые элементы форм:
- datalist (список опций)
- keygen (генератор ключа)
- output (вывод)
Поддержка Браузерами
| Элемент | IE | Firefox | Opera | Chrome | Safari |
| datalist (список опций) | Нет | 4.0 | 9.5 | Нет | Нет |
| keygen (генератор ключа) | Нет | 4.0 | 10.5 | 3.0 | Нет |
| output (вывод) | Нет | Нет | 9.5 | 10.0 | Нет |
Дата добавления: 2019-01-14; просмотров: 209; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!