Верстка web-страниц презентация

Содержание
Формы
Атрибуты формы
Управляющие элементы
Элемент input. Пример
Другие элементы форм. Пример
Отправка формы
Новые типы полей
Новые атрибуты
Новые элементы
Псевдоклассы

Формы
Форма (англ. form) – важный объект интерфейса, позволяющий пользователям вводить данные, осуществлять выбор, обмениваться информацией, менять поведение приложения.
Форма состоит из элементов управления, которые позволяют пользователю вводить\выбирать необходимую информацию и отправлять ее на сервер для последующей обработки.

Формы. Что нового?
На данный момент создано множество библиотек и примеров кода, предназначенных для обработки форм.
HTML5 стандартизирует эти возможности, предоставляя к использованию новые атрибуты, элементы и целые API-интерфейсы.
Теперь функциональность, предназначенная для обработки данных в формах в режиме реального времени, встраивается прямо в браузер и полностью описывается стандартами.

Формы
Применяя CSS, можно создать стили для элементов веб-форм. Отдельных css-свойств для форм нет, но к ним можно применять практически все из описанных выше по курсу.
Однако следует помнить о том, что браузеры могут несколько по-разному отображать результат применения свойства к элементам управления.

Формы
Также, применяя стилистические решения к формам, следует помнить о том, что не стоит слишком изменять привычные и узнаваемые элементы интерфейса.
В противном случае у пользователей могут возникнуть недопонимания во взаимодействии с веб-страницей.
Всегда проверяйте тот факт, что пользователи распознают форму для ввода данных и понимание принципа взаимодействия с элементами данной формы будет простым и логичным.

Формы
Чтобы поместить форму на страницу, используется тег
…
.
Информация из всех управляющих элементов, находящихся внутри этого тега, будет отправляться единым блоком.

Формы

Формы
Элемент form определяет саму форму и ее компоненты.
Элементы формы (элементы управления) располагаются между открывающим и закрывающим тегом.
Для тега form необходимо указать ряд атрибутов, определяющих, как введенная информация будет обрабатываться и передаваться

Атрибуты формы
name – имя формы; данный атрибут может быть у любого элемента html, но особенно полезен для элементов, расположенных внутри объекта form
method – определяет метод, используемый для отправки формы на сервер; имеет два возможных значения – get и post;
метод get используется для передачи ограниченной по объему общедоступной информации (данные передаются через url и обычно не превышают по объему 256 байт);
метод post используется для передачи приватной информации произвольного объема (данные при этом не видны пользователю)

Атрибуты формы
action – задает url файла на сервере, который будет обрабатывать информацию, собранную и отправленную формой
target – определяет, где будет показан ответ сервера; возможные значения:
_blank (новое окно)
_self (тот же фрейм) – по умолчанию
_parent (родительский фрейм)
_top (окно, содержащее фрейм)

Атрибуты формы
enctype – определяет способ кодирования данных, посланных формой
Возможны три значения:
application/x-www-form-urlencoded (символы кодируются) – по умолчанию
multipart/form-data (символы не кодируются)
text/plain (кодируются только пробелы)

Атрибуты формы
accept-charset – определяет тип кодировки, применяемый к форме; чаще всего используются значения utf-8 и ISO-8859-1
Значение атрибута по умолчанию устанавливается тегами meta

Управляющие элементы
Каждый управляющий элемент формы задается отдельным тегом.
Управляющие теги могут быть как одинарными так и парными.
<управляющий элемент>
<управляющий элемент>
...
<управляющий элемент>

Управляющие элементы
Каждому управляющему элементу необходимо придумать имя и задать его через параметр name
Данные всех действующих элементов формы отправляются на обработку в виде пар имя-значение

Элемент input
Один из самых важных элементов формы input
Он задает поле, куда пользователь может ввести данные.
Характеристики элемента и тип данных, которые можно ввести, зависят от значения атрибута type.
Этот атрибут определяет, данные какого типа ожидают от пользователя

Элемент input
Type может принимать следующие значения:
text – создает поле для обычного теста;
hidden – создает скрытое поле, которое обычно используется для передачи дополнительной информации;
password – создает поле ввода для пароля, в котором символы скрыты от просмотра; символы, введенные пользователем, обычно показываются на экране в виде точек или звездочек в зависимости от браузера

Элемент input
checkbox – создает переключатель; данный тип ввода требует еще одного атрибута value, указывающего, какое значение будет послано на сервер; значение посылается только при установленном переключателе (если значение не было указано, то посылается on);
radio – создает переключатель для выбора одного варианта из нескольких возможных; используя то же значение для атрибута name, можно группировать несколько кнопок (вариантов выбора) вместе; выбранное значение атрибута value посылается на сервер, когда отправляется сама форма; атрибут checked позволяет задать значение, выбираемое по умолчанию

Элемент input
file – создает поле для выбора файла на компьютере пользователя;
button – создает кнопку, которая сама по себе не совершает никаких действий и не отправляет форму на сервер; это многофункциональная кнопка, управляемая JavaScript (обычно через действие click); чтобы указать текст на самой кнопке, используется атрибут value;
reset – создает кнопку для очистки формы;

Элемент input
submit – создает кнопку, которая отправляет форму на сервер; использует атрибут value, чтобы указать текст на самой кнопке; форму можно отправить и с помощью JavaScript, используя метод submit();
image – загружает изображение, которое используется вместо кнопки submit; для работы элемент должен содержать атрибут src, указывающий путь к изображению

Пример

Пример
ВАЖНО:
Элемент
задает метку для элемента формы.
Атрибут for используется в этом элементе, чтобы связать метку и соответствующий ей элемент (значение атрибута for должно быть равно значению атрибута id элемента, для которого предназначена метка)

Пример
ЗАДАНИЕ:
Создайте код, приведенный в данном примере, сохраните, откройте в браузере;
Обратите внимание на то, что при клике на текстовой надписи автоматически выбирается соответствующий ей элемент управления

