HTML формы презентация

Содержание

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

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

Слайд 1HTML формы
Данильченко Анна Александровна
Преподаватель кафедры программного обеспечения систем ЖГТУ

Слайд 2

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

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

Форма создается с помощью тега:

Слайд 4

Слайд 5

Слайд 6GET - 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Тег
Создает список вариантов, которые можно выбирать при наборе в текстовом

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

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

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

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

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

name="selectdatetimelocal" >

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

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

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

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

значение.

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

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

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

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

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

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

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

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

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

<br><br><p>HTML<br><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 class="image">
                                <a href="/img/tmb/4/392272/4871c34f43d71ae28269352ac24c3d57-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="CSS+формыПсевдокласс :focus - Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор. Такими элементами могут быть теги    и HTMLCSS.form-text:focus { background: #ffe; /* Цвет фона */ border: 1px solid #29B0D9; /* Параметры рамки */ }"><img src="/img/tmb/4/392272/4871c34f43d71ae28269352ac24c3d57-800x.jpg" title="CSS+формыПсевдокласс :focus - Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide41">
                            <h2><a href="/img/tmb/4/392272/e60418b6c910382ad6ad815239fc5d9a-800x.jpg" target="_blank">Слайд 41</a>Псевдокласс :required
<br>Применяет стилевые правила к тегу , у которого установлен атрибут required. Он</h2>
                                                            <div class="text">
                                    позволяет выделять поля обязательные к заполнению перед отправкой формы.<br>HTML<br><p><br><label for="email">E-mail</label><br><input id="email" type="text“ required><br></p><br><br>CSS<br>input:required {<br> 				border: 1px solid red; /* Красная рамка для обязательных полей */<br>				 }<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/e60418b6c910382ad6ad815239fc5d9a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Псевдокласс :required Применяет стилевые правила к тегу , у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.HTMLE-mail"><img src="/img/tmb/4/392272/e60418b6c910382ad6ad815239fc5d9a-800x.jpg" title="Псевдокласс :required Применяет стилевые правила к тегу , у которого установлен атрибут required. Он позволяет выделять поля" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide42">
                            <h2><a href="/img/tmb/4/392272/4396429051e18785167a33cc97071cc4-800x.jpg" target="_blank">Слайд 42</a>Псевдокласс :optional
<br>Применяет стилевые правила к тегу , у которого не задан атрибут required.</h2>
                                                            <div class="text">
                                    Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы.<br><br><p>Имя: <input name="name"></p> <br><p>Возраст: <input type="number" min="18" required name="old"></p> <p><input type="submit" value="Отправить"></p><br><br><style><br> input:optional { opacity: 0.5; /* Полупрозрачность */ } <br></style><br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/4396429051e18785167a33cc97071cc4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Псевдокласс :optional Применяет стилевые правила к тегу , у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы.Имя:  Возраст:   input:optional { opacity: 0.5; /* Полупрозрачность */ } "><img src="/img/tmb/4/392272/4396429051e18785167a33cc97071cc4-800x.jpg" title="Псевдокласс :optional Применяет стилевые правила к тегу , у которого не задан атрибут required. Он позволяет выделять" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide43">
                            <h2><a href="/img/tmb/4/392272/441c1cd1344042e99a609e8dc057ceb2-800x.jpg" target="_blank">Слайд 43</a>Псевдокласс :valid
<br>Применяется к полям формы, содержимое которых проходит проверку в браузере</h2>
                                                            <div class="text">
                                    на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте pattern<br><br>HTML<br><p><input type="email" required></p><br><br>CSS<br>input:valid { background: #dfd; /* Зеленый цвет фона */ }<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/441c1cd1344042e99a609e8dc057ceb2-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте patternHTMLCSSinput:valid { background: #dfd; /* Зеленый цвет фона */ }"><img src="/img/tmb/4/392272/441c1cd1344042e99a609e8dc057ceb2-800x.jpg" title="Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide44">
                            <h2><a href="/img/tmb/4/392272/e6262112fe782b062c540ad9d8929680-800x.jpg" target="_blank">Слайд 44</a>Псевдокласс :invalid
<br>Применяется к полям формы, содержимое которых не соответствует указанному типу.</h2>
                                                            <div class="text">
                                    Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.<br><br>HTML<br><p><input type="email" required></p><br><br>CSS<br>input:invalid { background: #fdd; /* Красный цвет фона */ }<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/e6262112fe782b062c540ad9d8929680-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.HTMLCSSinput:invalid { background: #fdd; /* Красный цвет фона */ }"><img src="/img/tmb/4/392272/e6262112fe782b062c540ad9d8929680-800x.jpg" title="Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide45">
                            <h2><a href="/img/tmb/4/392272/345d71f24214ffd7baf6688d1c7a1772-800x.jpg" target="_blank">Слайд 45</a>Язык текста.
<br>Псевдокласс lang определяет язык текста того или иного элемента или документа в</h2>
                                                            <div class="text">
                                    целом.<br><p>HTML<br><p lang="ru">Русский текст выделен синим</p>
<p lang="en">English text is chosen red</p> <br><br>CSS<br>p:lang(ru) {color: #00f;} 
p:lang(en) {color: #f00;} <br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/345d71f24214ffd7baf6688d1c7a1772-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Язык текста. Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.HTMLРусский текст выделен синим English text is chosen red CSSp:lang(ru) {color: #00f;}  p:lang(en) {color: #f00;} "><img src="/img/tmb/4/392272/345d71f24214ffd7baf6688d1c7a1772-800x.jpg" title="Язык текста. Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.HTMLРусский текст выделен" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide46">
                            <h2><a href="/img/tmb/4/392272/7f14efe66ad1c040f3b5a415c52d312c-800x.jpg" target="_blank">Слайд 46</a>Псевдокласс :checked
<br>Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки</h2>
                                                            <div class="text">
                                    (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.<br><br><br><br><br><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 class="image">
                                <a href="/img/tmb/4/392272/7f14efe66ad1c040f3b5a415c52d312c-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега  или пользователем.Псевдокласс :Псевдокласс :indeterminateПсевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии. .checkbox:checked{ box-shadow: 0 0 0 3px rgba(255,255,0,.5); } "><img src="/img/tmb/4/392272/7f14efe66ad1c040f3b5a415c52d312c-800x.jpg" title="Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide47">
                            <h2><a href="/img/tmb/4/392272/8ac50f3c2db203d770bd2aa81e050b44-800x.jpg" target="_blank">Слайд 47</a></h2>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/8ac50f3c2db203d770bd2aa81e050b44-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/4/392272/8ac50f3c2db203d770bd2aa81e050b44-800x.jpg" title="" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide48">
                            <h2><a href="/img/tmb/4/392272/76ba27bb7d2c34d326d14e73e280ae9f-800x.jpg" target="_blank">Слайд 48</a>. – любой символ <br></h2>
                                                            <div class="text">
                                                                    </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/76ba27bb7d2c34d326d14e73e280ae9f-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=". – любой символ "><img src="/img/tmb/4/392272/76ba27bb7d2c34d326d14e73e280ae9f-800x.jpg" title=". – любой символ" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide49">
                            <h2><a href="/img/tmb/4/392272/4e867d901e1b90fc2aa38c723566c5c4-800x.jpg" target="_blank">Слайд 49</a></h2>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/4e867d901e1b90fc2aa38c723566c5c4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/4/392272/4e867d901e1b90fc2aa38c723566c5c4-800x.jpg" title="" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide50">
                            <h2><a href="/img/tmb/4/392272/3b465b8299e760668b49bb0142da9c11-800x.jpg" target="_blank">Слайд 50</a>Жадный поиск берем выражение ".+". И строку 
<br>1. Первый символ шаблона</h2>
                                                            <div class="text">
                                    – это кавычка ".<br>2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит<br>3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»:<br>4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным.<br>5. Иными словами, он сокращает текущее совпадение на один символ:<br>6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '"', не совпадёт:<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/3b465b8299e760668b49bb0142da9c11-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Жадный поиск берем выражение ".+". И строку  1. Первый символ шаблона – это кавычка ".2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»:4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным.5. Иными словами, он сокращает текущее совпадение на один символ:6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '"', не совпадёт:"><img src="/img/tmb/4/392272/3b465b8299e760668b49bb0142da9c11-800x.jpg" title="Жадный поиск берем выражение ".+". И строку 1. Первый символ шаблона – это кавычка ".2. Кавычка" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide51">
                            <h2><a href="/img/tmb/4/392272/8a6006caab8a8f637ce0b9b4e3f05879-800x.jpg" target="_blank">Слайд 51</a>Результат<br>В жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз,</h2>
                                                            <div class="text">
                                    насколько это возможно, чтобы найти соответствие.<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/8a6006caab8a8f637ce0b9b4e3f05879-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="РезультатВ жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы найти соответствие."><img src="/img/tmb/4/392272/8a6006caab8a8f637ce0b9b4e3f05879-800x.jpg" title="РезультатВ жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide52">
                            <h2><a href="/img/tmb/4/392272/d9204de324cde2bdac34c76472121fd1-800x.jpg" target="_blank">Слайд 52</a>Ленивый режим
<br>Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять</h2>
                                                            <div class="text">
                                    минимальное количество раз».<br>1. Первый шаг – тот же, кавычка '"' найдена на 3-й позиции:<br>2. Второй шаг – тот же, находим произвольный символ '.':<br>3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „"“.<br>4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:<br><br><p>Ленивость распространяется только на тот квантификатор, после которого стоит ?. <br><p>Ленивый режим без необходимости лишний раз квантификатор не повторит.<br>
<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/d9204de324cde2bdac34c76472121fd1-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Ленивый режим Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз».1. Первый шаг – тот же, кавычка '"' найдена на 3-й позиции:2. Второй шаг – тот же, находим произвольный символ '.':3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „"“.4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:Ленивость распространяется только на тот квантификатор, после которого стоит ?. Ленивый режим без необходимости лишний раз квантификатор не повторит. "><img src="/img/tmb/4/392272/d9204de324cde2bdac34c76472121fd1-800x.jpg" title="Ленивый режим Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз».1." alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide53">
                            <h2><a href="/img/tmb/4/392272/7a0c262c652719fa6d88b43cd0ba72f7-800x.jpg" target="_blank">Слайд 53</a>Задание: Составить регулярное выражение для:<br>Дата (напр., 21/3/2006) <br><br>Адрес email <br>Тег HTML<br>url<br>Трехзначное число с</h2>
                                                            <div class="text">
                                    2 знаками после точки (цена)<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/7a0c262c652719fa6d88b43cd0ba72f7-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задание: Составить регулярное выражение для:Дата (напр., 21/3/2006) Адрес email Тег HTMLurlТрехзначное число с 2 знаками после точки (цена)"><img src="/img/tmb/4/392272/7a0c262c652719fa6d88b43cd0ba72f7-800x.jpg" title="Задание: Составить регулярное выражение для:Дата (напр., 21/3/2006) Адрес email Тег HTMLurlТрехзначное число с 2 знаками после точки (цена)" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide54">
                            <h2><a href="/img/tmb/4/392272/24974660ecb537eba33dc0e3ad8f0e5b-800x.jpg" target="_blank">Слайд 54</a>Маска ввода в полях формы на jQuery
<br>masked input — очередной плагин</h2>
                                                            <div class="text">
                                    предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.<br>Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.<br>Подключение:<br><br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/24974660ecb537eba33dc0e3ad8f0e5b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Маска ввода в полях формы на jQuery masked input — очередной плагин предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.Подключение:"><img src="/img/tmb/4/392272/24974660ecb537eba33dc0e3ad8f0e5b-800x.jpg" title="Маска ввода в полях формы на jQuery masked input — очередной плагин предназначенный для javascript" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide55">
                            <h2><a href="/img/tmb/4/392272/bab2e6e498b160f4f2900ed0f192e746-800x.jpg" target="_blank">Слайд 55</a>Настройка<br>Далее нужно вызвать функцию плагина для всех элементов формы для которых</h2>
                                                            <div class="text">
                                    надо создать маску, и передать в нее необходимые параметры:<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 class="image">
                                <a href="/img/tmb/4/392272/bab2e6e498b160f4f2900ed0f192e746-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="НастройкаДалее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и передать в нее необходимые параметры:jQuery(function($){   $("#date").mask("99/99/9999");   $("#phone").mask("(999) 999-9999");   $("#tin").mask("99-9999999");   $("#ssn").mask("999-99-9999");});Функция плагина принимает 2 параметра первый — сама маска для ввода, второй — объект дополнительных параметров.a — трактуется как буквенный символ из диапазона (A-Z,a-z)9 — трактуется как числовой символ (0-9)* — трактуется как алфавитно цифровой символ (A-Z,a-z,0-9)"><img src="/img/tmb/4/392272/bab2e6e498b160f4f2900ed0f192e746-800x.jpg" title="НастройкаДалее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide56">
                            <h2><a href="/img/tmb/4/392272/7c37948527a4520d97cffacfe055e177-800x.jpg" target="_blank">Слайд 56</a>Пример<br>В объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию</h2>
                                                            <div class="text">
                                    он равен _, к примеру вы захотели изменить его на пробел<br><br><p>jQuery(function($){<br>   $("#product").mask("99/99/9999",{placeholder:" "});<br>});<br>                                </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/7c37948527a4520d97cffacfe055e177-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ПримерВ объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к примеру вы захотели изменить его на пробелjQuery(function($){   $("#product").mask("99/99/9999",{placeholder:" "});});"><img src="/img/tmb/4/392272/7c37948527a4520d97cffacfe055e177-800x.jpg" title="ПримерВ объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к" alt=""></a>
							</div>
														<hr>
						</div>
											<div class="descrip" id="slide57">
                            <h2><a href="/img/tmb/4/392272/2459cbe4f0bb3385f3a8c0a1043f3c64-800x.jpg" target="_blank">Слайд 57</a>Задание<br></h2>
                                                            <div class="text">
                                                                    </div>
                            							<div class="image">
                                <a href="/img/tmb/4/392272/2459cbe4f0bb3385f3a8c0a1043f3c64-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задание"><img src="/img/tmb/4/392272/2459cbe4f0bb3385f3a8c0a1043f3c64-800x.jpg" title="Задание" alt=""></a>
							</div>
														<hr>
						</div>
									</div>

<div class="custom"  >
	
<div id="yandex_rtb_R-A-468740-8"></div>
<script type="text/javascript">
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-468740-8",
                renderTo: "yandex_rtb_R-A-468740-8",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script></div>
				<div class="url" id="download"><a href="/uncategorized/html-formy/download">Скачать презентацию</a></div>
							</div>
			<div class="right">
				<div class="banners">

<div class="custom"  >
	
<div id="yandex_rtb_R-A-468740-2"></div>
<script>window.yaContextCb.push(()=>{
  Ya.Context.AdvManager.render({
    renderTo: 'yandex_rtb_R-A-468740-2',
    blockId: 'R-A-468740-2'
  })
})</script></div>
				</div>
				<div class="list related">
					<h2>Похожие презентации</h2>
											<div class="wrapper">
							<a href="/uncategorized/nalog-na-nasledovanie-ili-darenie">
								<img src="/img/tmb/3/299089/622d80db7ad5c780b8eb3883ef6286bd-800x.jpg" alt="">
								<span class="desc">
            				<span>Налог на наследование или дарение</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 272</span>
            			</span>
							</a>
						</div>
																	<div class="wrapper">
							<a href="/uncategorized/sozdanie-yuridicheskoy-sluzhby-dlya-sotsialno-uyazvimyh-sloev-naseleniya">
								<img src="/img/tmb/4/307555/2dd36da92fa455a14abd7f07fb4ee890-800x.jpg" alt="">
								<span class="desc">
            				<span>Создание юридической службы для социально уязвимых слоев населения</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 231</span>
            			</span>
							</a>
						</div>

<div class="custom"  >
	
<script>window.yaContextCb.push(()=>{
  Ya.Context.AdvManager.render({
    type: 'fullscreen',
    blockId: 'R-A-468740-13'
  })
})</script></div>
											<div class="wrapper">
							<a href="/uncategorized/tema-chislo-i-tsifra-4">
								<img src="/img/tmb/3/221724/1cdb680c25142fd599f71ed2424f6a6d-800x.jpg" alt="">
								<span class="desc">
            				<span>Тема:  Число и цифра 4</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 325</span>
            			</span>
							</a>
						</div>
																	<div class="wrapper">
							<a href="/uncategorized/informatizatsiya-lpu-pri-pomoshchi-programmnyh-produktov-1s-i1s-rarusaktualnost-i-perspektivy">
								<img src="/img/tmb/1/91951/42f228a281cb23eec1300f25fcb7987d-800x.jpg" alt="">
								<span class="desc">
            				<span>Информатизация ЛПУ при помощи программных продуктов 1С и1С-Рарус:актуальность и перспективы</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 336</span>
            			</span>
							</a>
						</div>
																	<div class="wrapper">
							<a href="/uncategorized/obzor-potrebnostey-vnedreniya-sovmestnoy-sistemy-ekologicheskoy-informatsii-seis-v-kyrgyzstane">
								<img src="/img/tmb/2/110253/5dd012b147e40a527a90bf179e9d14f4-800x.jpg" alt="">
								<span class="desc">
            				<span>Обзор потребностей  внедрения совместной системы экологической информации (SEIS) в Кыргызстане</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 254</span>
            			</span>
							</a>
						</div>
																	<div class="wrapper">
							<a href="/uncategorized/media-proekt-studiobyt-umnym-modno">
								<img src="/img/tmb/1/31305/6117472ebc8b2253d1ce5974f6a4c372-800x.jpg" alt="">
								<span class="desc">
            				<span>Медиа-проект StudioБыть умным - модно</span>
            				<span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 419</span>
            			</span>
							</a>
						</div>
																<div class="clear"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container bottom">
		<div>
            <div class="call_back">
                <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4>
				<p>Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:</p>
<p>Email: <a href="#" class="js_hidden_email" data-address="thepresentation" data-domain="ya.ru">Нажмите что бы посмотреть</a> </p>            </div>
            <div class="links">
				            </div>
            <div class="whatis">
                <h4><i class="fa fa-info text-red"></i>Что такое ThePresentation.ru?</h4>
                <p>Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.</p>
<hr />
<p><a href="/privacy">Для правообладателей</a></p>				<a href="https://metrika.yandex.ru/stat/?id=54509641&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/54509641/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="54509641" data-lang="ru" /></a>
				
				<script type="text/javascript">
					document.write('<a href="//www.liveinternet.ru/click" '+
						'target="_blank"><img src="//counter.yadro.ru/hit?t16.2;r'+
						escape(document.referrer)+((typeof(screen)=='undefined')?'':
							';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
							screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+
						';h'+escape(document.title.substring(0,150))+';'+Math.random()+
						'" alt="" title="LiveInternet: показано число просмотров за 24'+
						' часа, посетителей за 24 часа и за сегодня" '+
						'border="0" width="88" height="31"><\/a>')
				</script>
				
            </div>
            <div class="clear"></div>
		</div>
	</div>
	<script src="/templates/presentation/js/script.js?0ed36ea232886ff4063bbdd9e2c5b9c0"></script>
</body>
</html>

HTML формы презентация

Содержание

Слайд 1HTML формыДанильченко Анна АлександровнаПреподаватель кафедры программного обеспечения систем ЖГТУ

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

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

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

Слайд 8Атрибут type

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

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

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

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

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

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

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

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

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

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