Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

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

Содержание

Форма – это набор элементов, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. Форма создается с помощью тега:
HTML формыДанильченко Анна АлександровнаПреподаватель кафедры программного обеспечения систем ЖГТУ Форма – это набор элементов, таких как поля ввода, поля выбора, переключатели. GET - POSTГлавное отличие методов POST и GET заключается в способе передачи Атрибуты формыaccept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать Атрибут type Поддержка этих значений браузерами Элементы формыТекстовые поля - для ввода текстовой информации  maxlen - максимально допустимой Загрузить файл: Тег Создает список вариантов, которые можно выбирать при наборе в текстовом color Позволяет выбрать цвет из палитры цветов.Выберите цвет date Выбор даты в календаре.Выберите дату datetime-local Выбор даты и с локальным временем в календаре.Выберите дату month Выбор месяца и года в календареВыберите месяц emailТекстовое поле для ввода адресов электронной почты. По умолчанию элемент принимает только один numberПоле числового ввода. Визуально похоже на текстовое, но с добавлением кнопок-стрелок, позволяющих увеличивать и уменьшать значение. Добавлен тег текстового уровня для выведения результатов rangeопределяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, Атрибуты input Autofocus - Автоматически устанавливает фокус в поле формы. В таком Required -  указывает, что данное поле должно быть обязательно заполнено перед отправкой.Pattern CSS+формыПсевдокласс :focus - Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может Псевдокласс :required Применяет стилевые правила к тегу , у которого установлен атрибут required. Он Псевдокласс :optional Применяет стилевые правила к тегу , у которого не задан атрибут required. Псевдокласс :valid Применяется к полям формы, содержимое которых проходит проверку в браузере Псевдокласс :invalid Применяется к полям формы, содержимое которых не соответствует указанному типу. Язык текста. Псевдокласс lang определяет язык текста того или иного элемента или документа в Псевдокласс :checked Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки . – любой символ Жадный поиск берем выражение РезультатВ жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько Ленивый режим Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять Задание: Составить регулярное выражение для:Дата (напр., 21/3/2006) Адрес email Тег HTMLurlТрехзначное число с 2 знаками после точки (цена) Маска ввода в полях формы на jQuery masked input — очередной плагин НастройкаДалее нужно вызвать функцию плагина для всех элементов формы для которых надо ПримерВ объекте дополнительных параметров можно указать заполнитель маски ввода, по умолчанию он Задание
Слайды презентации

Слайд 2

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

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

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

т.е. организовывать диалог с пользователем.


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




Слайд 4

Слайд 5

Слайд 6 GET - POST
Главное отличие методов POST и GET

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 - Устанавливает кодировку, в которой сервер

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

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

Autocomplete - Включает автозаполнение

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

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

Атрибут type

Слайд 9

Слайд 10

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

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

Слайд 12

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

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

type=text name=имя_параметра [value=значение] [size=размер_поля] [maxlen=длина_поля]>

 maxlen - максимально допустимой

длиной текста 

size - количество знакомест

Value - в поле будет изначально отображаться значение данного атрибута


Слайд 14

Слайд 15

Слайд 16

Слайд 17

Слайд 18

Слайд 19

Слайд 20

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

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

name="my_file" type="file">


Слайд 22

Слайд 23

Слайд 24

Слайд 25

Слайд 26

Слайд 27

Слайд 28

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

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

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

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

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




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

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

type="color" name="selectcolor">

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

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

>

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

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

дату

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

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

type="month" name="selectmonth" >

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

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

элемент принимает только один адрес, но указав булев атрибут multiple="multiple" можно

разрешить пользователю ввод нескольких адресов через запятую.


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

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

позволяющих увеличивать и уменьшать значение.

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

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

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

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

интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы

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


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

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

поле формы. В таком поле можно сразу набирать текст

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


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

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

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

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

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

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

фокус. Например, им может быть текстовое поле формы, в

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