Другие элементы форм
Кроме элемента
есть и другие распространенные элементы формы:
</div></h2><div class="slides-content">- создает поле для ввода нескольких строк текста; размер поля можно задать целыми числами с помощью атрибутов rows и cols;<br><select> - создает раскрывающийся список, варианты выбора указаны в элементах <option>;<br><option> - задает каждый вариант выбора для элемента <select><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 25</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-24.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Textarea Атрибуты для textarea cols - ширина поля в символах" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-24.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-24.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-24.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-24.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Textarea<br><p>Атрибуты для textarea<br>cols - ширина поля в символах <br>disabled - блокирует</div></h2><div class="slides-content">доступ и изменение элемента.<br>maxlength - максимальное число введенных символов.<br>name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.<br>readonly - устанавливает, что поле не может изменяться пользователем.<br>rows - высота поля в строках текста <br>tabindex - порядок перехода между элементами при нажатии на клавишу Tab.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 26</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-25.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Select тег Позволяет создать элемент интерфейса в виде раскрывающегося списка," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-25.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-25.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-25.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-25.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Select<br><p>тег <select><br>Позволяет создать элемент интерфейса в виде раскрывающегося списка, а также</div></h2><div class="slides-content">список с одним или множественным выбором, как показано далее. <br>Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 27</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-26.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Select Атрибуты для select disabled - блокирует доступ и изменение" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-26.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-26.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-26.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-26.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Select<br><p>Атрибуты для select<br>disabled - блокирует доступ и изменение элемента.<br>multiple - позволяет</div></h2><div class="slides-content">одновременно выбирать сразу несколько элементов списка.<br>name - имя элемента для отправки на сервер или обращения через скрипты.<br>size - количество отображаемых строк списка.<br>tabindex - определяет последовательность перехода между элементами при нажатии на клавишу Tab<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 28</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-27.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Атрибуты атрибут size Ширина текстового поля, которое определяется числом символов" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-27.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Атрибуты<br><p>атрибут size<br>Ширина текстового поля, которое определяется числом символов моноширинного шрифта (которые</div></h2><div class="slides-content">должны поместиться в видимой части поля). Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. <br>атрибут tabindex<br>Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 29</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-28.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формы атрибут readonly Когда к тегу добавляется атрибут readonly, текстовое" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-28.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формы<br><p>атрибут readonly<br>Когда к тегу <input> добавляется атрибут readonly, текстовое поле не</div></h2><div class="slides-content">может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. <br>Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.<br><input type="text" readonly><br><input type="password" readonly><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 30</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-29.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формы атрибут disabled Блокирует доступ и изменение поля формы. Оно" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-29.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формы<br><p>атрибут disabled<br>Блокирует доступ и изменение поля формы. <br>Оно в таком случае</div></h2><div class="slides-content">отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передается на сервер.<br><input type="..." disabled><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 31</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-30.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формы атрибут checked Этот атрибут определяет, помечен ли заранее такой" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-30.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-30.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-30.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-30.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формы<br><p>атрибут checked<br>Этот атрибут определяет, помечен ли заранее такой элемент формы, как</div></h2><div class="slides-content">флажок или переключатель. В случае использования переключателей (radio), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.<br><input type="radio" checked><br><input type="checkbox" checked><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 32</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-31.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-31.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 33</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-32.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример ЗАДАНИЕ: Создайте код, приведенный в данном примере, сохраните, откройте" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-32.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-32.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-32.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-32.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример<br><p>ЗАДАНИЕ:<br>Создайте код, приведенный в данном примере, сохраните, откройте в браузере; протестируйте;<br>наберите</div></h2><div class="slides-content">произвольный текстовый фрагмент, а затем нажмите на кнопке Reset<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 34</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-33.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отправка формы Когда форма отправляется на сервер, данные для каждого" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-33.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-33.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-33.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-33.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Отправка формы<br><p>Когда форма отправляется на сервер, данные для каждого элемента посылаются</div></h2><div class="slides-content">в виде пары «имя» - «значение», где <br>имя – это значение атрибута name<br>значение – то, что ввел пользователь<br>Пары «имя/значение» посылаются через URL или скрытно – в зависимости от метода, указанного в атрибуте формы method<br>Если указан метод get, то данные будут видны в url после того, как форма будет отправлена<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 35</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-34.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отправка формы К примеру, www.koe-chto-for-primer.com?myname=Robert – данные передаются через url," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-34.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-34.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-34.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-34.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Отправка формы<br><p>К примеру,<br>www.koe-chto-for-primer.com?myname=Robert<br> – данные передаются через url, и это элемент</div></h2><div class="slides-content">управления с name=myname и введенным значением Robert<br>Чтобы прочитать эту информацию на сервере, нужно использовать метод, соответствующий способу отправки<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 36</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-35.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Отправка формы К примеру, print(‘Your name is: ’ .$_GET[‘myname’]); ?>" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-35.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-35.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-35.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-35.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Отправка формы<br><p>К примеру,<br><?php<br> print(‘Your name is: ’ .$_GET[‘myname’]);<br>?><br> – описанные выше скрипт</div></h2><div class="slides-content">может быть помещен в файл, имя которого указано в атрибуте action для формы; этот файл читается на сервере после отправки формы, там же на сервере код выполняется и результат возвращается браузеру; <br>В нашем случае мы использовали глобальную переменную $_GET – что соответствует выбранному методу (в противном случае нужна переменная $_POST)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 37</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-36.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Html5 усовершенствовал поле , увеличив количество возможных" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-36.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-36.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-36.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-36.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Html5 усовершенствовал поле <input>, увеличив количество возможных значений атрибута</div></h2><div class="slides-content">type.<br>Теперь типы говорят не только о том, какой ввод ожидается, но и о том, что делать с введенной информацией<br>Браузер обработает введенные данные в соответствии со значением атрибута type и сделает вывод – верны они или нет.<br>Этот атрибут работает совместно с дополнительными атрибутами, необходимыми для ограничения и контроля данных, вводимых пользователем в реальном времени<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 38</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-37.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип email поле для ввода адреса электронной" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-37.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-37.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-37.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-37.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип email<br>поле для ввода адреса электронной почты<br>Ранее с этой</div></h2><div class="slides-content">целью использовался тип text, однако правильность ввода требовалось проверять с помощью JavaScript. Теперь браузер сам проверить правильность ввода e-mail.<br>Задание: найдите самостоятельно примеры кода на JS, проверяющие корректность заполнения поля, отведенного под e-mail<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 39</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-38.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип email поле для ввода адреса электронной" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-38.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-38.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-38.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-38.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип email<br>поле для ввода адреса электронной почты<br><input type=“email” name=“myemail”><br>Задание:</div></h2><div class="slides-content">добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 40</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-39.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип search поле для организации поиска Данный" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-39.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-39.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-39.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-39.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип search<br>поле для организации поиска<br>Данный тип никак не контролирует</div></h2><div class="slides-content">ввод данных – это всего лишь способ сообщить браузеру о предназначении поля<br><input type=“search” name=“mysearch”><br>Некоторые браузеры меняют представление по умолчанию для этого элемента, давая пользователю подсказку, для чего используется это поле<br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide41" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 41</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-40.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип url поле для сетевых адресов Данный" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-40.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-40.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-40.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-40.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип url<br>поле для сетевых адресов<br>Данный тип работает аналогично типу</div></h2><div class="slides-content">email, считает допустимыми только абсолютные url-адреса и возвращает ошибку, если значение не соответствует этому формату<br><input type=“url” name=“myurl”><br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide42" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 42</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-41.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип tel поле для ввода телефонных номеров" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-41.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-41.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-41.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-41.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип tel<br>поле для ввода телефонных номеров<br>Данный тип не требует</div></h2><div class="slides-content">какого-то определенного синтаксиса; служит лишь для напоминания браузеру о его особенности<br><input type=“tel” name=“mytel”><br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide43" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 43</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-42.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип number поле для ввода только числовых" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-42.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-42.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-42.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-42.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип number<br>поле для ввода только числовых данных<br>С этим типом</div></h2><div class="slides-content">можно использовать несколько полезных новых атрибутов<br>min – определяет минимальное допустимое значение для данного поля<br>max – определяет максимальное допустимое значение<br>step – определяет шаг увеличения или уменьшения значения данного поля<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide44" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 44</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-43.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип number В данное поле вы сможете" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-43.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-43.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-43.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-43.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип number<br><input type=“number” name=“mynumber” min=“0” max=“20” step=“5”><br>В данное поле</div></h2><div class="slides-content">вы сможете ввести только числа из 0; 5; 10; 15; 20 – в соответствии с установленными атрибутами ограничениями<br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide45" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 45</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-44.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип range Этот тип ввода заставляет браузер" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-44.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-44.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-44.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-44.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип range<br>Этот тип ввода заставляет браузер создавать на странице</div></h2><div class="slides-content">новый тип элемента управления<br>Он позволяет пользователю выбрать значение из некоего числового диапазона<br>Обычно на экране этот элемент принимает вид ползунка или стрелочек, увеличивающих или уменьшающих значение (общего стандартного дизайна пока нет).<br>Используются атрибуты min, max, step<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 46</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-45.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип date поле для ввода дат В" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-45.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-45.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-45.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-45.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип date<br>поле для ввода дат<br>В браузерах этот элемент управления</div></h2><div class="slides-content">выглядит как поле, при каждом щелчке на котором открывается календарь;<br>интерфейс данного элемента в спецификации не описывается; чаще всего используется формат «год-месяц-день»<br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide47" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 47</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-46.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип week поле для выбора недели Аналогичен" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-46.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-46.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-46.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-46.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип week<br>поле для выбора недели<br>Аналогичен типу date; чаще всего</div></h2><div class="slides-content">используется синтаксис 2011-W50 – год-номер недели;<br>Тип month<br>поле для выбора месяца<br>Аналогичен предыдущему типу; чаще всего используется формат год-месяц;<br>Задание: добавьте данные объекты к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 48</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-47.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип time поле для обработки времени Принимает" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-47.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-47.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-47.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-47.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип time<br>поле для обработки времени<br>Принимает формат часов и минут;</div></h2><div class="slides-content">обычно ожидается значение «часы:минуты:секунды»<br>Тип datetime<br>поле для ввода полной даты, включая время и часовой пояс<br>Тип datetime-local<br>поле для ввода полной даты, включая время, безчасового пояса<br>Задание: добавьте данные объекты к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 49</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-48.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые типы полей Тип color Поле, предоставляющее стандартный интерфейс для" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-48.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-48.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-48.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-48.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые типы полей<br><p>Тип color<br>Поле, предоставляющее стандартный интерфейс для выбора цвета<br>Обычно в</div></h2><div class="slides-content">таком поле ожидается значение в шестнадцатеричном формате<br>Задание: добавьте данный объект к предыдущему примеру<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide50" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 50</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-49.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут autocomplete Этот старый атрибут теперь описан в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-49.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-49.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-49.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-49.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут autocomplete<br>Этот старый атрибут теперь описан в стандарте; может принимать</div></h2><div class="slides-content">два значения – on и off; значение по умолчанию on;<br>Когда значение атрибута равно off, то составляющие форму элементы input не заполняются автоматически, т.е. для них не отображаются списки ранее введенных значений.<br>Данный атрибут можно использовать и для всей формы – тогда он будет влиять на каждый элемент формы<br><input type="search" name="mysearch" autocomplete="off"><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide51" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 51</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-50.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибуты novalidate и formnovalidate Одна из особенностей форм" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-50.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-50.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-50.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-50.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибуты novalidate и formnovalidate<br>Одна из особенностей форм html5 – встроенная</div></h2><div class="slides-content">возможность проверки. Корректность содержимого формы проверяется по умолчанию, автоматически.<br>Чтобы запретить такое поведение нужно добавить атрибут novalidate.<br>Это булев атрибут используется в теге form<br>Когда он присутствует, форма посылается на сервер без проверки<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide52" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 52</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-51.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибуты novalidate и formnovalidate Иногда проверка нужна только" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-51.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-51.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-51.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-51.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибуты novalidate и formnovalidate<br>Иногда проверка нужна только при определенных обстоятельствах</div></h2><div class="slides-content">(допустим, информацию нужно сохранить, чтобы вернуться к ней позднее)<br>Тогда атрибут formnovalidate нужно прописать к определенным тегам input<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide53" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 53</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-52.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты При нажатии Save – проверки не будет, как при использовании кнопки Send" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-52.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-52.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-52.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-52.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>При нажатии Save – проверки не будет, как при использовании</div></h2><div class="slides-content">кнопки Send <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide54" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 54</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-53.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут placeholder Представляет собой короткую подсказку – слово" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-53.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-53.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-53.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-53.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут placeholder<br>Представляет собой короткую подсказку – слово или фразу, помогающие</div></h2><div class="slides-content">правильно ввести ожидаемые данные.<br>Значение данного атрибута показывается внутри поля и исчезает, когда пользователь переводит фокус ввода на соответствующий элемент.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide55" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 55</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-54.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут required Это булев атрибут, он не позволяет" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-54.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-54.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-54.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-54.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут required<br>Это булев атрибут, он не позволяет подтвердить отправку формы,</div></h2><div class="slides-content">если поле осталось пустым.<br>К примеру, в поле было внесено значение, но проверка правильности ввода не подтвердила допустимость, и поле считается пустым – при добавлении атрибута required браузер будет требовать обязательности заполнения поля в дополнение к проверке формата вводимых данных <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide56" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 56</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-55.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут multiple Это булев атрибут, можно использовать с" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-55.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-55.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-55.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-55.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут multiple<br>Это булев атрибут, можно использовать с некоторыми типами ввода,</div></h2><div class="slides-content">чтобы разрешать пользователю вводить в одном поле несколько значений<br>Чтобы введенная информация прошла проверку, значения нужно разделять запятой<br>При необходимости каждое из значений будет проверяться на допустимость формата<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide57" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 57</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-56.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут autofocus Переводит фокус веб-страницы на выбранный элемент" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-56.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-56.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-56.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-56.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут autofocus<br>Переводит фокус веб-страницы на выбранный элемент с учетом текущей</div></h2><div class="slides-content">ситуации: фокус не меняется, если пользователь уже выбрал другой элемент и работает с ним (в отличие от ранее используемого метода JS)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide58" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 58</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-57.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут autofocus Нажимая кнопку Далее, вы соглашаетесь со" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-57.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-57.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-57.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-57.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут autofocus<br><form><br> <fieldset><br> <p>Нажимая кнопку Далее, вы соглашаетесь со всеми условиями Лицензионного</div></h2><div class="slides-content">соглашения, как явными, так и указанными в неявной форме.</p><br> <button autofocus value="next">Далее</button><br> </p><br> </fieldset><br></form> <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide59" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 59</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-58.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут autofocus" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-58.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-58.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-58.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-58.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут autofocus<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide60" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 60</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-59.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут pattern Позволяет изменить способ проверки, используемый по" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-59.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-59.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-59.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-59.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут pattern<br>Позволяет изменить способ проверки, используемый по умолчанию.<br>Позволяет настраивать правила</div></h2><div class="slides-content">валидации добавлением регулярных выражений<br>Т.е. самостоятельно прописать правило для проверки ввода, а с помощью атрибута title добавить сообщение об ошибке<br>! О регулярных выражениях можно почитать больше в курсе по JavaScript<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide61" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 61</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-60.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые атрибуты Атрибут pattern К примеру," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-60.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-60.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-60.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-60.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые атрибуты<br><p>Атрибут pattern<br>К примеру,<br><input pattern="[0-9]{6}" name="pcode" title="введите 6 цифр вашего почтового</div></h2><div class="slides-content">индекса"><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide62" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 62</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-61.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые элементы Элемент datalist Позволяет заранее построить список пунктов, которые" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-61.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-61.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-61.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-61.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые элементы<br><p>Элемент datalist<br>Позволяет заранее построить список пунктов, которые в дальнейшем будут</div></h2><div class="slides-content">предлагаться в качестве вариантов заполнения полей ввода (для этого нужно добавить атрибут list)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide63" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 63</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-62.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые элементы Элемент datalist После того, как объявлен элемент datalist," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-62.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-62.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-62.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-62.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые элементы<br><p>Элемент datalist<br>После того, как объявлен элемент datalist, остается лишь сослаться</div></h2><div class="slides-content">на этот список пунктов из элемента input, используя атрибут list (значение id из datalist)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide64" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 64</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-63.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые элементы Элемент progress Иллюстрирует прогресс выполнения задачи. Его не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-63.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-63.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-63.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-63.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые элементы<br><p>Элемент progress<br>Иллюстрирует прогресс выполнения задачи.<br>Его не обязательно использовать только с</div></h2><div class="slides-content">формами.<br>Принимает два атрибута, устанавливающие его статус и лимиты.<br>Атрибут value указывает, какая доля задачи уже выполнена, а атрибут max содержит значение, достижение которого соответствует завершению задачи<br><progress value="0" max="100">0%</progress><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide65" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 65</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-64.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые элементы Элемент meter Используется для отображения шкалы – известного" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-64.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-64.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-64.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-64.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые элементы<br><p>Элемент meter<br>Используется для отображения шкалы – известного диапазона (к примеру,</div></h2><div class="slides-content">пропускная способность)<br>Атрибуты min и max устанавливают границы диапазона, value определяет измеряемое значение, low, high и optimum используются для сегментирования диапазона и определения оптимальной позиции<br><meter value="60" min="0" max="100" low="40" high="80" optimum="100">60</meter><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide66" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 66</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-65.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Новые элементы Элемент output Представляет собой особый результат вычисления Обычно" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-65.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-65.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-65.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-65.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Новые элементы<br><p>Элемент output<br>Представляет собой особый результат вычисления<br>Обычно он используется для отображения</div></h2><div class="slides-content">результатов обработки каких-то значений элементами формы.<br>Атрибут for позволяет связать элемент output с исходными элементами, участвующими в расчетах, однако чаще всего ссылки на элементы создаются и модифицируются в коде JS<br>Синтаксис: <output>значение</output><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide67" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 67</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-66.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы html-форм - предназначен для группировки элементов, связанных друг с" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-66.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-66.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-66.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-66.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы html-форм<br><p><fieldset> - предназначен для группировки элементов, связанных друг с другом;</div></h2><div class="slides-content">большинство браузеров нормально отображают фоновые цвета, фоновые изображения и границы для этого тега. <br><legend> - идет по структуре за тегом fieldset и в нем содержится название для группы – оно появится в центре верхней границы тега fieldset<br><fieldset><br> <legend>Текст</legend><br></fieldset><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide68" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 68</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-67.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы html-форм ВАЖНО: При оформлении форм, элементы которых создаются через" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-67.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-67.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-67.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-67.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы html-форм<br><p>ВАЖНО:<br>При оформлении форм, элементы которых создаются через тег input, вместо</div></h2><div class="slides-content">задания стилевого класса можно использовать селектор атрибутов, который позволит настроить внешний вид формы, не обращаясь к классам.<br>К примеру, <br>input[type=“text”] {<br> background-color: blue;<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide69" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 69</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-68.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Компоновка Все, что надо для создания формы, - добавить несколько" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-68.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-68.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-68.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-68.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Компоновка<br><p>Все, что надо для создания формы, - добавить несколько фрагментов текстовых</div></h2><div class="slides-content">и других элементов на веб-страницу.<br>Однако, зачастую визуально это получается беспорядочно.<br>Упорядочения при отображении форм можно добиться несколькими путями:<br>таблицы (очень и очень плохо);<br>через css;<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide70" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 70</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-69.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдоклассы Для стилизации форм можно использовать псевдоклассы, например, :focus –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-69.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-69.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-69.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-69.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдоклассы<br><p>Для стилизации форм можно использовать псевдоклассы, например, <br>:focus – позволяет создать</div></h2><div class="slides-content">селектор, изменяющий внешний вид текстового поля при щелчке кнопкой мыши или при переходе на него с помощью клавиши табуляции.<br>:checked – работает с переключателями и флажками; предназначен для стилизации этих элементов, но обычно веб-браузеры в отношении вида этих полей ведут себя сдержанно.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide71" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 71</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-70.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдоклассы кроме того, элементы формы можно сделать активными и неактивными" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-70.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-70.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-70.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-70.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдоклассы<br><p>кроме того, элементы формы можно сделать активными и неактивными (через средства</div></h2><div class="slides-content">JavaScript) и использовать псевдоклассы :enabled и :disabled<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide72" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 72</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-71.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдоклассы :valid и :invalid – обращение к элементу input с" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-71.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-71.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-71.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-71.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдоклассы<br><p>:valid и :invalid – обращение к элементу input с верно и</div></h2><div class="slides-content">неверно введенным значением<br>.text:valid {border-color:green;}<br>.text:invalid {border-color:red;}<br>:optional и :required – указывают стили для обязательных и дополнительных элементов<br>.name:optional {border-left-color: grey;}<br>.password:required {border-left-color: red;}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide73" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 73</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-72.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдоклассы :in-range и :out-of-range – позволяют задавать стили для элементов" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/147515/slide-72.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147515/slide-72.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147515/slide-72.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147515/slide-72.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдоклассы<br><p>:in-range и :out-of-range – позволяют задавать стили для элементов с ограничением</div></h2><div class="slides-content">диапазона ввода (таких как number) в двух случаях: когда введенное значение лежит в заданных пределах и когда оно вне их.<br>.age:in-range {background:#eef;}<br>.age:out-of-range {background:#fee;}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Верстка-web-страниц.pptx <br> Количество просмотров: 77 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/informatika/protsedurnoe-programmirovanie" class="navigation-link">Процедурное программирование</a></div><div class="navigation-item"><div>Следующая -</div><a href="/informatika/lazarus-znakomstvo-so-sredoy" class="navigation-link">Lazarus. Знакомство со средой</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/razrabotka-tz" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595038/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/595038/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/595038/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/595038/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595038/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка ТЗ</a></div><div class="related-item"><a href="/informatika/rol-teorii-grafov-v-programmirovanii-i" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/91828/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/91828/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/91828/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/91828/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/91828/slide-0.jpg 1440w" class="slides-image related-itemImage"> Роль теории графов в программировании и информатике</a></div><div class="related-item"><a href="/informatika/software-metrics-using-constructive-cost-model" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/13366/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/13366/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/13366/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/13366/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/13366/slide-0.jpg 1440w" class="slides-image related-itemImage"> Software metrics using constructive cost model</a></div><div class="related-item"><a href="/informatika/vvedenie-v-metody-parallelnogo-programmirovaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/278960/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/278960/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/278960/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/278960/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/278960/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в методы параллельного программирования</a></div><div class="related-item"><a href="/informatika/prikladnye-kompyuternye-programmy-v-obrabotke-sotsiologicheskih" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/271807/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/271807/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/271807/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/271807/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/271807/slide-0.jpg 1440w" class="slides-image related-itemImage"> Прикладные компьютерные программы в обработке социологических данных. Вводная лекция</a></div><div class="related-item"><a href="/informatika/ow-to-get-a-real-calibration" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/442943/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/442943/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/442943/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/442943/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/442943/slide-0.jpg 1440w" class="slides-image related-itemImage"> ow to get a real Calibration file from CUMMINS INCAL DVD useful with: Calterm III SW</a></div><div class="related-item"><a href="/informatika/metodichna-sistema-navchannya-nformatiki-v-seredny" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/90667/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/90667/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/90667/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/90667/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/90667/slide-0.jpg 1440w" class="slides-image related-itemImage"> Методична система навчання інформатики в середній загальноосвітній школі. (Лекція 1)</a></div><div class="related-item"><a href="/informatika/vvedenie-v-docker" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/293003/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/293003/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/293003/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/293003/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/293003/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в Docker</a></div><div class="related-item"><a href="/informatika/vvedenie-v-r-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7365/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/7365/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/7365/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/7365/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/7365/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в R</a></div><div class="related-item"><a href="/informatika/zhaa-aparatty-oytu-tehnologiyasy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/349680/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/349680/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/349680/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/349680/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/349680/slide-0.jpg 1440w" class="slides-image related-itemImage"> Жаңа ақпараттық оқыту технологиясы</a></div><div class="related-item"><a href="/informatika/oformlenie-dvizheniya-tovarov-v-fevrale" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/314862/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/314862/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/314862/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/314862/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/314862/slide-0.jpg 1440w" class="slides-image related-itemImage"> Оформление движения товаров в феврале</a></div><div class="related-item"><a href="/informatika/osnovnye-elementy-natsionalnoy-infrastruktury-elektronnogo-pravitelstva" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281540/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/281540/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/281540/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/281540/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281540/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основные элементы национальной инфраструктуры электронного правительства</a></div><div class="related-item"><a href="/informatika/razrabotka-sayta-dlya-figuristov-lyubiteley" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580696/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580696/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580696/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580696/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580696/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка сайта для фигуристов-любителей</a></div><div class="related-item"><a href="/informatika/klassifikatsiya-sovremennyh-kompyuterov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209174/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/209174/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/209174/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/209174/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209174/slide-0.jpg 1440w" class="slides-image related-itemImage"> Классификация современных компьютеров</a></div><div class="related-item"><a href="/informatika/vvedenie-v-php-bazovyy-sintaksis" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/246983/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/246983/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/246983/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/246983/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/246983/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в PHP. Базовый синтаксис</a></div><div class="related-item"><a href="/informatika/model-danih-sutnst-zvyazok" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/16419/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/16419/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/16419/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/16419/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/16419/slide-0.jpg 1440w" class="slides-image related-itemImage"> Модель даних “сутність-зв’язок”</a></div><div class="related-item"><a href="/informatika/istoriya-vychislitelnoy-tehniki-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/223890/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/223890/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/223890/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/223890/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/223890/slide-0.jpg 1440w" class="slides-image related-itemImage"> История вычислительной техники</a></div><div class="related-item"><a href="/informatika/web-sayt-onlayn-kinoteatr" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580159/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580159/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580159/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580159/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580159/slide-0.jpg 1440w" class="slides-image related-itemImage"> Web-сайт Онлайн кинотеатр</a></div><div class="related-item"><a href="/informatika/lektsiya-7-metody-i-sredstva-obespecheniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/137009/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/137009/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/137009/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/137009/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/137009/slide-0.jpg 1440w" class="slides-image related-itemImage"> Лекция 7. Методы и средства обеспечения ИБ компьютерных систем</a></div><div class="related-item"><a href="/informatika/sozdanie-bazy-dannyh-priemnaya-komissiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1903/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1903/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1903/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1903/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1903/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание базы данных Приемная комиссия</a></div><div class="related-item"><a href="/informatika/osnovy-informatsionnoy-bezopasnosti-i-zashchity-informatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/181150/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/181150/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/181150/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/181150/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/181150/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основы информационной безопасности и защиты информации. Информационная безопасность в бизнесе</a></div><div class="related-item"><a href="/informatika/nabor-mini-igr-monday" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/123621/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/123621/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/123621/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/123621/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/123621/slide-0.jpg 1440w" class="slides-image related-itemImage"> Набор мини-игр Monday</a></div><div class="related-item"><a href="/informatika/elektronnye-tablitsy-grafiki-diagrammy-gistogrammy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/383094/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/383094/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/383094/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/383094/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/383094/slide-0.jpg 1440w" class="slides-image related-itemImage"> Электронные таблицы. Графики. Диаграммы. Гистограммы</a></div><div class="related-item"><a href="/informatika/veb-analitika-chast-5-otchety-grupp" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/184356/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/184356/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/184356/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/184356/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/184356/slide-0.jpg 1440w" class="slides-image related-itemImage"> Веб-аналитика. Часть 5: Отчеты групп: содержание, поведение, мониторинг</a></div><div class="related-item"><a href="/informatika/flesh-prezentatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194224/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/194224/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/194224/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/194224/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194224/slide-0.jpg 1440w" class="slides-image related-itemImage"> Флэш-презентации</a></div><div class="related-item"><a href="/informatika/tehnologii-avtomatizatsii-testirovaniya-i-otladki-po" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/378029/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/378029/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/378029/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/378029/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/378029/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технологии автоматизации тестирования и отладки ПО</a></div><div class="related-item"><a href="/informatika/tehnologii-obrabotki-dannyh-setevye-tehnologii-obrabotki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/2710/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/2710/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/2710/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/2710/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/2710/slide-0.jpg 1440w" class="slides-image related-itemImage"> Технологии обработки данных. Сетевые технологии обработки данных. (Лекция 8)</a></div><div class="related-item"><a href="/informatika/komponenty-os-yadro-vidy-yadra-lektsiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595873/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/595873/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/595873/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/595873/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595873/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компоненты ОС. Ядро. Виды ядра. Лекция 2</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:147515,name:m,category:G,count:74,jpg:"jpg\u002F147515",hits:77,download:b,h1:"Верстка web-страниц презентация",meta:{h1:m,title:m,description:"Верстка web-страниц презентация на тему, доклад, Информатика",keywords:"Верстка web-страниц, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Верстка web-страниц из раздела Информатика. Презентация на заданную тему содержит 74 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EФормы\u003Cbr\u003EАтрибуты формы\u003Cbr\u003EУправляющие элементы\u003Cbr\u003EЭлемент input. Пример\u003Cbr\u003EДругие элементы форм. Пример\u003Cbr\u003EОтправка формы\u003Cbr\u003EНовые типы полей \u003Cinput\u003E\u003Cbr\u003EНовые атрибуты\u003Cbr\u003EНовые элементы\u003Cbr\u003EПсевдоклассы\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EФорма",file:"Верстка-web-страниц.pptx",texts:["\u003Cp\u003EВерстка web-страниц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EФормы\u003Cbr\u003E\u003Cbr\u003EТитова Ольга Ивановна\u003Cbr\u003EМинск, 2017 \u003Cbr\u003E","\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EФормы\u003Cbr\u003EАтрибуты формы\u003Cbr\u003EУправляющие элементы\u003Cbr\u003EЭлемент input. Пример\u003Cbr\u003EДругие элементы форм. Пример\u003Cbr\u003EОтправка формы\u003Cbr\u003EНовые типы полей \u003Cinput\u003E\u003Cbr\u003EНовые атрибуты\u003Cbr\u003EНовые элементы\u003Cbr\u003EПсевдоклассы\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EФорма (англ. form) – важный объект интерфейса, позволяющий пользователям вводить данные, осуществлять выбор, обмениваться информацией, менять поведение приложения.\u003Cbr\u003EФорма состоит из элементов управления, которые позволяют пользователю вводить\\выбирать необходимую информацию и отправлять ее на сервер для последующей обработки.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EФормы. Что нового?\u003Cbr\u003E\u003Cp\u003EНа данный момент создано множество библиотек и примеров кода, предназначенных для обработки форм.\u003Cbr\u003EHTML5 стандартизирует эти возможности, предоставляя к использованию новые атрибуты, элементы и целые API-интерфейсы.\u003Cbr\u003EТеперь функциональность, предназначенная для обработки данных в формах в режиме реального времени, встраивается прямо в браузер и полностью описывается стандартами.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EПрименяя CSS, можно создать стили для элементов веб-форм. Отдельных css-свойств для форм нет, но к ним можно применять практически все из описанных выше по курсу. \u003Cbr\u003EОднако следует помнить о том, что браузеры могут несколько по-разному отображать результат применения свойства к элементам управления.\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EТакже, применяя стилистические решения к формам, следует помнить о том, что не стоит слишком изменять привычные и узнаваемые элементы интерфейса. \u003Cbr\u003EВ противном случае у пользователей могут возникнуть недопонимания во взаимодействии с веб-страницей.\u003Cbr\u003EВсегда проверяйте тот факт, что пользователи распознают форму для ввода данных и понимание принципа взаимодействия с элементами данной формы будет простым и логичным.\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EЧтобы поместить форму на страницу, используется тег \u003Cform\u003E…\u003C\u002Fform\u003E. \u003Cbr\u003EИнформация из всех управляющих элементов, находящихся внутри этого тега, будет отправляться единым блоком.\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EЭлемент form определяет саму форму и ее компоненты. \u003Cbr\u003EЭлементы формы (элементы управления) располагаются между открывающим и закрывающим тегом.\u003Cbr\u003EДля тега form необходимо указать ряд атрибутов, определяющих, как введенная информация будет обрабатываться и передаваться\u003Cbr\u003E","\u003Cp\u003EАтрибуты формы\u003Cbr\u003E\u003Cp\u003Ename – имя формы; данный атрибут может быть у любого элемента html, но особенно полезен для элементов, расположенных внутри объекта form\u003Cbr\u003Emethod – определяет метод, используемый для отправки формы на сервер; имеет два возможных значения – get и post; \u003Cbr\u003Eметод get используется для передачи ограниченной по объему общедоступной информации (данные передаются через url и обычно не превышают по объему 256 байт);\u003Cbr\u003Eметод post используется для передачи приватной информации произвольного объема (данные при этом не видны пользователю)\u003Cbr\u003E","\u003Cp\u003EАтрибуты формы\u003Cbr\u003E\u003Cp\u003Eaction – задает url файла на сервере, который будет обрабатывать информацию, собранную и отправленную формой\u003Cbr\u003Etarget – определяет, где будет показан ответ сервера; возможные значения: \u003Cbr\u003E_blank (новое окно) \u003Cbr\u003E_self (тот же фрейм) – по умолчанию\u003Cbr\u003E_parent (родительский фрейм) \u003Cbr\u003E_top (окно, содержащее фрейм) \u003Cbr\u003E","\u003Cp\u003EАтрибуты формы\u003Cbr\u003E\u003Cp\u003Eenctype – определяет способ кодирования данных, посланных формой\u003Cbr\u003EВозможны три значения:\u003Cbr\u003Eapplication\u002Fx-www-form-urlencoded (символы кодируются) – по умолчанию\u003Cbr\u003Emultipart\u002Fform-data (символы не кодируются)\u003Cbr\u003Etext\u002Fplain (кодируются только пробелы) \u003Cbr\u003E","\u003Cp\u003EАтрибуты формы\u003Cbr\u003E\u003Cp\u003Eaccept-charset – определяет тип кодировки, применяемый к форме; чаще всего используются значения utf-8 и ISO-8859-1\u003Cbr\u003EЗначение атрибута по умолчанию устанавливается тегами meta\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EУправляющие элементы\u003Cbr\u003E\u003Cp\u003EКаждый управляющий элемент формы задается отдельным тегом.\u003Cbr\u003EУправляющие теги могут быть как одинарными так и парными.\u003Cbr\u003E\u003Cform\u003E\u003Cbr\u003E\t\u003Cуправляющий элемент\u003E\u003C\u002F\u003E\u003Cbr\u003E\t\u003Cуправляющий элемент\u003E\u003C\u002F\u003E\u003Cbr\u003E\t...\u003Cbr\u003E\t\u003Cуправляющий элемент\u003E\u003C\u002F\u003E\u003Cbr\u003E\u003C\u002Fform\u003E\u003Cbr\u003E","\u003Cp\u003EУправляющие элементы\u003Cbr\u003EКаждому управляющему элементу необходимо придумать имя и задать его через параметр name\u003Cbr\u003EДанные всех действующих элементов формы отправляются на обработку в виде пар имя-значение\u003Cbr\u003E","\u003Cp\u003EЭлемент input\u003Cbr\u003E\u003Cp\u003EОдин из самых важных элементов формы input\u003Cbr\u003EОн задает поле, куда пользователь может ввести данные.\u003Cbr\u003EХарактеристики элемента и тип данных, которые можно ввести, зависят от значения атрибута type.\u003Cbr\u003EЭтот атрибут определяет, данные какого типа ожидают от пользователя\u003Cbr\u003E","\u003Cp\u003EЭлемент input\u003Cbr\u003E\u003Cp\u003EType может принимать следующие значения:\u003Cbr\u003Etext – создает поле для обычного теста;\u003Cbr\u003Ehidden – создает скрытое поле, которое обычно используется для передачи дополнительной информации;\u003Cbr\u003Epassword – создает поле ввода для пароля, в котором символы скрыты от просмотра; символы, введенные пользователем, обычно показываются на экране в виде точек или звездочек в зависимости от браузера\u003Cbr\u003E","\u003Cp\u003EЭлемент input\u003Cbr\u003E\u003Cp\u003Echeckbox – создает переключатель; данный тип ввода требует еще одного атрибута value, указывающего, какое значение будет послано на сервер; значение посылается только при установленном переключателе (если значение не было указано, то посылается on);\u003Cbr\u003Eradio – создает переключатель для выбора одного варианта из нескольких возможных; используя то же значение для атрибута name, можно группировать несколько кнопок (вариантов выбора) вместе; выбранное значение атрибута value посылается на сервер, когда отправляется сама форма; атрибут checked позволяет задать значение, выбираемое по умолчанию\u003Cbr\u003E","\u003Cp\u003EЭлемент input\u003Cbr\u003E\u003Cp\u003Efile – создает поле для выбора файла на компьютере пользователя;\u003Cbr\u003Ebutton – создает кнопку, которая сама по себе не совершает никаких действий и не отправляет форму на сервер; это многофункциональная кнопка, управляемая JavaScript (обычно через действие click); чтобы указать текст на самой кнопке, используется атрибут value;\u003Cbr\u003Ereset – создает кнопку для очистки формы;\u003Cbr\u003E","\u003Cp\u003EЭлемент input\u003Cbr\u003E\u003Cp\u003Esubmit – создает кнопку, которая отправляет форму на сервер; использует атрибут value, чтобы указать текст на самой кнопке; форму можно отправить и с помощью JavaScript, используя метод submit();\u003Cbr\u003Eimage – загружает изображение, которое используется вместо кнопки submit; для работы элемент должен содержать атрибут src, указывающий путь к изображению\u003Cbr\u003E",H,"\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EВАЖНО:\u003Cbr\u003EЭлемент \u003Clabel\u003E задает метку для элемента формы.\u003Cbr\u003EАтрибут for используется в этом элементе, чтобы связать метку и соответствующий ей элемент (значение атрибута for должно быть равно значению атрибута id элемента, для которого предназначена метка)\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EЗАДАНИЕ:\u003Cbr\u003EСоздайте код, приведенный в данном примере, сохраните, откройте в браузере;\u003Cbr\u003EОбратите внимание на то, что при клике на текстовой надписи автоматически выбирается соответствующий ей элемент управления\u003Cbr\u003E","\u003Cp\u003EДругие элементы форм\u003Cbr\u003E\u003Cp\u003EКроме элемента \u003Cinput\u003E есть и другие распространенные элементы формы:\u003Cbr\u003E\u003Ctextarea\u003E - создает поле для ввода нескольких строк текста; размер поля можно задать целыми числами с помощью атрибутов rows и cols;\u003Cbr\u003E\u003Cselect\u003E - создает раскрывающийся список, варианты выбора указаны в элементах \u003Coption\u003E;\u003Cbr\u003E\u003Coption\u003E - задает каждый вариант выбора для элемента \u003Cselect\u003E\u003Cbr\u003E","\u003Cp\u003ETextarea\u003Cbr\u003E\u003Cp\u003EАтрибуты для textarea\u003Cbr\u003Ecols - ширина поля в символах \u003Cbr\u003Edisabled - блокирует доступ и изменение элемента.\u003Cbr\u003Emaxlength - максимальное число введенных символов.\u003Cbr\u003Ename - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.\u003Cbr\u003Ereadonly - устанавливает, что поле не может изменяться пользователем.\u003Cbr\u003Erows - высота поля в строках текста \u003Cbr\u003Etabindex - порядок перехода между элементами при нажатии на клавишу Tab.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003ESelect\u003Cbr\u003E\u003Cp\u003Eтег \u003Cselect\u003E\u003Cbr\u003EПозволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. \u003Cbr\u003EШирина списка определяется самым широким текстом, указанным в теге \u003Coption\u003E, а также может изменяться с помощью стилей. \u003Cbr\u003E","\u003Cp\u003ESelect\u003Cbr\u003E\u003Cp\u003EАтрибуты для select\u003Cbr\u003Edisabled - блокирует доступ и изменение элемента.\u003Cbr\u003Emultiple - позволяет одновременно выбирать сразу несколько элементов списка.\u003Cbr\u003Ename - имя элемента для отправки на сервер или обращения через скрипты.\u003Cbr\u003Esize - количество отображаемых строк списка.\u003Cbr\u003Etabindex - определяет последовательность перехода между элементами при нажатии на клавишу Tab\u003Cbr\u003E","\u003Cp\u003EАтрибуты\u003Cbr\u003E\u003Cp\u003Eатрибут size\u003Cbr\u003EШирина текстового поля, которое определяется числом символов моноширинного шрифта (которые должны поместиться в видимой части поля). Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. \u003Cbr\u003Eатрибут tabindex\u003Cbr\u003EАтрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003Eатрибут readonly\u003Cbr\u003EКогда к тегу \u003Cinput\u003E добавляется атрибут readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. \u003Cbr\u003EТем не менее, состояние и содержимое поля можно менять с помощью скриптов.\u003Cbr\u003E\u003Cinput type=\"text\" readonly\u003E\u003Cbr\u003E\u003Cinput type=\"password\" readonly\u003E\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003Eатрибут disabled\u003Cbr\u003EБлокирует доступ и изменение поля формы. \u003Cbr\u003EОно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передается на сервер.\u003Cbr\u003E\u003Cinput type=\"...\" disabled\u003E\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003Eатрибут checked\u003Cbr\u003EЭтот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radio), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.\u003Cbr\u003E\u003Cinput type=\"radio\" checked\u003E\u003Cbr\u003E\u003Cinput type=\"checkbox\" checked\u003E\u003Cbr\u003E",H,"\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EЗАДАНИЕ:\u003Cbr\u003EСоздайте код, приведенный в данном примере, сохраните, откройте в браузере; протестируйте;\u003Cbr\u003Eнаберите произвольный текстовый фрагмент, а затем нажмите на кнопке Reset\u003Cbr\u003E","\u003Cp\u003EОтправка формы\u003Cbr\u003E\u003Cp\u003EКогда форма отправляется на сервер, данные для каждого элемента посылаются в виде пары «имя» - «значение», где \u003Cbr\u003Eимя – это значение атрибута name\u003Cbr\u003Eзначение – то, что ввел пользователь\u003Cbr\u003EПары «имя\u002Fзначение» посылаются через URL или скрытно – в зависимости от метода, указанного в атрибуте формы method\u003Cbr\u003EЕсли указан метод get, то данные будут видны в url после того, как форма будет отправлена\u003Cbr\u003E","\u003Cp\u003EОтправка формы\u003Cbr\u003E\u003Cp\u003EК примеру,\u003Cbr\u003Ewww.koe-chto-for-primer.com?myname=Robert\u003Cbr\u003E – данные передаются через url, и это элемент управления с name=myname и введенным значением Robert\u003Cbr\u003EЧтобы прочитать эту информацию на сервере, нужно использовать метод, соответствующий способу отправки\u003Cbr\u003E","\u003Cp\u003EОтправка формы\u003Cbr\u003E\u003Cp\u003EК примеру,\u003Cbr\u003E\u003C?php\u003Cbr\u003E\tprint(‘Your name is: ’ .$_GET[‘myname’]);\u003Cbr\u003E?\u003E\u003Cbr\u003E – описанные выше скрипт может быть помещен в файл, имя которого указано в атрибуте action для формы; этот файл читается на сервере после отправки формы, там же на сервере код выполняется и результат возвращается браузеру; \u003Cbr\u003EВ нашем случае мы использовали глобальную переменную $_GET – что соответствует выбранному методу (в противном случае нужна переменная $_POST)\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EHtml5 усовершенствовал поле \u003Cinput\u003E, увеличив количество возможных значений атрибута type.\u003Cbr\u003EТеперь типы говорят не только о том, какой ввод ожидается, но и о том, что делать с введенной информацией\u003Cbr\u003EБраузер обработает введенные данные в соответствии со значением атрибута type и сделает вывод – верны они или нет.\u003Cbr\u003EЭтот атрибут работает совместно с дополнительными атрибутами, необходимыми для ограничения и контроля данных, вводимых пользователем в реальном времени\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип email\u003Cbr\u003Eполе для ввода адреса электронной почты\u003Cbr\u003EРанее с этой целью использовался тип text, однако правильность ввода требовалось проверять с помощью JavaScript. Теперь браузер сам проверить правильность ввода e-mail.\u003Cbr\u003EЗадание: найдите самостоятельно примеры кода на JS, проверяющие корректность заполнения поля, отведенного под e-mail\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип email\u003Cbr\u003Eполе для ввода адреса электронной почты\u003Cbr\u003E\u003Cinput type=“email” name=“myemail”\u003E\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип search\u003Cbr\u003Eполе для организации поиска\u003Cbr\u003EДанный тип никак не контролирует ввод данных – это всего лишь способ сообщить браузеру о предназначении поля\u003Cbr\u003E\u003Cinput type=“search” name=“mysearch”\u003E\u003Cbr\u003EНекоторые браузеры меняют представление по умолчанию для этого элемента, давая пользователю подсказку, для чего используется это поле\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип url\u003Cbr\u003Eполе для сетевых адресов\u003Cbr\u003EДанный тип работает аналогично типу email, считает допустимыми только абсолютные url-адреса и возвращает ошибку, если значение не соответствует этому формату\u003Cbr\u003E\u003Cinput type=“url” name=“myurl”\u003E\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип tel\u003Cbr\u003Eполе для ввода телефонных номеров\u003Cbr\u003EДанный тип не требует какого-то определенного синтаксиса; служит лишь для напоминания браузеру о его особенности\u003Cbr\u003E\u003Cinput type=“tel” name=“mytel”\u003E\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип number\u003Cbr\u003Eполе для ввода только числовых данных\u003Cbr\u003EС этим типом можно использовать несколько полезных новых атрибутов\u003Cbr\u003Emin – определяет минимальное допустимое значение для данного поля\u003Cbr\u003Emax – определяет максимальное допустимое значение\u003Cbr\u003Estep – определяет шаг увеличения или уменьшения значения данного поля\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип number\u003Cbr\u003E\u003Cinput type=“number” name=“mynumber” min=“0” max=“20” step=“5”\u003E\u003Cbr\u003EВ данное поле вы сможете ввести только числа из 0; 5; 10; 15; 20 – в соответствии с установленными атрибутами ограничениями\u003Cbr\u003E \u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип range\u003Cbr\u003EЭтот тип ввода заставляет браузер создавать на странице новый тип элемента управления\u003Cbr\u003EОн позволяет пользователю выбрать значение из некоего числового диапазона\u003Cbr\u003EОбычно на экране этот элемент принимает вид ползунка или стрелочек, увеличивающих или уменьшающих значение (общего стандартного дизайна пока нет).\u003Cbr\u003EИспользуются атрибуты min, max, step\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип date\u003Cbr\u003Eполе для ввода дат\u003Cbr\u003EВ браузерах этот элемент управления выглядит как поле, при каждом щелчке на котором открывается календарь;\u003Cbr\u003Eинтерфейс данного элемента в спецификации не описывается; чаще всего используется формат «год-месяц-день»\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип week\u003Cbr\u003Eполе для выбора недели\u003Cbr\u003EАналогичен типу date; чаще всего используется синтаксис 2011-W50 – год-номер недели;\u003Cbr\u003EТип month\u003Cbr\u003Eполе для выбора месяца\u003Cbr\u003EАналогичен предыдущему типу; чаще всего используется формат год-месяц;\u003Cbr\u003EЗадание: добавьте данные объекты к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип time\u003Cbr\u003Eполе для обработки времени\u003Cbr\u003EПринимает формат часов и минут; обычно ожидается значение «часы:минуты:секунды»\u003Cbr\u003EТип datetime\u003Cbr\u003Eполе для ввода полной даты, включая время и часовой пояс\u003Cbr\u003EТип datetime-local\u003Cbr\u003Eполе для ввода полной даты, включая время, безчасового пояса\u003Cbr\u003EЗадание: добавьте данные объекты к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые типы полей\u003Cbr\u003E\u003Cp\u003EТип color\u003Cbr\u003EПоле, предоставляющее стандартный интерфейс для выбора цвета\u003Cbr\u003EОбычно в таком поле ожидается значение в шестнадцатеричном формате\u003Cbr\u003EЗадание: добавьте данный объект к предыдущему примеру\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут autocomplete\u003Cbr\u003EЭтот старый атрибут теперь описан в стандарте; может принимать два значения – on и off; значение по умолчанию on;\u003Cbr\u003EКогда значение атрибута равно off, то составляющие форму элементы input не заполняются автоматически, т.е. для них не отображаются списки ранее введенных значений.\u003Cbr\u003EДанный атрибут можно использовать и для всей формы – тогда он будет влиять на каждый элемент формы\u003Cbr\u003E\u003Cinput type=\"search\" name=\"mysearch\" autocomplete=\"off\"\u003E\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибуты novalidate и formnovalidate\u003Cbr\u003EОдна из особенностей форм html5 – встроенная возможность проверки. Корректность содержимого формы проверяется по умолчанию, автоматически.\u003Cbr\u003EЧтобы запретить такое поведение нужно добавить атрибут novalidate.\u003Cbr\u003EЭто булев атрибут используется в теге form\u003Cbr\u003EКогда он присутствует, форма посылается на сервер без проверки\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибуты novalidate и formnovalidate\u003Cbr\u003EИногда проверка нужна только при определенных обстоятельствах (допустим, информацию нужно сохранить, чтобы вернуться к ней позднее)\u003Cbr\u003EТогда атрибут formnovalidate нужно прописать к определенным тегам input\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EПри нажатии Save – проверки не будет, как при использовании кнопки Send \u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут placeholder\u003Cbr\u003EПредставляет собой короткую подсказку – слово или фразу, помогающие правильно ввести ожидаемые данные.\u003Cbr\u003EЗначение данного атрибута показывается внутри поля и исчезает, когда пользователь переводит фокус ввода на соответствующий элемент.\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут required\u003Cbr\u003EЭто булев атрибут, он не позволяет подтвердить отправку формы, если поле осталось пустым.\u003Cbr\u003EК примеру, в поле было внесено значение, но проверка правильности ввода не подтвердила допустимость, и поле считается пустым – при добавлении атрибута required браузер будет требовать обязательности заполнения поля в дополнение к проверке формата вводимых данных \u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут multiple\u003Cbr\u003EЭто булев атрибут, можно использовать с некоторыми типами ввода, чтобы разрешать пользователю вводить в одном поле несколько значений\u003Cbr\u003EЧтобы введенная информация прошла проверку, значения нужно разделять запятой\u003Cbr\u003EПри необходимости каждое из значений будет проверяться на допустимость формата\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут autofocus\u003Cbr\u003EПереводит фокус веб-страницы на выбранный элемент с учетом текущей ситуации: фокус не меняется, если пользователь уже выбрал другой элемент и работает с ним (в отличие от ранее используемого метода JS)\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут autofocus\u003Cbr\u003E\u003Cform\u003E\u003Cbr\u003E\t\u003Cfieldset\u003E\u003Cbr\u003E\t\t\u003Cp\u003EНажимая кнопку Далее, вы соглашаетесь со всеми условиями Лицензионного соглашения, как явными, так и указанными в неявной форме.\u003C\u002Fp\u003E\u003Cbr\u003E\t\t\t\t\u003Cbutton autofocus value=\"next\"\u003EДалее\u003C\u002Fbutton\u003E\u003Cbr\u003E\t\t\u003C\u002Fp\u003E\u003Cbr\u003E\t\u003C\u002Ffieldset\u003E\u003Cbr\u003E\u003C\u002Fform\u003E \u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут autofocus\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут pattern\u003Cbr\u003EПозволяет изменить способ проверки, используемый по умолчанию.\u003Cbr\u003EПозволяет настраивать правила валидации добавлением регулярных выражений\u003Cbr\u003EТ.е. самостоятельно прописать правило для проверки ввода, а с помощью атрибута title добавить сообщение об ошибке\u003Cbr\u003E! О регулярных выражениях можно почитать больше в курсе по JavaScript\u003Cbr\u003E","\u003Cp\u003EНовые атрибуты\u003Cbr\u003E\u003Cp\u003EАтрибут pattern\u003Cbr\u003EК примеру,\u003Cbr\u003E\u003Cinput pattern=\"[0-9]{6}\" name=\"pcode\" title=\"введите 6 цифр вашего почтового индекса\"\u003E\u003Cbr\u003E","\u003Cp\u003EНовые элементы\u003Cbr\u003E\u003Cp\u003EЭлемент datalist\u003Cbr\u003EПозволяет заранее построить список пунктов, которые в дальнейшем будут предлагаться в качестве вариантов заполнения полей ввода (для этого нужно добавить атрибут list)\u003Cbr\u003E","\u003Cp\u003EНовые элементы\u003Cbr\u003E\u003Cp\u003EЭлемент datalist\u003Cbr\u003EПосле того, как объявлен элемент datalist, остается лишь сослаться на этот список пунктов из элемента input, используя атрибут list (значение id из datalist)\u003Cbr\u003E","\u003Cp\u003EНовые элементы\u003Cbr\u003E\u003Cp\u003EЭлемент progress\u003Cbr\u003EИллюстрирует прогресс выполнения задачи.\u003Cbr\u003EЕго не обязательно использовать только с формами.\u003Cbr\u003EПринимает два атрибута, устанавливающие его статус и лимиты.\u003Cbr\u003EАтрибут value указывает, какая доля задачи уже выполнена, а атрибут max содержит значение, достижение которого соответствует завершению задачи\u003Cbr\u003E\u003Cprogress value=\"0\" max=\"100\"\u003E0%\u003C\u002Fprogress\u003E\u003Cbr\u003E","\u003Cp\u003EНовые элементы\u003Cbr\u003E\u003Cp\u003EЭлемент meter\u003Cbr\u003EИспользуется для отображения шкалы – известного диапазона (к примеру, пропускная способность)\u003Cbr\u003EАтрибуты min и max устанавливают границы диапазона, value определяет измеряемое значение, low, high и optimum используются для сегментирования диапазона и определения оптимальной позиции\u003Cbr\u003E\u003Cmeter value=\"60\" min=\"0\" max=\"100\" low=\"40\" high=\"80\" optimum=\"100\"\u003E60\u003C\u002Fmeter\u003E\u003Cbr\u003E","\u003Cp\u003EНовые элементы\u003Cbr\u003E\u003Cp\u003EЭлемент output\u003Cbr\u003EПредставляет собой особый результат вычисления\u003Cbr\u003EОбычно он используется для отображения результатов обработки каких-то значений элементами формы.\u003Cbr\u003EАтрибут for позволяет связать элемент output с исходными элементами, участвующими в расчетах, однако чаще всего ссылки на элементы создаются и модифицируются в коде JS\u003Cbr\u003EСинтаксис: \u003Coutput\u003Eзначение\u003C\u002Foutput\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы html-форм\u003Cbr\u003E\u003Cp\u003E\u003Cfieldset\u003E - предназначен для группировки элементов, связанных друг с другом; большинство браузеров нормально отображают фоновые цвета, фоновые изображения и границы для этого тега. \u003Cbr\u003E\u003Clegend\u003E - идет по структуре за тегом fieldset и в нем содержится название для группы – оно появится в центре верхней границы тега fieldset\u003Cbr\u003E\u003Cfieldset\u003E\u003Cbr\u003E\t\u003Clegend\u003EТекст\u003C\u002Flegend\u003E\u003Cbr\u003E\u003C\u002Ffieldset\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы html-форм\u003Cbr\u003E\u003Cp\u003EВАЖНО:\u003Cbr\u003EПри оформлении форм, элементы которых создаются через тег input, вместо задания стилевого класса можно использовать селектор атрибутов, который позволит настроить внешний вид формы, не обращаясь к классам.\u003Cbr\u003EК примеру, \u003Cbr\u003Einput[type=“text”] {\u003Cbr\u003E\tbackground-color: blue;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EКомпоновка\u003Cbr\u003E\u003Cp\u003EВсе, что надо для создания формы, - добавить несколько фрагментов текстовых и других элементов на веб-страницу.\u003Cbr\u003EОднако, зачастую визуально это получается беспорядочно.\u003Cbr\u003EУпорядочения при отображении форм можно добиться несколькими путями:\u003Cbr\u003Eтаблицы (очень и очень плохо);\u003Cbr\u003Eчерез css;\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы\u003Cbr\u003E\u003Cp\u003EДля стилизации форм можно использовать псевдоклассы, например, \u003Cbr\u003E:focus – позволяет создать селектор, изменяющий внешний вид текстового поля при щелчке кнопкой мыши или при переходе на него с помощью клавиши табуляции.\u003Cbr\u003E:checked – работает с переключателями и флажками; предназначен для стилизации этих элементов, но обычно веб-браузеры в отношении вида этих полей ведут себя сдержанно.\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы\u003Cbr\u003E\u003Cp\u003Eкроме того, элементы формы можно сделать активными и неактивными (через средства JavaScript) и использовать псевдоклассы :enabled и :disabled\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы\u003Cbr\u003E\u003Cp\u003E:valid и :invalid – обращение к элементу input с верно и неверно введенным значением\u003Cbr\u003E.text:valid {border-color:green;}\u003Cbr\u003E.text:invalid {border-color:red;}\u003Cbr\u003E:optional и :required – указывают стили для обязательных и дополнительных элементов\u003Cbr\u003E.name:optional {border-left-color: grey;}\u003Cbr\u003E.password:required {border-left-color: red;}\u003Cbr\u003E","\u003Cp\u003EПсевдоклассы\u003Cbr\u003E\u003Cp\u003E:in-range и :out-of-range – позволяют задавать стили для элементов с ограничением диапазона ввода (таких как number) в двух случаях: когда введенное значение лежит в заданных пределах и когда оно вне их.\u003Cbr\u003E.age:in-range {background:#eef;}\u003Cbr\u003E.age:out-of-range {background:#fee;}\u003Cbr\u003E","\u003Cp\u003EСпасибо за внимание\u003Cbr\u003E"],href:"\u002Finformatika\u002Fverstka-web-stranits-1",href_category:"\u002Finformatika",date:1628085646,related:[{id:595038,name:"Разработка ТЗ",href:"\u002Finformatika\u002Frazrabotka-tz",jpg:"jpg\u002F595038"},{id:91828,name:"Роль теории графов в программировании и информатике",href:"\u002Finformatika\u002Frol-teorii-grafov-v-programmirovanii-i",jpg:"jpg\u002F91828"},{id:13366,name:"Software metrics using constructive cost model",href:"\u002Finformatika\u002Fsoftware-metrics-using-constructive-cost-model",jpg:"jpg\u002F13366"},{id:278960,name:"Введение в методы параллельного программирования",href:"\u002Finformatika\u002Fvvedenie-v-metody-parallelnogo-programmirovaniya",jpg:"jpg\u002F278960"},{id:271807,name:"Прикладные компьютерные программы в обработке социологических данных. Вводная лекция",href:"\u002Finformatika\u002Fprikladnye-kompyuternye-programmy-v-obrabotke-sotsiologicheskih",jpg:"jpg\u002F271807"},{id:442943,name:"ow to get a real Calibration file from CUMMINS INCAL DVD useful with: Calterm III SW",href:"\u002Finformatika\u002Fow-to-get-a-real-calibration",jpg:"jpg\u002F442943"},{id:90667,name:"Методична система навчання інформатики в середній загальноосвітній школі. (Лекція 1)",href:"\u002Finformatika\u002Fmetodichna-sistema-navchannya-nformatiki-v-seredny",jpg:"jpg\u002F90667"},{id:293003,name:"Введение в Docker",href:"\u002Finformatika\u002Fvvedenie-v-docker",jpg:"jpg\u002F293003"},{id:7365,name:"Введение в R",href:"\u002Finformatika\u002Fvvedenie-v-r-1",jpg:"jpg\u002F7365"},{id:349680,name:"Жаңа ақпараттық оқыту технологиясы",href:"\u002Finformatika\u002Fzhaa-aparatty-oytu-tehnologiyasy",jpg:"jpg\u002F349680"},{id:314862,name:"Оформление движения товаров в феврале",href:"\u002Finformatika\u002Foformlenie-dvizheniya-tovarov-v-fevrale",jpg:"jpg\u002F314862"},{id:281540,name:"Основные элементы национальной инфраструктуры электронного правительства",href:"\u002Finformatika\u002Fosnovnye-elementy-natsionalnoy-infrastruktury-elektronnogo-pravitelstva",jpg:"jpg\u002F281540"},{id:580696,name:"Разработка сайта для фигуристов-любителей",href:"\u002Finformatika\u002Frazrabotka-sayta-dlya-figuristov-lyubiteley",jpg:"jpg\u002F580696"},{id:209174,name:"Классификация современных компьютеров",href:"\u002Finformatika\u002Fklassifikatsiya-sovremennyh-kompyuterov",jpg:"jpg\u002F209174"},{id:246983,name:"Введение в PHP. Базовый синтаксис",href:"\u002Finformatika\u002Fvvedenie-v-php-bazovyy-sintaksis",jpg:"jpg\u002F246983"},{id:16419,name:"Модель даних “сутність-зв’язок”",href:"\u002Finformatika\u002Fmodel-danih-sutnst-zvyazok",jpg:"jpg\u002F16419"},{id:223890,name:"История вычислительной техники",href:"\u002Finformatika\u002Fistoriya-vychislitelnoy-tehniki-8",jpg:"jpg\u002F223890"},{id:580159,name:"Web-сайт Онлайн кинотеатр",href:"\u002Finformatika\u002Fweb-sayt-onlayn-kinoteatr",jpg:"jpg\u002F580159"},{id:137009,name:"Лекция 7. Методы и средства обеспечения ИБ компьютерных систем",href:"\u002Finformatika\u002Flektsiya-7-metody-i-sredstva-obespecheniya",jpg:"jpg\u002F137009"},{id:1903,name:"Создание базы данных Приемная комиссия",href:"\u002Finformatika\u002Fsozdanie-bazy-dannyh-priemnaya-komissiya",jpg:"jpg\u002F1903"},{id:181150,name:"Основы информационной безопасности и защиты информации. Информационная безопасность в бизнесе",href:"\u002Finformatika\u002Fosnovy-informatsionnoy-bezopasnosti-i-zashchity-informatsii",jpg:"jpg\u002F181150"},{id:123621,name:"Набор мини-игр Monday",href:"\u002Finformatika\u002Fnabor-mini-igr-monday",jpg:"jpg\u002F123621"},{id:383094,name:"Электронные таблицы. Графики. Диаграммы. Гистограммы",href:"\u002Finformatika\u002Felektronnye-tablitsy-grafiki-diagrammy-gistogrammy",jpg:"jpg\u002F383094"},{id:184356,name:"Веб-аналитика. Часть 5: Отчеты групп: содержание, поведение, мониторинг",href:"\u002Finformatika\u002Fveb-analitika-chast-5-otchety-grupp",jpg:"jpg\u002F184356"},{id:194224,name:"Флэш-презентации",href:"\u002Finformatika\u002Fflesh-prezentatsii",jpg:"jpg\u002F194224"},{id:378029,name:"Технологии автоматизации тестирования и отладки ПО",href:"\u002Finformatika\u002Ftehnologii-avtomatizatsii-testirovaniya-i-otladki-po",jpg:"jpg\u002F378029"},{id:2710,name:"Технологии обработки данных. Сетевые технологии обработки данных. (Лекция 8)",href:"\u002Finformatika\u002Ftehnologii-obrabotki-dannyh-setevye-tehnologii-obrabotki",jpg:"jpg\u002F2710"},{id:595873,name:"Компоненты ОС. Ядро. Виды ядра. Лекция 2",href:"\u002Finformatika\u002Fkomponenty-os-yadro-vidy-yadra-lektsiya",jpg:"jpg\u002F595873"}],navigation:{next:"\u002Finformatika\u002Flazarus-znakomstvo-so-sredoy",next_name:"Lazarus. Знакомство со средой",prev:"\u002Finformatika\u002Fprotsedurnoe-programmirovanie",prev_name:"Процедурное программирование"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Верстка web-страниц","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images_before","category","both",88,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика","\u003Cp\u003EПример\u003Cbr\u003E",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>