Презентация HTML формы онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML формы абсолютно бесплатно. Урок-презентация на эту тему содержит всего 57 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Презентации » Устройства и комплектующие » HTML формы
Оцените!
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:57 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:1.86 MB
- Просмотров:61
- Скачиваний:3
- Автор:неизвестен
Слайды и текст к этой презентации:
№6 слайд
![GET - POST Главное отличие](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img5.jpg)
Содержание слайда: 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](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img6.jpg)
Содержание слайда: Атрибуты формы
accept-charset - Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы
<form action="handler.php" accept-charset="windows-1251">
Autocomplete - Включает автозаполнение полей формы.
Name - Имя формы.
Novalidate - Отменяет встроенную проверку данных формы на корректность ввода.
Target - Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.
№13 слайд
![Элементы формы Текстовые поля](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img12.jpg)
Содержание слайда: Элементы формы
Текстовые поля - для ввода текстовой информации
<input type=text name=имя_параметра [value=значение] [size=размер_поля] [maxlen=длина_поля]>
maxlen - максимально допустимой длиной текста
size - количество знакомест
Value - в поле будет изначально отображаться значение данного атрибута
№37 слайд
![range определяет поле,](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img36.jpg)
Содержание слайда: range
определяет поле, которые может содержать значения в определенном интервале. Отображается как ползунок, который можно перетаскивать мышкой. Вы можете ограничивать диапазон принимаемых чисел с помощью атрибутов min (минимальное допустимое число) и max (максимальное допустимое число).
№38 слайд
![Атрибуты input Autofocus -](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img37.jpg)
Содержание слайда: Атрибуты input
Autofocus - Автоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Disabled - Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Заблокированное в поле значение не передается на сервер.
Placeholder - Выводит подсказывающий текст.
Readonly - Устанавливает, что поле не может изменяться пользователем.
Step - Шаг приращения для числовых полей.
Value - Значение элемента.
Multiple - указывает, что данное поле может принимать несколько значений одновременно
№41 слайд
![Псевдокласс required](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img40.jpg)
Содержание слайда: Псевдокласс :required
Применяет стилевые правила к тегу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.
HTML
<p>
<label for="email">E-mail</label>
<input id="email" type="text“ required>
</p>
CSS
input:required {
border: 1px solid red; /* Красная рамка для обязательных полей */
}
№42 слайд
![Псевдокласс optional](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img41.jpg)
Содержание слайда: Псевдокласс :optional
Применяет стилевые правила к тегу <input>, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optionalприменяется к необязательным полям формы.
<p>Имя: <input name="name"></p>
<p>Возраст: <input type="number" min="18" required name="old"></p> <p><input type="submit" value="Отправить"></p>
<style>
input:optional { opacity: 0.5; /* Полупрозрачность */ }
</style>
№43 слайд
![Псевдокласс valid Применяется](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img42.jpg)
Содержание слайда: Псевдокласс :valid
Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email“ корректный адрес электронной почты. Проверяет на соответствие регулярному выражению в атрибуте pattern
HTML
<p><input type="email" required></p>
CSS
input:valid { background: #dfd; /* Зеленый цвет фона */ }
№44 слайд
![Псевдокласс invalid](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img43.jpg)
Содержание слайда: Псевдокласс :invalid
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.
HTML
<p><input type="email" required></p>
CSS
input:invalid { background: #fdd; /* Красный цвет фона */ }
№46 слайд
![Псевдокласс checked](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img45.jpg)
Содержание слайда: Псевдокласс :checked
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.
Псевдокласс :indeterminate
Псевдокласс :indeterminate задает стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределенном состоянии. К примеру, если из группы флажков ни один не помечен, то флажки находятся в указанном состоянии.
№50 слайд
![Жадный поиск берем выражение](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img49.jpg)
Содержание слайда: Жадный поиск берем выражение ".+". И строку
1. Первый символ шаблона – это кавычка ".
2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.(точка). Она обозначает «любой символ», так что следующая буква строки 'w' вполне подходит
3. Далее «любой символ» повторяется, так как стоит квантификатор .+. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается. В данном случае это означает «до конца строки»:
4. Итак, текст закончился, движок регулярных выражений больше не может найти «любой символ», он закончил повторения для .+ и переходит к следующему символу шаблона. Следующий символ шаблона – это кавычка. Её тоже необходимо найти, чтобы соответствие было полным.
5. Иными словами, он сокращает текущее совпадение на один символ:
6. Движок продолжает отступать, он уменьшает количество повторений точки '.' до тех пор, пока остаток паттерна, то есть в данном случае кавычка '"', не совпадёт:
№52 слайд
![Ленивый режим Ленивый режим](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img51.jpg)
Содержание слайда: Ленивый режим
Ленивый режим работы квантификаторов – противоположность жадному, он означает «повторять минимальное количество раз».
1. Первый шаг – тот же, кавычка '"' найдена на 3-й позиции:
2. Второй шаг – тот же, находим произвольный символ '.':
3. А вот дальше – так как стоит ленивый режим работы +, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть '"':Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае – нет, символ 'i' не равен „"“.
4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:
№54 слайд
![Маска ввода в полях формы на](/documents_6/8131823e2d8a18f6a0747dc3ef168c10/img53.jpg)
Содержание слайда: Маска ввода в полях формы на jQuery
masked input — очередной плагин предназначенный для javascript фремворка jQuery, с его помощью можно установить строгий формат ввода (маску ввода) в текстовые поля формы что хорошо подойдет для ввода времени, даты, телефона и т.п.
Плагин корректно работает во всех браузерах начитаная с IE6 +, FF 1.5 +, Opera, Safari, Chrome.
Подключение:
Скачать все slide презентации HTML формы одним архивом:
Похожие презентации
-
Язык разметки гипертекста HTML. 8 класс
-
Разработка программной платформы для создания и проведения квест-мероприятий
-
Разработка программной платформы для шифрования и дешифрования текста c помощью ключа
-
Освоение HTML, CSS, JS (09)
-
HTML программирование
-
Основы Web - технологий. Языки разметок и стилей: HTML. Часть 2
-
Введение в HTML
-
HTML құжатында кестелерді қалыптастыру. Кесте параметрлерін тағайындау тегтері
-
Блоки в HTML
-
Разработка справочной системы 2GIS, в средах программирования HTMLHelpWorkshop и HTM2CHM