Файл: Основы программирования на языке HTML. ТЕХНОЛОГИИ ПРОГРАММИРОВАНИЯ.pdf
Добавлен: 14.03.2024
Просмотров: 38
Скачиваний: 0
name — уникальное имя элемента. По нему можно обратиться к элементу в скриптах или навесить стиль. Если у элемента есть значение, то при самбите формы значение элемента улетит на сервер под указанным в этом атрибуте именем.
pattern — Устанавливает шаблон ввода.
placeholder — атрибут, который отображается в виде текстовой заглушки в поле, если элемент не заполнен. Это значение не будет отправлено на сервер и всего лишь служит подсказкой для конечного пользователя что надо вводить в поле.
readonly — атрибут, который указывает что данное поле нельзя изменять, но его можно читать и оно будет отправлено на сервер, если совершить сабмит формы, а отличии от атрибута disabled.
required — атрибут, который указывает встроенным в браузер технологиям валидации, что данной поле должно быть не пустым перед сабмитом. В случае, если проверка не пройдена, то браузер откажет в сабмите и уведомит пользователя о неполноте данных.
size — указывает ширину текстового поля в попугаях.
src — Адрес графического файла для поля с изображением.
step — Шаг приращения для числовых полей.
tabindex — Этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным.
type — Сообщает web-browserу, к какому типу относится элемент form’ы.
value — текущее значение данного поля. К этому полу можно будет обратиться в скриптах или же это значение будет отправлено на сервер при сабмите формы.
У этого элемента ещё имеются универсальные аттрибуты и события.
<textarea> — элемент textarea являет собой элемент form’ы для создания области, в которой может располагаться многострочное значение поле, в отличие от элемента input. При отправке данных на сервер или манипулировании значением поля в скриптах будут сохранены переносы строк. Символ переноса строки обычно зависит от используемой операционной системы.
Внутри textarea можно поместить любой текст, который будет отображаться внутри поля.
Синтаксисс
<textarea аттрибуты>
текст
</textarea>
Аттрибуты
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом..
cols — ширина области, где число определяет количество символов, которое сможет поместиться на одной строке. Лучше использовать CSS стили.
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.
maxlength — атрибут, который указывает встроенным в браузер технологиям валидации, что количество символов в данном поле не должно превышать значение этого атрибута. В текущей реализиации браузер просто запретит ввод больше чем положено.
name — уникальное имя элемента. По нему можно обратиться к элементу в скриптах или навесить стиль. Если у элемента есть значение, то при самбите формы значение элемента улетит на сервер под указанным в этом атрибуте именем.
placeholder — атрибут, который отображается в виде текстовой заглушки в поле, если элемент не заполнен. Это значение не будет отправлено на сервер и всего лишь служит подсказкой для конечного пользователя что надо вводить в поле.
readonly — атрибут, который указывает что данное поле нельзя изменять, но его можно читать и оно будет отправлено на сервер, если совершить сабмит формы, а отличии от атрибута disabled.
required — атрибут, который указывает встроенным в браузер технологиям валидации, что данной поле должно быть не пустым перед сабмитом. В случае, если проверка не пройдена, то браузер откажет в сабмите и уведомит пользователя о неполноте данных.
rows — высота области, где число определяет количество строк будет в элементе. Лучше использовать CSS стили.
tabindex — этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным
wrap — атрибут определяющий харакет переноса строк.
У этого элемента ещё имеются универсальные аттрибуты и события.
<select> — Элемент select создаёт список по двум сценариям: выпадающий с возможностью выбрать один вариант из этого списка и записать его значение в значение value списка, второй же даёт возомжность создать список в небольшой области, где зажав ctrl можно выбрать несколько вариантов – так называемый множественный select. С помощью size можно задать высоту списке, где число в этом атрибе отражает число строк в области. А вот ширина не жадная и пытается стать ровной той, какая необходима для самого длинного названия элемента. Или можно с помощью CSS сделать как вашей душе угодно. Каждый пункт создается с помощью элемента option, который должен быть вложен в контеийнер select. Если планируется отправлять данные списка на сервер, то требуется поместить элемент select внутрь form’ы.
Синтаксисс
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Аттрибуты
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
form — устанавливает связь между элементом и формой, если указать идентификатор формы в данном атрибуте.
multiple — конвертирует простой список в список с множественным выбором.
name — уникальное имя элемента. По нему можно обратиться к элементу в скриптах или навесить стиль. Если у элемента есть значение, то при самбите формы значение элемента улетит на сервер под указанным в этом атрибуте именем.
required — атрибут, который указывает встроенным в браузер технологиям валидации, что данной поле должно быть не пустым перед сабмитом. В случае, если проверка не пройдена, то браузер откажет в сабмите и уведомит пользователя о неполноте данных.
size — число строк что будут отображены в спике.
tabindex — этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным
У этого элемента ещё имеются универсальные аттрибуты и события.
<option> — Элемент option является элементом списка контеийнера select. Ширина списка задаётся самым широким значением длинны текста, указанным в элементе option, ну или может изменяться с помощью стилей. Если планируется отправлять данные списка на сервер, то требуется поместить элемент select внутрь form’ы.
Синтаксисс
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Аттрибуты
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
label — показывает какую метку пункта списка использовать.
selected — если оный указан, то данная опция будет выбрана по дефолту в списке. Лучше не использовать. Вместо этого задайте значение value у select’а.
value — текущее значение данного поля. К этому полу можно будет обратиться в скриптах или же это значение будет отправлено на сервер при сабмите формы.
У этого элемента ещё имеются универсальные аттрибуты и события.
<button> — Элемент button создает на web-странице кнопку и по своим свойствам и действию напоминает элемент, получаемый с помощью input (с атрибутом type=[button/reset/submit]). Но, в отличие от этого элемента, button имеет ряд расширенных возможностей стилизации кнопок и управления формами. К примеру, на этой кнопке можно размещать любые элементы HTML, в том числе элемент img. С помощью стилей ей можно задать практически любой стиль и сделать её любого возможного для бразуера вида..
Теоретически, элемент button по правилам должен располагаться внутри form’ы. Но web-browserы клали на это, не выводят сообщение об ошибке и корректно работают с элементом button, даже если он встречается самостоятельно. Хотя, если нужно результат нажатия на кнопку отправить на сервер, помещать button в контеийнер form обязательно. Ну или можно с помощью атрибутов указать какую форму мы самбитим.
Синтаксисс
<form>
<button>...</button>
</form>
Аттрибуты
accesskey — с помощью заданной клавиши в этом атрибуте позволяет получить доступ к элементу при помощи нажатия указанной клавиши и специальной клавиши, которая у каждого браузера своя.
autofocus — автоматически после рендера страницы фокусируется на элементе с этим атрибутом.
disabled — делает элемент и всё его содержимое недоступным для любого взаимодействия. При сабмите формы это поле не будет отправлено на сервер.
form — здесь вы можете указать к какой форме относится кнопка, если она находится вне формы.
formaction — принудительно указывает по какому адресу будет происходить сабмит формы. Редко-используемая фича, желательно её избегать.
formenctype — принудительно указывает кодировку в котром отправлять данные на сервер. Не использовать. Плохой стиль.
formmethod — принудительно указывает каким методом отправить данные формы на сервер. Не использовать. Плохой стиль.
formnovalidate — если у элементов формы используются нативные методы проверки валидности, то данное свойство отклчит их проверку при сабмите формы. Не использовать. Плохой стиль.
formtarget — после сабмита откроет ответ с сервера в фрейме или новом окне.
name — уникальное имя элемента. По нему можно обратиться к элементу в скриптах или навесить стиль. Если у элемента есть значение, то при самбите формы значение элемента улетит на сервер под указанным в этом атрибуте именем.
type — одно из трёх значений button/submit/reset. Первый тип делает из кнопки обычную кнопку, все остальные делают кнопки кнопками управления формы, внутри которых они распалагются.
value — текущее значение данного поля. К этому полу можно будет обратиться в скриптах или же это значение будет отправлено на сервер при сабмите формы.
У этого элемента ещё имеются универсальные аттрибуты и события.
<object> — Элемент object сообщает web-browserу, как загрузить и отобразить ообъекты, которые изначально web-browser не понимает. Обычн, таким объектам нужны подключения к web-browserу специальных модулей, которые называются плагин, или требует запуска вспомогательной программы.
Спецификация HTML 5 позволяет помещать несколько элементов object с различным содержанием друг в друга. Это даёт возможность отображать тот контент, который понятен web-browser, при отсутствии нужной программы или плагина. Это упрощает кроссбраузерность сайтов. К примеру, внешний элемент object загружает видео-файл, а в случае, когда необходимый кодек (программа для сжатия и восстановления видеоданных) не обнаружен в системе, вложенный элемент object показывает картинку. В дополнение внутрь object можно поместить элемент param, который передает дополнительные параметры для отображения объекта.
Синтаксисс
<object width="ширина" height="высота"></object>”
Аттрибуты
align — даёт понять как будет обтекаться элементы и тип его выравнивания на страницы
archive — определяет путь к файлам (библиотекам), необходимым дл корректной и полноценной работы объекта.
classid — URI плагина (приложения или программы), которая знает как работать с данным объектом и запустит его.
code — имя загружаемого объекта, который будет исполняться.
codebase — это путь до корневой папки с объектом, который определяется атрибутом code или classid.
codetype — говорит какой тип объекта, который определяется другим атрибутом classid.
data — URI адрес до файла, необходимый для того, чтобы его содержимое было отображено в web-браузере.
height — Это высота объекта.
hspace — это horizontal space или горизонтальный отступ до других элементов рядом.
tabindex — Этот атрибут получет порядковый номер, под которым до него можно будет добраться с помощью tab. Если потавить -1, то элемент будет не tabабельным.
type — MIME-тип объекта.
vspace — это vertical space или вертикальный отступ до других элементов рядом.
width — это ширина элемента
У этого элемента ещё имеются универсальные аттрибуты и события.
<canvas> — создает область-холст, в котором можно рендерить 2D картинку, делать анимацию и прочие ноу=хау из мира 2D. Основной интерес ввиду возможности рендерить 60 и выше кадров секунду. Некоторые разработчики полагают, что мир будущих интерфейсов лежит за canvas (или webGL)
Синтаксисс
<canvas id="идентификатор">
</canvas>
Аттрибуты
height — это высота холста. По умолчанию 300 пикселей.
width — а это ширина холста. По умолчанию 150 пикселей.
У этого элемента ещё имеются универсальные аттрибуты и события.
Далее будет универсальных атрибутов, которые могут быть использованы на большой группе тегов. Чтобы постоянно не повторяться они указаны списком ниже:
