HTML формы

Август 23, 2022

Содержание

3. Форма – это набор элементов, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные
6. GET - POST Главное отличие методов POST и GET заключается в способе передачи информации. В методе
7. Атрибуты формы accept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы Autocomplete
8. Атрибут type
11. Поддержка этих значений браузерами
13. Элементы формы Текстовые поля - для ввода текстовой информации maxlen - максимально допустимой длиной текста size
21. Загрузить файл:
29. Тег Создает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт
30. color Позволяет выбрать цвет из палитры цветов. Выберите цвет
31. date Выбор даты в календаре. Выберите дату
32. datetime-local Выбор даты и с локальным временем в календаре. Выберите дату
33. month Выбор месяца и года в календаре Выберите месяц
34. email Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но
35. number Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать
36. Добавлен тег текстового уровня для выведения результатов
37. range определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать
38. Атрибуты input Autofocus - Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать
39. Required - указывает, что данное поле должно быть обязательно заполнено перед отправкой. Pattern - Указывает регулярное
40. CSS+формы Псевдокласс :focus - Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть
41. Псевдокласс :required Применяет стилевые правила к тегу , у которого установлен атрибут required. Он позволяет выделять
42. Псевдокласс :optional Применяет стилевые правила к тегу , у которого не задан атрибут required. Он позволяет
43. Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.
44. Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно
45. Язык текста. Псевдокласс lang определяет язык текста того или иного элемента или документа в целом. HTML
46. Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда
48. . – любой символ
50. Жадный поиск берем выражение ".+". И строку 1. Первый символ шаблона – это кавычка ". 2.
51. Результат В жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы
52. Ленивый режим Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз». 1.
53. Задание: Составить регулярное выражение для: Дата (напр., 21/3/2006) Адрес email Тег HTML url Трехзначное число с
54. Маска ввода в полях формы на jQuery masked input — очередной плагин предназначенный для javascript фремворка
55. Настройка Далее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и
56. Пример В объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к
58. Скачать презентацию

Слайд 2

Слайд 3

Форма – это набор элементов, таких как поля ввода, поля выбора,

переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем.
Форма создается с помощью тега:

Слайд 4

Слайд 5

Слайд 6

GET - POST
Главное отличие методов POST и GET заключается в способе

передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Слайд 7

Атрибуты формы
accept-charset - Устанавливает кодировку, в которой сервер может принимать и

обрабатывать данные формы

Autocomplete - Включает автозаполнение полей формы.
Name - Имя формы.
Novalidate - Отменяет встроенную проверку данных формы на корректность ввода.
Target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Слайд 8

Атрибут type

Слайд 9

Слайд 10

Слайд 11

Поддержка этих значений браузерами

Слайд 12

Слайд 13

Элементы формы
Текстовые поля - для ввода текстовой информации

[size=размер_поля] [maxlen=длина_поля]>
maxlen - максимально допустимой длиной текста
size - количество знакомест
Value - в поле будет изначально отображаться значение данного атрибута

Слайд 14

Слайд 15

Слайд 16

Слайд 17

Слайд 18

Слайд 19

Слайд 20

Слайд 21

Загрузить файл:

Слайд 22

Слайд 23

Слайд 24

Слайд 25

Слайд 26

Слайд 27

Слайд 28

Слайд 29

Тег
Создает список вариантов, которые можно выбирать при наборе в текстовом

поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.

Выберите любимого персонажа:

Слайд 30

color
Позволяет выбрать цвет из палитры цветов.
Выберите цвет

Слайд 31

date
Выбор даты в календаре.
Выберите дату

Слайд 32

datetime-local
Выбор даты и с локальным временем в календаре.
Выберите дату

name="selectdatetimelocal" >

Слайд 33

month
Выбор месяца и года в календаре
Выберите месяц

Слайд 34

email
Текстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только

один адрес, но указав булев атрибут multiple="multiple" можно разрешить пользователю ввод нескольких адресов через запятую.

Слайд 35

number
Поле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать

значение.

Слайд 36

Добавлен тег текстового уровня для выведения результатов

Слайд 37

range
определяет поле, которые может содержать значения в определенном интервале. Отображается как

ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число).

Слайд 38

Атрибуты input
Autofocus - Автоматически устанавливает фокус в поле формы. В

таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Disabled - Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Заблокированное в поле значение не передается на сервер.
Placeholder - Выводит подсказывающий текст.
Readonly - Устанавливает, что поле не может изменяться пользователем.
Step - Шаг приращения для числовых полей.
Value - Значение элемента.
Multiple - указывает, что данное поле может принимать несколько значений одновременно

Слайд 39

Required - указывает, что данное поле должно быть обязательно заполнено перед

отправкой.
Pattern - Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Слайд 40

CSS+формы
Псевдокласс :focus
- Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им

может быть текстовое поле формы, в которое устанавливается курсор. Такими элементами могут быть теги

<br><p>HTML<br><span class="field"><br><input type="password" name="pass" class="form-text"><br></span><br><p>CSS<br>.form-text:focus { <br>background: #ffe; /* Цвет фона */ border: 1px solid #29B0D9; /* Параметры рамки */ <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/774276/slide-40.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/774276/slide-40.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-40.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-40.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-40.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдокласс :required
<br><p>Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он</div></h2><div class="slides-content">позволяет выделять поля обязательные к заполнению перед отправкой формы.<br>HTML<br><label for="email">E-mail</label><br><input id="email" type="text“ required><br></p><br>CSS<br>input:required {<br> 				border: 1px solid red; /* Красная рамка для обязательных полей */<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/774276/slide-41.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдокласс :optional Применяет стилевые правила к тегу , у которого не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-41.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-41.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-41.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-41.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдокласс :optional
<br><p>Применяет стилевые правила к тегу <input>, у которого не задан атрибут required.</div></h2><div class="slides-content">Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы.<br><p>Имя: <input name="name"></p> <br><p>Возраст: <input type="number" min="18" required name="old"></p> <p><input type="submit" value="Отправить"></p><br><style><br> input:optional { opacity: 0.5; /* Полупрозрачность */ } <br></style><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/774276/slide-42.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-42.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-42.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-42.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-42.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдокласс :valid
<br><p>Применяется к полям формы, содержимое которых проходит проверку в браузере</div></h2><div class="slides-content">на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте pattern<br>HTML<br><p><input type="email" required></p><br>CSS<br>input:valid { background: #dfd; /* Зеленый цвет фона */ }<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/774276/slide-43.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-43.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-43.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-43.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-43.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдокласс :invalid
<br><p>Применяется к полям формы, содержимое которых не соответствует указанному типу.</div></h2><div class="slides-content">Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.<br>HTML<br><p><input type="email" required></p><br>CSS<br>input:invalid { background: #fdd; /* Красный цвет фона */ }<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/774276/slide-44.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Язык текста. Псевдокласс lang определяет язык текста того или иного элемента" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-44.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-44.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-44.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-44.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Язык текста.
<br><p>Псевдокласс lang определяет язык текста того или иного элемента или документа в</div></h2><div class="slides-content">целом.<br><p>HTML<br><p lang="ru">Русский текст выделен синим</p>
<p lang="en">English text is chosen red</p> <br>CSS<br>p:lang(ru) {color: #00f;} 
p:lang(en) {color: #f00;} <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/774276/slide-45.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-45.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-45.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-45.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-45.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Псевдокласс :checked
<br><p>Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки</div></h2><div class="slides-content">(radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.<br>Псевдокласс :Псевдокласс :indeterminate<br>Псевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. <br><p>.checkbox:checked<br>{ <br>box-shadow: 0 0 0 3px rgba(255,255,0,.5);<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/774276/slide-46.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/774276/slide-46.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-46.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-46.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-46.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></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/774276/slide-47.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/774276/slide-47.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-47.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-47.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-47.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="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/774276/slide-48.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/774276/slide-48.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-48.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-48.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-48.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div></div></h2></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/774276/slide-49.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Жадный поиск берем выражение ".+". И строку 1. Первый символ шаблона" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-49.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-49.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-49.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-49.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Жадный поиск берем выражение ".+". И строку 
<br><p>1. Первый символ шаблона</div></h2><div class="slides-content">– это кавычка ".<br>2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит<br>3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»:<br>4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным.<br>5. Иными словами, он сокращает текущее совпадение на один символ:<br>6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '"', не совпадёт:<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/774276/slide-50.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/774276/slide-50.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-50.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-50.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-50.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></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/774276/slide-51.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/774276/slide-51.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-51.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-51.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-51.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>1. Первый шаг – тот же, кавычка '"' найдена на 3-й позиции:<br>2. Второй шаг – тот же, находим произвольный символ '.':<br>3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „"“.<br>4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:<br><p>Ленивость распространяется только на тот квантификатор, после которого стоит ?. <br><p>Ленивый режим без необходимости лишний раз квантификатор не повторит.<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/774276/slide-52.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание: Составить регулярное выражение для: Дата (напр., 21/3/2006) Адрес email Тег" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-52.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-52.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-52.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-52.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задание: Составить регулярное выражение для:<br>Дата (напр., 21/3/2006) <br>Адрес email <br>Тег HTML<br>url<br>Трехзначное число с</div></h2><div class="slides-content">2 знаками после точки (цена)<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/774276/slide-53.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Маска ввода в полях формы на jQuery masked input — очередной" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/774276/slide-53.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-53.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-53.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-53.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Маска ввода в полях формы на jQuery
<br><p>masked input — очередной плагин</div></h2><div class="slides-content">предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.<br>Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.<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/774276/slide-54.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/774276/slide-54.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-54.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-54.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-54.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><p>jQuery(function($){<br>   $("#date").mask("99/99/9999");<br>   $("#phone").mask("(999) 999-9999");<br>   $("#tin").mask("99-9999999");<br>   $("#ssn").mask("999-99-9999");<br>});<br><p>Функция плагина принимает 2 параметра первый — сама маска для ввода, второй — объект дополнительных параметров.<br><p>a — трактуется как буквенный символ из диапазона (A-Z,a-z)<br>9 — трактуется как числовой символ (0-9)<br>* — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)<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/774276/slide-55.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/774276/slide-55.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/774276/slide-55.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/774276/slide-55.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/774276/slide-55.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><p>jQuery(function($){<br>   $("#product").mask("99/99/9999",{placeholder:" "});<br>});<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"><button class="download-btn" type="submit">Скачать</button></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/himiya/atomno-molekulyarnoe-uchenie-3" class="navigation-link">Атомно-молекулярное учение</a></div><div class="navigation-item"><div>Следующая -</div><a href="/ekologiya/turismo-y-espacios-naturales-protegidos" class="navigation-link">Turismo y espacios naturales protegidos</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/computer-aided-manufacturing" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/705032/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/705032/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/705032/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/705032/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/705032/slide-0.jpg 1440w" class="slides-image related-itemImage"> Computer-aided manufacturing</a></div><div class="related-item"><a href="/informatika/internet-technology" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/458662/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/458662/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/458662/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/458662/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/458662/slide-0.jpg 1440w" class="slides-image related-itemImage"> Internet Technology</a></div><div class="related-item"><a href="/informatika/prezentaciya-quotosnovnye-komponenty-kompyuteraquot--skachat-prezentacii-po-informatike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1250627/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/1250627/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1250627/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1250627/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1250627/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация "Основные компоненты компьютера" - скачать презентации по Информатике</a></div><div class="related-item"><a href="/informatika/bezopasnyy-internet-66" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/723224/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/723224/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/723224/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/723224/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/723224/slide-0.jpg 1440w" class="slides-image related-itemImage"> Безопасный интернет</a></div><div class="related-item"><a href="/informatika/modelirovanie-i-formalizaciya-razrabotka-ekonomicheskix-modelej-v-srede-ms-excel-10-klass" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1420017/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/1420017/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1420017/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1420017/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1420017/slide-0.jpg 1440w" class="slides-image related-itemImage"> Моделирование и формализация: разработка экономических моделей в среде MS Excel. 10 класс</a></div><div class="related-item"><a href="/informatika/informatsionnye-tehnologii-129" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/547416/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/547416/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/547416/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/547416/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/547416/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационные технологии</a></div><div class="related-item"><a href="/informatika/programma-dlya-sozdaniya-tekstovyx-dokumentov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1329443/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/1329443/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1329443/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1329443/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1329443/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программа для создания текстовых документов</a></div><div class="related-item"><a href="/informatika/osnovnye-funktsii-clips" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/640591/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/640591/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/640591/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/640591/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/640591/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основные функции CLIPS</a></div><div class="related-item"><a href="/informatika/internet-sleng-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/682292/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/682292/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/682292/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/682292/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/682292/slide-0.jpg 1440w" class="slides-image related-itemImage"> Интернет-сленг</a></div><div class="related-item"><a href="/informatika/trebovaniya-k-razrabotke-prilozheniya-na-platforme-1s-predpriyatie-83" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1333041/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/1333041/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1333041/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1333041/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1333041/slide-0.jpg 1440w" class="slides-image related-itemImage"> Требования к разработке приложения на платформе 1С: Предприятие 8.3</a></div><div class="related-item"><a href="/informatika/trebovaniya-i-tendentsii-postroeniya-os" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/477097/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/477097/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/477097/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/477097/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/477097/slide-0.jpg 1440w" class="slides-image related-itemImage"> Требования и тенденции построения ОС</a></div><div class="related-item"><a href="/informatika/upravlenie-realnoy-i-virtualnoy-pamyatyu-osnovnye" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/519546/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/519546/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/519546/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/519546/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/519546/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление реальной и виртуальной памятью. Основные понятия. Схема динамического преобразования адресов. (Лекция 12)</a></div><div class="related-item"><a href="/informatika/primery-dlya-zadaniya-biznes-ideya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/600386/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/600386/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/600386/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/600386/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/600386/slide-0.jpg 1440w" class="slides-image related-itemImage"> Примеры для задания Бизнес-идея</a></div><div class="related-item"><a href="/informatika/operacii-soedineniya-vidy-operatora-join" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1326850/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/1326850/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1326850/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1326850/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1326850/slide-0.jpg 1440w" class="slides-image related-itemImage"> Операции соединения. Виды оператора JOIN</a></div><div class="related-item"><a href="/informatika/kak-samostoyatelno-oformit-kompyuternuyu-prezentatsiyu-esli" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/516378/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/516378/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/516378/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/516378/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/516378/slide-0.jpg 1440w" class="slides-image related-itemImage"> Как самостоятельно оформить компьютерную презентацию, если ты не дизайнер</a></div><div class="related-item"><a href="/informatika/22256-prezentaciya-quotalgoritmyquot--skachat-prezentacii-po-informatike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1150867/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/1150867/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1150867/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1150867/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1150867/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация "Алгоритмы" - скачать презентации по Информатике</a></div><div class="related-item"><a href="/informatika/frmoviy-znak" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/477929/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/477929/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/477929/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/477929/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/477929/slide-0.jpg 1440w" class="slides-image related-itemImage"> Фірмовий знак</a></div><div class="related-item"><a href="/informatika/antivirus-i-zashchita-operatsionnoy-sistemy-ot" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/496597/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/496597/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/496597/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/496597/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/496597/slide-0.jpg 1440w" class="slides-image related-itemImage"> Антивирус и защита операционной системы от несанкционированного взлома. Бесплатные антивирусы</a></div><div class="related-item"><a href="/informatika/baza-dannyx-tablicy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1310722/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/1310722/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1310722/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1310722/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1310722/slide-0.jpg 1440w" class="slides-image related-itemImage"> База данных. Таблицы</a></div><div class="related-item"><a href="/informatika/struktury-perechisleniya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/542922/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/542922/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/542922/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/542922/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/542922/slide-0.jpg 1440w" class="slides-image related-itemImage"> Структуры, перечисления</a></div><div class="related-item"><a href="/informatika/informaciya-i-znaniya-informacionnye-processy-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1164599/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/1164599/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1164599/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1164599/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1164599/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информация и знания. Информационные процессы</a></div><div class="related-item"><a href="/informatika/metody-obektov-zanyatie-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/563622/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/563622/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/563622/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/563622/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/563622/slide-0.jpg 1440w" class="slides-image related-itemImage"> Методы объектов. (Занятие 8)</a></div><div class="related-item"><a href="/informatika/maket-arhitektu-rnyy-make-t" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1450819/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/1450819/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1450819/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1450819/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1450819/slide-0.jpg 1440w" class="slides-image related-itemImage"> Макет. Архитекту́рный маке́т</a></div><div class="related-item"><a href="/informatika/lecture-01-the-basic-concepts-of" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/532579/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/532579/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/532579/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/532579/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/532579/slide-0.jpg 1440w" class="slides-image related-itemImage"> Lecture 01. The basic concepts of SQL</a></div><div class="related-item"><a href="/informatika/proektirovanie-parametricheskix-zaprosov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1324001/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/1324001/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1324001/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1324001/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1324001/slide-0.jpg 1440w" class="slides-image related-itemImage"> Проектирование параметрических запросов</a></div><div class="related-item"><a href="/informatika/sozdanie-sayta-it-i-ikt-budushchee" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/674991/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/674991/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/674991/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/674991/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/674991/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание сайта IT и IKT - будущее человечества</a></div><div class="related-item"><a href="/informatika/arhivatsiya-faylov-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/672126/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/672126/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/672126/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/672126/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/672126/slide-0.jpg 1440w" class="slides-image related-itemImage"> Архивация файлов</a></div><div class="related-item"><a href="/informatika/sortirovka-i-poisk-dannyh-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/519160/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/519160/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/519160/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/519160/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/519160/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сортировка и поиск данных</a></div></div></div></div></div></div></div></main><footer class="footer"><div class="layout"><div class="footer-text">Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.</div><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-text"><a href="/page/dlyapravoobladatelei">Для правообладателей</a></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){return {data:{meta:{result:{meta:{h1:k,main_text:a,main_title:l,main_description:m,main_keywords:n,main_image:a},app:{logo_image:a,logo_image_width:o,logo_image_height:p,logo_text:q,image_width_full:r,image_width_min:s,recaptcha_key:t,yandex_search:u,ya_context:d,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:v,footer_before:w,footer:x,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C},colors:{header_text:j,header_bg:D,accent:E}},social:F}},item:{result:{id:774276,name:"HTML формы",category:G,count:57,jpg:"jpg\u002F774276",hits:45,download:b,h1:a,meta:{h1:"HTML формы ",title:"HTML формы презентация",description:"HTML формы - Информатика, презентация, доклад, проект, конспект",keywords:"HTML формы, Информатика, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс",download_link:a},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему HTML формы, из раздела: Информатика.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EФорма – это набор элементов, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. \u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EФорма создается с помощью тега:\u003Cbr\u003E\u003Cbr\u003E\u003CFORM\u003E\u003Cbr\u003E\u003C\u002FFORM\u003E\u003Cbr\u003E\u003Cbr\u003E",texts:["\u003Cp\u003EHTML формы\u003Cbr\u003E",a,"\u003Cp\u003EФорма – это набор элементов, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. \u003Cbr\u003E\u003Cbr\u003EФорма создается с помощью тега:\u003Cbr\u003E\u003CFORM\u003E\u003Cbr\u003E\u003C\u002FFORM\u003E\u003Cbr\u003E",a,a,"\u003Cp\u003EGET - POST\u003Cbr\u003E\u003Cp\u003EГлавное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.\u003Cbr\u003Ehttp:\u002F\u002Fwww.htmlbook.ru\u002Fcgi-bin\u002Fhandler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5\u003Cbr\u003E","\u003Cp\u003EАтрибуты формы\u003Cbr\u003E\u003Cp\u003Eaccept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы\u003Cbr\u003E\u003Cform action=\"handler.php\" accept-charset=\"windows-1251\"\u003E\u003Cbr\u003EAutocomplete - Включает автозаполнение полей формы.\u003Cbr\u003EName - Имя формы.\u003Cbr\u003ENovalidate - Отменяет встроенную проверку данных формы на корректность ввода.\u003Cbr\u003ETarget - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.\u003Cbr\u003E","\u003Cp\u003EАтрибут type\u003Cbr\u003E",a,a,"\u003Cp\u003EПоддержка этих значений браузерами\u003Cbr\u003E",a,"\u003Cp\u003EЭлементы формы\u003Cbr\u003E\u003Cp\u003EТекстовые поля - для ввода текстовой информации\u003Cbr\u003E\u003Cinput type=text name=имя_параметра [value=значение] [size=размер_поля] [maxlen=длина_поля]\u003E \u003Cbr\u003E maxlen - максимально допустимой длиной текста \u003Cbr\u003Esize - количество знакомест\u003Cbr\u003EValue - в поле будет изначально отображаться значение данного атрибута\u003Cbr\u003E\u003Cbr\u003E",a,a,a,a,a,a,a,"\u003Cp\u003E\u003Cform enctype=\"multipart\u002Fform-data\" action=\"upload.php\" method=\"post\"\u003E \u003Cbr\u003E Загрузить файл: \u003Cinput name=\"my_file\" type=\"file\"\u003E \u003Cbr\u003E  \u003Cinput type=\"submit\" value=\"Отправить\"\u003E \u003Cbr\u003E\u003C\u002Fform\u003E\u003Cbr\u003E",a,a,a,a,a,a,a,"\u003Cp\u003EТег \u003Cdatalist\u003E\r\n\u003Cbr\u003E\u003Cp\u003EСоздает список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или наборе текста.\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВыберите любимого персонажа:\u003C\u002Fp\u003E \u003Cp\u003E\u003Cinput list=\"character\"\u003E\u003Cbr\u003E \u003Cdatalist id=\"character\"\u003E \u003Coption value=\"Чебурашка\"\u003E\u003C\u002Foption\u003E \u003Coption value=\"Крокодил Гена\"\u003E\u003C\u002Foption\u003E \u003Coption value=\"Шапокляк\"\u003E\u003C\u002Foption\u003E \u003Cbr\u003E\u003C\u002Fdatalist\u003E\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003Ecolor\r\n\u003Cbr\u003E\u003Cp\u003EПозволяет выбрать цвет из палитры цветов.\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВыберите цвет \u003Cinput type=\"color\" name=\"selectcolor\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003Edate\r\n\u003Cbr\u003E\u003Cp\u003EВыбор даты в календаре.\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВыберите дату \u003Cinput type=\"date\" name=\"selectdate\" \u003E\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003Edatetime-local\r\n\r\n\u003Cbr\u003E\u003Cp\u003EВыбор даты и с локальным временем в календаре.\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВыберите дату \u003Cinput type=\"datetime-local\" name=\"selectdatetimelocal\" \u003E\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003Emonth\r\n\r\n\u003Cbr\u003E\u003Cp\u003EВыбор месяца и года в календаре\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВыберите месяц \u003Cinput type=\"month\" name=\"selectmonth\" \u003E\u003C\u002Fp\u003E\u003Cbr\u003E","\u003Cp\u003Eemail\u003Cbr\u003E\u003Cp\u003EТекстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один адрес, но указав булев атрибут multiple=\"multiple\" можно разрешить пользователю ввод нескольких адресов через запятую.\u003Cbr\u003E\u003Cinput type=\"email\" placeholder=\"Ваша почта\"\u002F\u003E  \u003Cbr\u003E","\u003Cp\u003Enumber\u003Cbr\u003E\u003Cp\u003EПоле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение.\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"number\" step=2 \u002F\u003E\u003Cbr\u003E","\u003Cp\u003EДобавлен тег текстового уровня \u003Coutput\u003E\u003C\u002Foutput\u003E для выведения результатов\u003Cbr\u003E","\u003Cp\u003Erange\u003Cbr\u003E\u003Cp\u003Eопределяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число). \u003Cbr\u003E\u003Cp\u003E\u003Cinput name='range' type='range' min='1' max='5' \u002F\u003E \u003Cbr\u003E","\u003Cp\u003EАтрибуты input \u003Cbr\u003E\u003Cp\u003EAutofocus - Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.\u003Cbr\u003EDisabled - Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Заблокированное в поле значение не передается на сервер.\u003Cbr\u003EPlaceholder - Выводит подсказывающий текст.\u003Cbr\u003EReadonly - Устанавливает, что поле не может изменяться пользователем.\u003Cbr\u003EStep - Шаг приращения для числовых полей.\u003Cbr\u003EValue - Значение элемента.\u003Cbr\u003EMultiple - указывает, что данное поле может принимать несколько значений одновременно\r\n\r\n\u003Cbr\u003E\t\u003Cbr\u003E","\u003Cp\u003ERequired -  указывает, что данное поле должно быть обязательно заполнено перед отправкой.\u003Cbr\u003EPattern - Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.\u003Cbr\u003E","\u003Cp\u003ECSS+формы\u003Cbr\u003E\u003Cp\u003EПсевдокласс :focus \u003Cbr\u003E- Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. Такими элементами могут быть теги \u003Ca\u003E \u003Cinput\u003E \u003Cselect\u003E и \u003Ctextarea\u003E\u003Cbr\u003E\u003Cp\u003EHTML\u003Cbr\u003E\u003Cspan class=\"field\"\u003E\u003Cbr\u003E\u003Cinput type=\"password\" name=\"pass\" class=\"form-text\"\u003E\u003Cbr\u003E\u003C\u002Fspan\u003E\u003Cbr\u003E\u003Cp\u003ECSS\u003Cbr\u003E.form-text:focus { \u003Cbr\u003Ebackground: #ffe; \u002F* Цвет фона *\u002F border: 1px solid #29B0D9; \u002F* Параметры рамки *\u002F \u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EПсевдокласс :required\r\n\u003Cbr\u003E\u003Cp\u003EПрименяет стилевые правила к тегу \u003Cinput\u003E, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.\u003Cbr\u003EHTML\u003Cbr\u003E\u003Clabel for=\"email\"\u003EE-mail\u003C\u002Flabel\u003E\u003Cbr\u003E\u003Cinput id=\"email\" type=\"text“ required\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003Einput:required {\u003Cbr\u003E \t\t\t\tborder: 1px solid red; \u002F* Красная рамка для обязательных полей *\u002F\u003Cbr\u003E\t\t\t\t }\u003Cbr\u003E","\u003Cp\u003EПсевдокласс :optional\r\n\u003Cbr\u003E\u003Cp\u003EПрименяет стилевые правила к тегу \u003Cinput\u003E, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы.\u003Cbr\u003E\u003Cp\u003EИмя: \u003Cinput name=\"name\"\u003E\u003C\u002Fp\u003E \u003Cbr\u003E\u003Cp\u003EВозраст: \u003Cinput type=\"number\" min=\"18\" required name=\"old\"\u003E\u003C\u002Fp\u003E \u003Cp\u003E\u003Cinput type=\"submit\" value=\"Отправить\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cstyle\u003E\u003Cbr\u003E input:optional { opacity: 0.5; \u002F* Полупрозрачность *\u002F } \u003Cbr\u003E\u003C\u002Fstyle\u003E\u003Cbr\u003E","\u003Cp\u003EПсевдокласс :valid\r\n\u003Cbr\u003E\u003Cp\u003EПрименяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type=\"number\" вводится число, а не буквы, для type=\"email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте pattern\u003Cbr\u003EHTML\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"email\" required\u003E\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003Einput:valid { background: #dfd; \u002F* Зеленый цвет фона *\u002F }\u003Cbr\u003E","\u003Cp\u003EПсевдокласс :invalid\r\n\u003Cbr\u003E\u003Cp\u003EПрименяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type=\"number\" должно вводиться число, а не буквы, для type=\"email\" корректный адрес электронной почты.\u003Cbr\u003EHTML\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"email\" required\u003E\u003C\u002Fp\u003E\u003Cbr\u003ECSS\u003Cbr\u003Einput:invalid { background: #fdd; \u002F* Красный цвет фона *\u002F }\u003Cbr\u003E","\u003Cp\u003EЯзык текста.\r\n\u003Cbr\u003E\u003Cp\u003EПсевдокласс lang определяет язык текста того или иного элемента или документа в целом.\u003Cbr\u003E\u003Cp\u003EHTML\u003Cbr\u003E\u003Cp lang=\"ru\"\u003EРусский текст выделен синим\u003C\u002Fp\u003E\r\n\u003Cp lang=\"en\"\u003EEnglish text is chosen red\u003C\u002Fp\u003E \u003Cbr\u003ECSS\u003Cbr\u003Ep:lang(ru) {color: #00f;} \r\np:lang(en) {color: #f00;} \u003Cbr\u003E","\u003Cp\u003EПсевдокласс :checked\r\n\u003Cbr\u003E\u003Cp\u003EПсевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега \u003Cinput\u003E или пользователем.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003EПсевдокласс :Псевдокласс :indeterminate\u003Cbr\u003EПсевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. \u003Cbr\u003E\u003Cp\u003E.checkbox:checked\u003Cbr\u003E{ \u003Cbr\u003Ebox-shadow: 0 0 0 3px rgba(255,255,0,.5);\u003Cbr\u003E } \u003Cbr\u003E",a,"\u003Cp\u003E. – любой символ \u003Cbr\u003E",a,"\u003Cp\u003EЖадный поиск берем выражение \".+\". И строку \r\n\u003Cbr\u003E\u003Cp\u003E1. Первый символ шаблона – это кавычка \".\u003Cbr\u003E2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит\u003Cbr\u003E3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»:\u003Cbr\u003E4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным.\u003Cbr\u003E5. Иными словами, он сокращает текущее совпадение на один символ:\u003Cbr\u003E6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '\"', не совпадёт:\u003Cbr\u003E","\u003Cp\u003EРезультат\u003Cbr\u003E\u003Cp\u003EВ жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы найти соответствие.\u003Cbr\u003E","\u003Cp\u003EЛенивый режим\r\n\u003Cbr\u003E\u003Cp\u003EЛенивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз».\u003Cbr\u003E1. Первый шаг – тот же, кавычка '\"' найдена на 3-й позиции:\u003Cbr\u003E2. Второй шаг – тот же, находим произвольный символ '.':\u003Cbr\u003E3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '\"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „\"“.\u003Cbr\u003E4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:\u003Cbr\u003E\u003Cp\u003EЛенивость распространяется только на тот квантификатор, после которого стоит ?. \u003Cbr\u003E\u003Cp\u003EЛенивый режим без необходимости лишний раз квантификатор не повторит.\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EЗадание: Составить регулярное выражение для:\u003Cbr\u003EДата (напр., 21\u002F3\u002F2006) \u003Cbr\u003EАдрес email \u003Cbr\u003EТег HTML\u003Cbr\u003Eurl\u003Cbr\u003EТрехзначное число с 2 знаками после точки (цена)\u003Cbr\u003E","\u003Cp\u003EМаска ввода в полях формы на jQuery\r\n\u003Cbr\u003E\u003Cp\u003Emasked input — очередной плагин предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.\u003Cbr\u003EПлагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.\u003Cbr\u003EПодключение:\u003Cbr\u003E","\u003Cp\u003EНастройка\u003Cbr\u003E\u003Cp\u003EДалее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и передать в нее необходимые параметры:\u003Cbr\u003E\u003Cp\u003EjQuery(function($){\u003Cbr\u003E   $(\"#date\").mask(\"99\u002F99\u002F9999\");\u003Cbr\u003E   $(\"#phone\").mask(\"(999) 999-9999\");\u003Cbr\u003E   $(\"#tin\").mask(\"99-9999999\");\u003Cbr\u003E   $(\"#ssn\").mask(\"999-99-9999\");\u003Cbr\u003E});\u003Cbr\u003E\u003Cp\u003EФункция плагина принимает 2 параметра первый — сама маска для ввода, второй — объект дополнительных параметров.\u003Cbr\u003E\u003Cp\u003Ea — трактуется как буквенный символ из диапазона (A-Z,a-z)\u003Cbr\u003E9 — трактуется как числовой символ (0-9)\u003Cbr\u003E* — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003EВ объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к примеру вы захотели изменить его на пробел\u003Cbr\u003E\u003Cp\u003EjQuery(function($){\u003Cbr\u003E   $(\"#product\").mask(\"99\u002F99\u002F9999\",{placeholder:\" \"});\u003Cbr\u003E});\u003Cbr\u003E","\u003Cp\u003EЗадание\u003Cbr\u003E"],href:"\u002Finformatika\u002Fhtml-formy-2",href_category:"\u002Finformatika",date:1661251652,related:[{id:705032,name:"Computer-aided manufacturing",href:"\u002Finformatika\u002Fcomputer-aided-manufacturing",jpg:"jpg\u002F705032"},{id:458662,name:"Internet Technology",href:"\u002Finformatika\u002Finternet-technology",jpg:"jpg\u002F458662"},{id:1250627,name:"Презентация \"Основные компоненты компьютера\" - скачать презентации по Информатике",href:"\u002Finformatika\u002Fprezentaciya-quotosnovnye-komponenty-kompyuteraquot--skachat-prezentacii-po-informatike",jpg:"jpg\u002F1250627"},{id:723224,name:"Безопасный интернет",href:"\u002Finformatika\u002Fbezopasnyy-internet-66",jpg:"jpg\u002F723224"},{id:1420017,name:"Моделирование и формализация: разработка экономических моделей в среде MS Excel. 10 класс",href:"\u002Finformatika\u002Fmodelirovanie-i-formalizaciya-razrabotka-ekonomicheskix-modelej-v-srede-ms-excel-10-klass",jpg:"jpg\u002F1420017"},{id:547416,name:"Информационные технологии",href:"\u002Finformatika\u002Finformatsionnye-tehnologii-129",jpg:"jpg\u002F547416"},{id:1329443,name:"Программа для создания текстовых документов",href:"\u002Finformatika\u002Fprogramma-dlya-sozdaniya-tekstovyx-dokumentov",jpg:"jpg\u002F1329443"},{id:640591,name:"Основные функции CLIPS",href:"\u002Finformatika\u002Fosnovnye-funktsii-clips",jpg:"jpg\u002F640591"},{id:682292,name:"Интернет-сленг",href:"\u002Finformatika\u002Finternet-sleng-1",jpg:"jpg\u002F682292"},{id:1333041,name:"Требования к разработке приложения на платформе 1С: Предприятие 8.3",href:"\u002Finformatika\u002Ftrebovaniya-k-razrabotke-prilozheniya-na-platforme-1s-predpriyatie-83",jpg:"jpg\u002F1333041"},{id:477097,name:"Требования и тенденции построения ОС",href:"\u002Finformatika\u002Ftrebovaniya-i-tendentsii-postroeniya-os",jpg:"jpg\u002F477097"},{id:519546,name:"Управление реальной и виртуальной памятью. Основные понятия. Схема динамического преобразования адресов. (Лекция 12)",href:"\u002Finformatika\u002Fupravlenie-realnoy-i-virtualnoy-pamyatyu-osnovnye",jpg:"jpg\u002F519546"},{id:600386,name:"Примеры для задания Бизнес-идея",href:"\u002Finformatika\u002Fprimery-dlya-zadaniya-biznes-ideya",jpg:"jpg\u002F600386"},{id:1326850,name:"Операции соединения. Виды оператора JOIN",href:"\u002Finformatika\u002Foperacii-soedineniya-vidy-operatora-join",jpg:"jpg\u002F1326850"},{id:516378,name:"Как самостоятельно оформить компьютерную презентацию, если ты не дизайнер",href:"\u002Finformatika\u002Fkak-samostoyatelno-oformit-kompyuternuyu-prezentatsiyu-esli",jpg:"jpg\u002F516378"},{id:1150867,name:"Презентация \"Алгоритмы\" - скачать презентации по Информатике",href:"\u002Finformatika\u002F22256-prezentaciya-quotalgoritmyquot--skachat-prezentacii-po-informatike",jpg:"jpg\u002F1150867"},{id:477929,name:"Фірмовий знак",href:"\u002Finformatika\u002Ffrmoviy-znak",jpg:"jpg\u002F477929"},{id:496597,name:"Антивирус и защита операционной системы от несанкционированного взлома. Бесплатные антивирусы",href:"\u002Finformatika\u002Fantivirus-i-zashchita-operatsionnoy-sistemy-ot",jpg:"jpg\u002F496597"},{id:1310722,name:"База данных. Таблицы",href:"\u002Finformatika\u002Fbaza-dannyx-tablicy",jpg:"jpg\u002F1310722"},{id:542922,name:"Структуры, перечисления",href:"\u002Finformatika\u002Fstruktury-perechisleniya-1",jpg:"jpg\u002F542922"},{id:1164599,name:"Информация и знания. Информационные процессы",href:"\u002Finformatika\u002Finformaciya-i-znaniya-informacionnye-processy-1",jpg:"jpg\u002F1164599"},{id:563622,name:"Методы объектов. (Занятие 8)",href:"\u002Finformatika\u002Fmetody-obektov-zanyatie-8",jpg:"jpg\u002F563622"},{id:1450819,name:"Макет. Архитекту́рный маке́т",href:"\u002Finformatika\u002Fmaket-arhitektu-rnyy-make-t",jpg:"jpg\u002F1450819"},{id:532579,name:"Lecture 01. The basic concepts of SQL",href:"\u002Finformatika\u002Flecture-01-the-basic-concepts-of",jpg:"jpg\u002F532579"},{id:1324001,name:"Проектирование параметрических запросов",href:"\u002Finformatika\u002Fproektirovanie-parametricheskix-zaprosov",jpg:"jpg\u002F1324001"},{id:674991,name:"Создание сайта IT и IKT - будущее человечества",href:"\u002Finformatika\u002Fsozdanie-sayta-it-i-ikt-budushchee",jpg:"jpg\u002F674991"},{id:672126,name:"Архивация файлов",href:"\u002Finformatika\u002Farhivatsiya-faylov-3",jpg:"jpg\u002F672126"},{id:519160,name:"Сортировка и поиск данных",href:"\u002Finformatika\u002Fsortirovka-i-poisk-dannyh-3",jpg:"jpg\u002F519160"}],navigation:{next:"\u002Fekologiya\u002Fturismo-y-espacios-naturales-protegidos",next_name:"Turismo y espacios naturales protegidos",prev:"\u002Fhimiya\u002Fatomno-molekulyarnoe-uchenie-3",prev_name:"Атомно-молекулярное учение"}}},categories:{result:[{id:H,ordering:b,name:"Разное",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес и предпринимательство",pseudoname:"biznes-i-predprinimatelstvo"},{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:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{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:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:h,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:I,SITE_HOST:"vseprezentacii.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fvseprezentacii.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.6bbe8d3f.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.6bbe8d3f.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.6bbe8d3f.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.6bbe8d3f.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.6bbe8d3f.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.6bbe8d3f.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.6bbe8d3f.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.6bbe8d3f.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.6bbe8d3f.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.6bbe8d3f.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.6bbe8d3f.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.6bbe8d3f.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.6bbe8d3f.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.6bbe8d3f.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"94843251",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:k,main_text:a,main_title:l,main_description:m,main_keywords:n,main_image:a},app:{logo_image:a,logo_image_width:o,logo_image_height:p,logo_text:q,image_width_full:r,image_width_min:s,recaptcha_key:t,yandex_search:u,ya_context:d,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:v,footer_before:w,footer:x,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C},colors:{header_text:j,header_bg:D,accent:E}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",11,"h2","#ffffff","Презентации, проекты в PowerPoint","Презентации в PowerPoint","Презентации, проекты, доклады в PowerPoint ","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон,  доклад, проект, скачать",28,32,"VsePrezentacii.com",720,480,"6LdGr9gnAAAAAKdcDqFL5n46upSHwwYHs5ccQSJh","3212391","abusetheslide@ya.ru","Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.","\u003Ca href=\"\u002Fpage\u002Fdlyapravoobladatelei\"\u003EДля правообладателей\u003C\u002Fa\u003E","div","images_before","category","both",77,"#333333","#8a8888","\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","Информатика",1,"VsePrezentacii","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.08fba208.js" crossorigin></script></body>
</html>

HTML формы

Содержание

Форма – это набор элементов, таких как поля ввода, поля выбора,

GET - POSTГлавное отличие методов POST и GET заключается в способе

Атрибуты формыaccept-charset - Устанавливает кодировку, в которой сервер может принимать и

Атрибут type

Поддержка этих значений браузерами

Элементы формыТекстовые поля - для ввода текстовой информации

Загрузить файл:

Тег Создает список вариантов, которые можно выбирать при наборе в текстовом

color Позволяет выбрать цвет из палитры цветов.Выберите цвет

date Выбор даты в календаре.Выберите дату

datetime-local Выбор даты и с локальным временем в календаре.Выберите дату

month Выбор месяца и года в календареВыберите месяц

emailТекстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только

numberПоле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать