Элементы формы как объекты.
Каждый элемент страницы можно рассматривать как объект, который имеет свои свойства, методы и обработчики событий. Чаще всего события на странице связаны с формой (нажатие кнопки, например).
Формы в документе представлены семейством Forms. К именованным формам можно обратиться непосредственно по имени: forms.MyForm.свойство или MyForm.свойство.
Общие свойства элементов формы:
Value – возвращает содержимое объекта.
Disabled – делает объект неактивным.
Name – возвращает строку со значением name объекта.
Общие события элементов формы:
OnFocus – объект попал в фокус, стал активным.
OnBlur – объект вышел из фокуса.
OnClick – произошло нажатие мыши в области объекта.
OnDblClick – произошло двойное нажатие мыши в области объекта.
OnMouseOver – мышь наведена на элемент.
OnMouseOut – указатель мыши «ушел» с элемента.
Общие методы элементов формы:
focus – передает фокус указанному элементу формы.
blur – удаляет фокус из элемента формы.
Элементы Text, Password, textArea.
Свойства:
maxLength – возвращает максимальную длину строки.
defaultValue – возвращает первоначальное значение элемента, установленное в тегах.
Методы:
select() – выделяет область ввода указанного элемента формы.
События:
OnChange – содержимое объекта было изменено. Проверяется конечный результат. То есть, в процессе редактирования могли быть внесены, а затем удалены изменения. Если начальное состояние поля равно конечному состоянию, то считается что событие не произошло.
OnSelect – произошло выделение части текста.
Элемент CheckBox, Radio.
Свойства:
checked – проверка текущего состояния флажка. True – установлен, False – снят.
defaultChecked - возвращает первоначальное значение элемента, установленное в тегах.
Элемент Select.
Свойства:
options – массив параметров option объекта.
selectedIndex – возвращает индекс выбранного элемента.
selected – возвращает логическое значение, показывающее текущее состояние параметра в объекте.
defaultSelected – возвращает логическое значение - первоначальное значение элемента, установленное в тегах.
index – возвращает индекс элемента.
События:
OnChange – содержимое объекта было изменено.
Теги логического разделения. Общие атрибуты тегов.
HTML тег <hr> (horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Такая линия будет полезна при отделении тематического вступления от основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.
Некоторые элементы HTML, которые могут присутствовать внутри тега BODY, называются элементами «уровня блока », в то время как другие - «встроенными » (также называемыми элементами «уровня текста»).
Модель содержимого
Элементы уровня блока могут содержать встроенные элементы и другие элементы уровня блока.
Встроенные элементы могут содержать только данные и другие встроенные элементы. Этому структурному различию свойственна идея о том, что элементы блока создают «большие» структуры, чем встроенные элементы.
Форматирование
По умолчанию элементы уровня блока форматируются иначе, чем встроенные элементы. Обычно элементы уровня блока начинаются с новой строки, а встроенные элементы - нет.
Группировка элементов: элементы DIV и SPAN
Начальный тег: обязателен, Конечный тег: обязателен
Элементы DIV и SPAN вместе с атрибутами id и class обеспечивают общий механизм добавления в документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста.
Визуальные браузеры обычно помещают символ перевода строки перед и после элементов DIV
Общие атрибуты тегов
Общие атрибуты могут использоваться практически для любого тега HTML. Поэтому их и выделяют в отдельную группу, чтобы избежать многочисленных бессмысленных повторов.
Accesskey
Позволяет перейти к текстовому полю с помощью некоторого сочетания клавиш с заданной в атрибуте буквой или цифрой. Браузеры при этом используют различные комбинации клавиш..
Class
Задает один или несколько имен классов для связи элемента со стилевым оформлением. Если указаны несколько классов, то они перечисляются через пробел. Имя класса может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква. contenteditable
Указывает можно ли редактировать содержание элемента или нет. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (contenteditable).
Contextmenu
Устанавливает контекстное меню для элемента. Значение атрибута – идентификатор меню, созданного с помощью тега <menu>.
Атрибут contextmenu работает только в Firefox.
data-*
Позволяет создавать собственные атрибуты для хранения данных. Имена атрибутов трансформируются в переменные, к которым можно обращаться для получения данных, по следующим правилам:
- префикс data- удаляется;
- дефис перед буквой удаляется, а буква за ним становится прописной;
- другие дефисы остаются неизменными.
Например, атрибут data-number-of-users преобразуется в переменную numberOfUsers.
Dir
Задает направление отображения текста. Возможные значения:
- ltr – слева направо,
- rtr – справа налево.
Draggable
Указывает, можно ли перетаскивать элемент с помощью мышки или нет. Возможные значения: "true", "false".
Hidden
Элемент скрыт, т.е. он не отображается на странице, но доступен через скрипты.
Атрибут hidden не работает в Safari, Android, iOS.
id
Идентификатор элемента, который используется для обращения к элементу через скрипты. Идентификатор – уникальное имя элемента, т.е. в коде документа должен встречаться только один раз. Идентификатор может содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), дефис (-) и подчеркивание (_), первым символом должна быть буква. В HTML5 id можно использовать также для ссылки на конкретное место Web-страницы.
Lang
Язык содержимого элемента.
Spellcheck
Определяет проверять или не проверять правописание и грамматику в тексте. Возможные значения: "true", "false". Значение "true" можно вообще не указывать (spellcheck). Результат будет заметен только для полей форм <input> и <textarea>, а также для элементов c установленным атрибутом contenteditable.
Style
Внутренние стили элемента.
Tabindex
Определяет порядок получения фокуса в форме при переходе между элементами с помощью клавиши Tab. Возможное значение – любое целое положительное число. Переход к элементам, у которых не задан атрибут tabindex, происходит после всех «нумерованных» элементов в том порядке, как они указаны в коде.
Title
Всплывающий текст, появляющийся при наведении указателя мышки на элемент.
Таблицы стилей. Селекторы
Таблицы стилей.
Стиль – это все что определяет внешний вид документа HTML при его отображении в окне браузера: шрифты, цвета, позиционирование и т.д.
Каскадные таблицы стилей представляют собой простую технологию присоединения стилей к документам HTML. Таблица стилей – это шаблон, который управляет форматированием тегов в документе. Она представляет собой набор правил отображения.
Любое правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Каждый элемент HTML представляет собой возможный CSS селектор. Свойства селектора определяют стиль документа, для которого он определен.
Виды селекторов:
Обычный.
Селектор {определение}
Определение состоит из двух частей: свойства и его значения, разделенных двоеточием. Назначение свойства видно из его названия.
Классовые селекторы.
селектор.класс {определение}
В CSS с помощью классовых селекторов можно описать собственные стили для различных классов одних и тех же элементов.
Классы также могут быть описаны без явного привязывания к определенным элементам.
Классы также могут быть описаны без явного привязывания их к определенным элементам.
ID-селекторы.
#ID {определение}
ID – индивидуально именованный стиль. С его помощью можно создавать стилистические исключения среди элементов одного класса. Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств.
Контекстные селекторы.
селектор селектор {определение}
Контекстные селекторы – это сочетания нескольких обыкновенных селекторов. Стиль задается только элементом в заданной последовательности в зависимости от каскадного порядка.
Для того чтобы придать нескольким элементам одинаковые свойства селекторы перечисляются через запятую.
H1, H2, H3 {color:green}
Не нашли, что искали? Воспользуйтесь поиском по сайту:
©2015 - 2024 stydopedia.ru Все материалы защищены законодательством РФ.
|