HTML формы - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML формы. Доклад-сообщение содержит 57 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

Слайд 3

Описание слайда:

Слайд 4

Описание слайда:

Слайд 5

Описание слайда:

Слайд 6

Описание слайда:

GET - POST Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

Атрибут type

Слайд 9

Описание слайда:

Слайд 10

Описание слайда:

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

Слайд 13

Описание слайда:

Элементы формы Текстовые поля - для ввода текстовой информации 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 Выбор даты и с локальным временем в календаре.

Слайд 33

Описание слайда:

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

Слайд 34

Описание слайда:

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

Слайд 35

Описание слайда:

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

Слайд 36

Описание слайда:

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

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

Слайд 40

Описание слайда:

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

Слайд 41

Описание слайда:

Псевдокласс :required Применяет стилевые правила к тегу , у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. HTML E-mail

Слайд 42

Описание слайда:

Псевдокласс :optional Применяет стилевые правила к тегу , у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы. Имя: Возраст: input:optional { opacity: 0.5; /* Полупрозрачность */ }

Слайд 43

Описание слайда:

Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте pattern HTML CSS input:valid { background: #dfd; /* Зеленый цвет фона */ }

Слайд 44

Описание слайда:

Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты. HTML CSS input:invalid { background: #fdd; /* Красный цвет фона */ }

Слайд 45

Описание слайда:

Язык текста. Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Слайд 46

Описание слайда:

Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега или пользователем. Псевдокласс :indeterminate Псевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии.

Слайд 47

Описание слайда:

Слайд 48

Описание слайда:

Слайд 49

Описание слайда:

Слайд 50

Описание слайда:

Жадный поиск берем выражение ".+". И строку 1. Первый символ шаблона – это кавычка ". 2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит 3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»: 4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным. 5. Иными словами, он сокращает текущее совпадение на один символ: 6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '"', не совпадёт:

Слайд 51

Описание слайда:

Результат

Слайд 52

Описание слайда:

Ленивый режим Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз». 1. Первый шаг – тот же, кавычка '"' найдена на 3-й позиции: 2. Второй шаг – тот же, находим произвольный символ '.': 3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „"“. 4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:

Слайд 53

Описание слайда:

Слайд 54

Описание слайда:

Маска ввода в полях формы на jQuery masked input — очередной плагин предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п. Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome. Подключение:

Слайд 55

Описание слайда:

Настройка Далее нужно вызвать функцию плагина для всех элементов формы для которых надо создать маску, и передать в нее необходимые параметры:

Слайд 56

Описание слайда:

Пример В объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он равен _, к примеру вы захотели изменить его на пробел