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

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

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

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

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

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

Презентация на тему Изображения и формы в HTML. (Тема 5)

Содержание

3 определенияДля понятий:ФормаКонтрол (элемент контроля/управления) в HTML форме
Tema 5. Изображения и формы в HTML 3 определенияДля понятий:ФормаКонтрол (элемент контроля/управления) в HTML форме СодержаниеДобавление изображений на веб-страницеРабота с изображениямиДобавление формы на веб-страницеОсновные атрибуты при определение ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ В HTML-ДОКУМЕНТЕИзображения в HTML документе добавляются при помощи тега - ПРИМЕР ДОБАВЛЕНИЯ ИЗОБРАЖЕНИЯИзображения в HTML Любимые рисунки Эрики РЕЗУЛЬТАТ ПРИМЕРА ВИДЫ ИЗОБРАЖЕНИЙ В HTMLВ HTML-документе можно добавить .gif, .jpg, .png - изображенияПример:Изображения в HTML Любимые рисунки Эрики РЕЗУЛЬТАТ ПРИМЕРАПример ДРУГИЕ ОСНОВНЫЕ АТРИБУТЫ ТЕГА IMGПри добавлении изображений рекомендуется задавать размеры изображений - ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ „HEGHT” и „WIDTH”Изображения в HTML Любимые рисунки Эрики ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙКогда явно не указано расположение изображения, браузер будет ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙ. IIКогда изображение хранится в подкаталоге (в другой ДРУГИЕ АТРИБУТЫ ТЕГА „IMG”Примечание: Все эти атрибуты не поддерживаются 5-й версии HTML ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ИЗОБРАЖЕНИЕ-ССЫЛКАЩелкните на изображение чтобы посмотреть фильм АТРИБУТ „USEMAP” ТЕГА IMGДанный атрибут поддерживается HTML5 и может быть использован для Для определения активных зон на изображении, дополнительно используются теги - парный тегИ ПРИМЕРUn exemplu este prezentat mai jos. РЕЗУЛЬТАТReRezultat exemplu ВЫВОДЫДаже если атрибуты «width» и «height» поддерживаются 5-й версией и браузерами - HTML - ФОРМЫФорма HTML представляет собой документ (или часть документа), созданный с КОНТРОЛЫ В HTML ФОРМАХПользовательский графический интерфейс (GUI) может содержатьСтатические контролы (пример: label)Интерактивные СОЗДАНИЕ HTML-ФОРМHTML-форма создается при помощи тега „form”Синтаксис: СодержимоеТег „form” может содержать один АТРИБУТЫ ТЕГА „FORM” МЕТОД „GET” И МЕТОД „POST”Атрибут “metod TЕГ „INPUT”Тег АТРИБУТЫ ТЕГА „INPUT” АТРИБУТЫ ТЕГА „INPUT” ATRIBUTELE TAG-ULUI „INPUT” ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „text”Формы в HTML Заполните следующие поля... Фамилия: Имя: ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “password”Пароль: Примечание: Вводимые символы ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “radio”Выбери твою возрастную группу: Ребенок ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Checkbox”Выберите любимый ваш цвет:КрасныйБелыйЧерныйПримечание: ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип “Color”...или выбери другой цвет:Прим: ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип “E-mail”Определяет поле для ввода ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Submit”, „Reset” и „Button”Эти ТЕГ „BUTTON”Данный тег используется для определения кнопкиРекомендуется, все-таки, для определения кнопки использовать ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Image”„Image” - этот тип ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „Number”Ввод типа „Number” позволяет ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „Range”Тип „range” определяет элемент ДРУГИЕ ЗНАЧЕНИЯ АТРИБУТА „TYPE”Не поддерживается некоторыми браузерами. Поддерживается только GoogleChrome и SafariНе ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Accept” ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Autofocus”Поле с включенном атрибутом ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Checked”Выберите любимый ваш цвет:КрасныйБелый Черный ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Disabled”Фамилия: Имя: Пароль: ДРУГИЕ АТРИБУТЫ ТЕГА „INPUT” ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „readonly”Атрибут „readonly” – логического типаПользователь не ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „pattern”Данный атрибут используется для следующего типа ТЕГ „TEXTAREA”Определяет поле ввода, типа контроль, которое состоит из нескольких строкСинтаксис: Размер АТРИБУТЫ ТЕГА „TEXTAREA” ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. AutofocusПоддерживается браузерами (кроме IE9-)Пример:Оставь свое мнение ниже... ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. FormОпределяет одну или неcколько форм которым принадлежит РЕЗУЛЬТАТ ПРИМЕРА ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. PlaceholderОпределяет краткое указание на ожидаемое значение поля ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. RequiredЗаставляет (логическое значение) заполнить элемент „textarea”Не поддерживается Safari şi IE9-Пример: ТЕГ „LABEL”Тег АТРИБУТЫ ТЕГА „LABEL” ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТА “FOR” ТЕГА „LABEL”Поддерживается всеми браузерамиПример: Фамилия: Имя: Пароль: ТЕГ „SELECT”Тег „select” используется для контроля ввода данных пользователем в формуС тегом АТРИБУТЫ ТЕГА „SELECT” ТЕГ „OPTION”Этот тег используется для определения опций в выпадающем списке Этот элемент ТЕГ «OPTGROUP»При использовании списка с большим количеством элементов, они могут быть сгруппированы ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „SELECT” И „OPTION”Выбери место жительства: Кишинев Яловены Страшены Оргеев Хынчешты ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „OPTGROUP”Выбери место жительства: Кишинев Яловены Страшены Оргеев Хынчешты Бричаны Окница Единцы Чимишлия Леова РЕЗУЛЬТАТ ПРИМЕРА ТЕГ „FIELDSET”Тег „fieldset” используется для объединения нескольких HTML элементов в форме, указывая ТЕГ «LEGEND»Рекомендуется использование тега „legend” вместе с тегом „fieldset”, с целью определения ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГОВ „FIELDSET” И „LEGEND”Личные данные Фамилия: Имя: Пароль: Выбери твою возрастную РЕЗУЛЬТАТ ПРИМЕРА !!!3 важные понятия про которые узнали сегодня 2 вопроса которые возникли 1
Слайды презентации

Слайд 2 3 определения
Для понятий:
Форма
Контрол (элемент контроля/управления) в HTML форме

3 определенияДля понятий:ФормаКонтрол (элемент контроля/управления) в HTML форме

Слайд 3 Содержание
Добавление изображений на веб-странице
Работа с изображениями
Добавление формы на

СодержаниеДобавление изображений на веб-страницеРабота с изображениямиДобавление формы на веб-страницеОсновные атрибуты при

веб-странице
Основные атрибуты при определение форм
Элементы управления в форме
HTML элементы

в HTML-формах

Слайд 4 ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ В HTML-ДОКУМЕНТЕ
Изображения в HTML документе добавляются

ДОБАВЛЕНИЕ ИЗОБРАЖЕНИЙ В HTML-ДОКУМЕНТЕИзображения в HTML документе добавляются при помощи тега

при помощи тега - тег без содержания
Тег

" img" поддерживается всеми популярными браузерами
Атрибуты "src" и "alt" - рекомендуемые атрибуты – должны всегда присутствовать при вставки изображения. Они поддерживаются всеми браузерами и 5-й версии HTML
Атрибут "src" - означает "source" (источник) - используется, чтобы указать местоположение изображения
Когда изображение находится в другой каталог / папку, чем HTML-файл, необходимо указать путь к файлу-изображение
Атрибут "alt" используется для отображения текста вместо изображения, если браузер, по некоторым причинам, не может отобразить изображение
Основная форма:

Слайд 5 ПРИМЕР ДОБАВЛЕНИЯ ИЗОБРАЖЕНИЯ


Изображения в HTML


Любимые рисунки

ПРИМЕР ДОБАВЛЕНИЯ ИЗОБРАЖЕНИЯИзображения в HTML Любимые рисунки Эрики

Эрики



Слайд 6 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 7 ВИДЫ ИЗОБРАЖЕНИЙ В HTML
В HTML-документе можно добавить .gif,

ВИДЫ ИЗОБРАЖЕНИЙ В HTMLВ HTML-документе можно добавить .gif, .jpg, .png - изображенияПример:Изображения в HTML Любимые рисунки Эрики

.jpg, .png - изображения
Пример:


Изображения в HTML

Любимые рисунки

Эрики
Пони
Говорящий кот
Сердечки


Слайд 8 РЕЗУЛЬТАТ ПРИМЕРА
Пример

РЕЗУЛЬТАТ ПРИМЕРАПример

Слайд 9 ДРУГИЕ ОСНОВНЫЕ АТРИБУТЫ ТЕГА IMG
При добавлении изображений рекомендуется

ДРУГИЕ ОСНОВНЫЕ АТРИБУТЫ ТЕГА IMGПри добавлении изображений рекомендуется задавать размеры изображений

задавать размеры изображений - высоту и ширину
Если не

указывать размер изображения, страница будет мигать во время загрузки
Не рекомендуется добавлять большие изображения в веб-страницах - страница загружается очень медленно
Чтобы определить высоту и ширину изображения, используются атрибуты "height" и "widith" - размер, указывается в пикселях
Эти два атрибуты поддерживаются всеми популярными веб-браузерами и 5-й версии HTML

Слайд 10 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ „HEGHT” и „WIDTH”


Изображения в

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ „HEGHT” и „WIDTH”Изображения в HTML Любимые рисунки Эрики

HTML


Любимые рисунки Эрики

src="/imagini/motan.gif" alt="Говорящий кот" height="260" width="260" />
Сердечки


Слайд 11 ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙ
Когда явно не указано

ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙКогда явно не указано расположение изображения, браузер

расположение изображения, браузер будет искать ее в той же

папке где находится HTML-файл (задается относительный адрес)
Пример:
Красота

Если браузер не найдет указанный файл будет отображаться такой значок:

Слайд 12 ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙ. II
Когда изображение хранится

ВСТАВКА ИЗОБРАЖЕНИЙ С РАЗЛИЧНЫХ МЕСТОПОЛОЖЕНИЙ. IIКогда изображение хранится в подкаталоге (в

в подкаталоге (в другой папке) необходимо указать путь к

изображению
Пример:
Пони
Иногда необходимо иметь доступ к рисунку, хранящийся на другом веб-сайте или веб-сервере изображений (тогда задается абсолютный адрес)
Пример:
Lamp

Слайд 13 ДРУГИЕ АТРИБУТЫ ТЕГА „IMG”
Примечание: Все эти атрибуты не

ДРУГИЕ АТРИБУТЫ ТЕГА „IMG”Примечание: Все эти атрибуты не поддерживаются 5-й версии HTML

поддерживаются 5-й версии HTML

Слайд 14 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ

border="2" />



Слайд 15 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ

/>

/>

Красота

Слайд 16 ИЗОБРАЖЕНИЕ-ССЫЛКА
Щелкните на изображение чтобы посмотреть фильм

ИЗОБРАЖЕНИЕ-ССЫЛКАЩелкните на изображение чтобы посмотреть фильм

alt="Единорог" width="250" height="220" />

Слайд 17 АТРИБУТ „USEMAP” ТЕГА IMG
Данный атрибут поддерживается HTML5 и

АТРИБУТ „USEMAP” ТЕГА IMGДанный атрибут поддерживается HTML5 и может быть использован

может быть использован для спецификации того что определенные зоны

изображения могут быть активированы со стороны клиента (пользователь может кликнуть и активировать эти части)
Синтаксис использования данного атрибута:

Слайд 18 Для определения активных зон на изображении, дополнительно используются

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

теги
- парный тег
И элемент -

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

“значение“
…

Примечание: Атрибут shape, тега area может иметь несколько значений: default, rect, circle, poly. Тег area имеет и атибут target

ТЕГИ MAP и AREA

Слайд 19 ПРИМЕР
Un exemplu este prezentat mai jos.

ПРИМЕРUn exemplu este prezentat mai jos.

height="315" alt="Diagrama cazurilor de utilizare" usemap="#diagramaUC" />

coords="3,105,60,166" alt="Actor" href="/actor.html„ />
Actor

Слайд 20 РЕЗУЛЬТАТ
ReRezultat exemplu

РЕЗУЛЬТАТReRezultat exemplu

Слайд 21 ВЫВОДЫ
Даже если атрибуты «width» и «height» поддерживаются 5-й

ВЫВОДЫДаже если атрибуты «width» и «height» поддерживаются 5-й версией и браузерами

версией и браузерами - рекомендация консорциума W3C является использование

стилей
Эта же рекомендация, использование стилей, и для остальных атрибутов, которые не поддерживаются

Пример:
style="width:50px; height:50px; border:0"

Слайд 22 HTML - ФОРМЫ
Форма HTML представляет собой документ (или

HTML - ФОРМЫФорма HTML представляет собой документ (или часть документа), созданный

часть документа), созданный с использованием элементов HTML
Назначением формы является

сбор информации от пользователей
После того как пользователь заполнит форму и запустит процесс ее обработки, информация из нее попадает в программу, работающую на сервере
HTML-форма содержит:
Специальные элементы - контролы - элементы управления формой, такие как текстовые поля, кнопки, чекбоксы (флажки), радио кнопки (переключатели) и т.д. 
метки для этих элементов управления (label), обычный текст и т.д.

Слайд 23 КОНТРОЛЫ В HTML ФОРМАХ
Пользовательский графический интерфейс (GUI) может

КОНТРОЛЫ В HTML ФОРМАХПользовательский графический интерфейс (GUI) может содержатьСтатические контролы (пример:

содержать
Статические контролы (пример: label)
Интерактивные контролы (пример: textArea, textBox …)
Каждый

интерактивный элемент управления имеет как начальное значение, так и текущее значение (оба типа «string»)
"Текущее значение" контрола изначально установлена на «начальное значение»
Текущее значение может быть изменено в результате действий пользователя или с помощью скриптов
Начальное значение контрола не меняется. Таким образом, при восстановлении формы, текущее значение каждого элемента управления сбрасывается, и принимает исходное значение

Слайд 24 СОЗДАНИЕ HTML-ФОРМ
HTML-форма создается при помощи тега „form”
Синтаксис: Содержимое
Тег

СОЗДАНИЕ HTML-ФОРМHTML-форма создается при помощи тега „form”Синтаксис: СодержимоеТег „form” может содержать

„form” может содержать один или несколько из следующих тегов:








Все

браузеры поддерживают тег „form”


Слайд 25 АТРИБУТЫ ТЕГА „FORM”

АТРИБУТЫ ТЕГА „FORM”

Слайд 26 МЕТОД „GET” И МЕТОД „POST”
Атрибут “metod" определяет способ

МЕТОД „GET” И МЕТОД „POST”Атрибут “metod

отправки данных формы (данные передаются на страницу/файл, указанный в

атрибуте “action").
Данные формы могут быть отправлены в качестве переменной URL (метод “get") или HTTP-транзакции (метод "post")
При использовании метода GET:
Данные формы добавляются в URL в виде пары "имя&значение"
Длина URL ограничена (около 3000 знаков)
Не рекомендуется использование метода GET при отправке конфиденциальных или защищенных данных (будут видны в URL)
Рекомендуется использовать данный метод если пользователь хочет зарегистрировать заполнение формы
При использовании метода POST:
Данные вкладывается в HTTP-запросе (данные не видны в URL)
Нет ограничений на размер
Заполнение формы не может быть зарегистрирована

Слайд 27 TЕГ „INPUT”
Тег "input" определяет поле ввода, типа контрол,

TЕГ „INPUT”Тег

в котором пользователь может вводить данные
Тег "input" используется

в теге "form"
Поле ввода может быть нескольких типов, в зависимости от значения атрибута "type"
Тег "input" не имеет содержания. В 5-й версии требует закрытие ()
Поддерживается всеми популярными браузерами
Тег "input" имеет атрибуты, многие из которых появились в 5-й версии

Слайд 28 АТРИБУТЫ ТЕГА „INPUT”

АТРИБУТЫ ТЕГА „INPUT”

Слайд 29 АТРИБУТЫ ТЕГА „INPUT”

АТРИБУТЫ ТЕГА „INPUT”

Слайд 30 ATRIBUTELE TAG-ULUI „INPUT”

ATRIBUTELE TAG-ULUI „INPUT”

Слайд 31 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „text”Формы в HTML Заполните следующие поля... Фамилия: Имя:

„text”


Формы в HTML

Заполните следующие поля...

Фамилия:

name="nume" />

Имя:



Слайд 32 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “password”Пароль: Примечание: Вводимые

“password”
Пароль:
Примечание: Вводимые символы заменяются

на точки – они не видны

Слайд 33 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “radio”Выбери твою возрастную

“radio”
Выбери твою возрастную группу:


Ребенок

(Возраст меньше 18)


Взрослый (Возраст больше 18)

Примечание: Выбирается только одна опция

Слайд 34 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Checkbox”Выберите любимый ваш

“Checkbox”
Выберите любимый ваш цвет:

Красный

/>
Белый

Черный

Примечание: Можно выбрать все или ни одну опцию

Слайд 35 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип “Color”...или выбери другой

“Color”
...или выбери другой цвет:


Прим: Не

поддерживается IE и Safari

Слайд 36 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГОВ «INPUT» и «FORM». Тип “E-mail”Определяет поле для

“E-mail”
Определяет поле для ввода e-mail адреса
Автоматически будет проверятся наличие

„@”
Не поддерживается браузером Safari
Пример:
Введи свой e-mail адресс:



Прим: Предупреждение появится при попытке отправки данных на сервер, для обработки

Слайд 37 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Submit”, „Reset” и

“Submit”, „Reset” и „Button”
Эти вводы представляют собой кнопку, которая

используется для отправки данных на сервер, с целью обработки
Пример:


PS: Для типа «button» обычно используются скрипты Java

Слайд 38 ТЕГ „BUTTON”
Данный тег используется для определения кнопки
Рекомендуется, все-таки,

ТЕГ „BUTTON”Данный тег используется для определения кнопкиРекомендуется, все-таки, для определения кнопки

для определения кнопки использовать тег „input”, c типом „button”

или „submit” – результат будет тот же
Синтаксис
Внутри данного тега можно включить теги с текстом или изображением
Можно использовать много атрибутов, с рекомендацией обязательного использования атрибута „type”
Возможные атрибуты тега „button”:
Autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate, formtarget, name, type, value

Слайд 39 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип “Image”„Image” - этот

“Image”
„Image” - этот тип ввода используется, когда кнопка „Submit”

должна быть заменена на изображение
Поддерживается всеми браузерами
Пример:

Слайд 40 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „Number”Ввод типа „Number”

„Number”
Ввод типа „Number” позволяет ввод номера, значение которого можно

валидировать (проверить)
При использовании типа „Number” существует возможность использования и других атрибутов:
max – определяет максимальное значение которое можно ввести
min – определяет минимальное значение которое можно ввести
step – определяет «шаг» изменения значений
value – определяет значение «по умолчанию»
Поддерживаются браузерами
Пример:
Введите точный возраст:

Возраст:

Слайд 41 ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА «INPUT» и «FORM». Тип „Range”Тип „range” определяет

„Range”
Тип „range” определяет элемент управления для ввода чисел, не

обязательно с точным значением
Поддерживается браузерами
Пример:
Сколько часов в день проводите перед телевизором?



Слайд 42 ДРУГИЕ ЗНАЧЕНИЯ АТРИБУТА „TYPE”

Не поддерживается некоторыми браузерами. Поддерживается

ДРУГИЕ ЗНАЧЕНИЯ АТРИБУТА „TYPE”Не поддерживается некоторыми браузерами. Поддерживается только GoogleChrome и

только GoogleChrome и Safari

Не поддерживается некоторыми браузерами : IE

şi Mozilla

Не поддерживается браузером Safari

Позволяет ввод номера недели в году, с возможностью выбора из календаря
Не поддерживается некоторыми браузерами : IE şi Mozilla

Слайд 43 ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут

ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Accept”

„Accept”



type="submit" value=“Отправить” />

Слайд 44 ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут

ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Autofocus”Поле с включенном

„Autofocus”
Поле с включенном атрибутом „autofocus” будет активным, с расположенным

в нем курсором
Exemplu:
Фамилия:

Имя:

Пароль:

Слайд 45 ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут

ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Checked”Выберите любимый ваш цвет:КрасныйБелый Черный

„Checked”
Выберите любимый ваш цвет:

Красный

/>
Белый

Черный

Слайд 46 ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут

ПРИМЕРЫ С АТРИБУТАМИ ТЕГОВ „INPUT” И „FORM”. Атрибут „Disabled”Фамилия: Имя: Пароль:

„Disabled”
Фамилия:

Имя:

disabled />

Пароль:

Слайд 47 ДРУГИЕ АТРИБУТЫ ТЕГА „INPUT”

ДРУГИЕ АТРИБУТЫ ТЕГА „INPUT”

Слайд 48 ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „readonly”
Атрибут „readonly”

ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „readonly”Атрибут „readonly” – логического типаПользователь

– логического типа
Пользователь не может изменить зафиксированное значение
Поддерживаeтся всеми

браузерами
Пример:
Ваш социальный статус:



Слайд 49 ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „pattern”
Данный атрибут

ПРИМЕРЫ С АТРИБУТАМИ ТЕГА „INPUT”. Атрибут „pattern”Данный атрибут используется для следующего

используется для следующего типа ввода: text, search, url, tel,

email, password
Рекомендуется использование атрибута „title” чтобы пользователь знал что необходимо вводить в поле
Не поддерживается браузерами Safari и IE9-
Пример:
Введите ваш номер телефона:



Слайд 50 ТЕГ „TEXTAREA”
Определяет поле ввода, типа контроль, которое состоит

ТЕГ „TEXTAREA”Определяет поле ввода, типа контроль, которое состоит из нескольких строкСинтаксис:

из нескольких строк
Синтаксис:
Размер пространства для

ввода текста может быть задан атрибутами "cols" и "rows" или лучше использовать свойства CSS
Может содержать неограниченное количество символов
Поддерживается всеми популярными браузерами
Многие атрибуты появились в HTML5 версии

Слайд 51 АТРИБУТЫ ТЕГА „TEXTAREA”

АТРИБУТЫ ТЕГА „TEXTAREA”

Слайд 52 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. Autofocus
Поддерживается браузерами (кроме

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. AutofocusПоддерживается браузерами (кроме IE9-)Пример:Оставь свое мнение ниже...

IE9-)
Пример:
Оставь свое мнение ниже...




Слайд 53 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. Form
Определяет одну или

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. FormОпределяет одну или неcколько форм которым

неcколько форм которым принадлежит зона „textarea”
Не поддерживается IE
Пример:

Имя:





Слайд 54 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 55 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. Placeholder
Определяет краткое указание

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. PlaceholderОпределяет краткое указание на ожидаемое значение

на ожидаемое значение поля „textarea”
Поддерживается всеми браузерами
Пример:
Оставь свое

мнение ниже...



Слайд 56 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. Required
Заставляет (логическое значение)

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТОВ ТЕГА „TEXTAREA”. RequiredЗаставляет (логическое значение) заполнить элемент „textarea”Не поддерживается Safari şi IE9-Пример:

заполнить элемент „textarea”
Не поддерживается Safari şi IE9-
Пример:

placeholder="Напиши тут свое мнение..." required>


Слайд 57 ТЕГ „LABEL”
Тег "label" используется для определения этикеток для

ТЕГ „LABEL”Тег

элементов типа "input«
Синтаксис: Содержимое
Определенные этикетки не имеют определенную

роль, но помогают пользователю в использовании формы
Когда пользователь перейдет на этикетку будет активирован соответствующий ей контрол (для этого эти два элемента должны быть соединены)
Этикетка может быть прикреплена к элементу при помощи атрибута "for" или путем размещения элемента внутри тега "label"
Тег поддерживается всеми популярными браузерами

Слайд 58 АТРИБУТЫ ТЕГА „LABEL”

АТРИБУТЫ ТЕГА „LABEL”

Слайд 59 ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТА “FOR” ТЕГА „LABEL”
Поддерживается всеми браузерами
Пример:

ПРИМЕР ИСПОЛЬЗОВАНИЯ АТРИБУТА “FOR” ТЕГА „LABEL”Поддерживается всеми браузерамиПример: Фамилия: Имя: Пароль:

for="nume">Фамилия:


Имя:

type="text" name="prenume" id="prenume" />





Слайд 60 ТЕГ „SELECT”
Тег „select” используется для контроля ввода данных

ТЕГ „SELECT”Тег „select” используется для контроля ввода данных пользователем в формуС

пользователем в форму
С тегом „select” создается список типа „drop-down”

(выпадающий)
Внутри тега „select” используется тег „option” с целью определения элементов списка. Синтаксис:

Данный тег поддерживается всеми популярными браузерами

Слайд 61 АТРИБУТЫ ТЕГА „SELECT”

АТРИБУТЫ ТЕГА „SELECT”

Слайд 62 ТЕГ „OPTION”
Этот тег используется для определения опций в

ТЕГ „OPTION”Этот тег используется для определения опций в выпадающем списке Этот

выпадающем списке
Этот элемент обычно находится внутри тега „select”

или "datalist"
Атрибут „value” является обязательным в теге „option”
Он поддерживается всеми браузерами

Слайд 63 ТЕГ «OPTGROUP»
При использовании списка с большим количеством элементов,

ТЕГ «OPTGROUP»При использовании списка с большим количеством элементов, они могут быть

они могут быть сгруппированы при помощи тега "optgroup”
Синтаксис:

Содержимое
…




Слайд 64 ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „SELECT” И „OPTION”
Выбери место жительства:

ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „SELECT” И „OPTION”Выбери место жительства: Кишинев Яловены Страшены Оргеев Хынчешты

Кишинев
Яловены
Страшены
Оргеев

value="Hancesti">Хынчешты

Слайд 65 ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „OPTGROUP”
Выбери место жительства:

ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА „OPTGROUP”Выбери место жительства: Кишинев Яловены Страшены Оргеев Хынчешты Бричаны Окница Единцы Чимишлия Леова

районы">
Кишинев
Яловены
Страшены
Оргеев
Хынчешты

label="Северные районы">









Слайд 66 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА

Слайд 67 ТЕГ „FIELDSET”
Тег „fieldset” используется для объединения нескольких HTML

ТЕГ „FIELDSET”Тег „fieldset” используется для объединения нескольких HTML элементов в форме,

элементов в форме, указывая и линии границы
Синтаксис: Содержимое
Поддерживается

всеми браузерами

Слайд 68 ТЕГ «LEGEND»
Рекомендуется использование тега „legend” вместе с тегом

ТЕГ «LEGEND»Рекомендуется использование тега „legend” вместе с тегом „fieldset”, с целью

„fieldset”, с целью определения названия для группы контролов
Синтаксис:
Название

группы контролов



Слайд 69 ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГОВ „FIELDSET” И „LEGEND”


Личные данные
Фамилия:

ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГОВ „FIELDSET” И „LEGEND”Личные данные Фамилия: Имя: Пароль: Выбери твою

type="text" name="nume" />

Имя:

Пароль:



Выбери твою возрастную группу:


Ребенок (Возраст меньше 18)


Взрослый (Возраст больше 18)


…
Введите ваш номер телефона:









Слайд 70 РЕЗУЛЬТАТ ПРИМЕРА

РЕЗУЛЬТАТ ПРИМЕРА
  • Имя файла: izobrazheniya-i-formy-v-html-tema-5.pptx
  • Количество просмотров: 176
  • Количество скачиваний: 0
- Предыдущая Производство огнеупорных материалов
Следующая - Командаларды қолдану

Похожие презентации

Траектории развития молодого педагога Траектории развития молодого педагога 115
Фотоотчет День птиц презентация по теме Фотоотчет День птиц презентация по теме 110
Консультация для родителей. презентация Консультация для родителей. презентация 121
Крито-микенский период Крито-микенский период 206
Шаблоны презентаций Воспитание 3 Шаблоны презентаций Воспитание 3 100
Тряпичная кукла Северная Берегиня учебно-методический материал по конструированию, ручному труду Тряпичная кукла Северная Берегиня учебно-методический материал по конструированию, ручному труду 110
Краткое описание проекта Краткое описание проекта 152
Презентация СЕМЬ ЧУДЕС БАШКОРТОСТАНА Презентация СЕМЬ ЧУДЕС БАШКОРТОСТАНА 168
Презентация Жилища народов мира занимательные факты Презентация Жилища народов мира занимательные факты 175
prezentatsiya microsoft office powerpoint prezentatsiya microsoft office powerpoint 137
Простые правила поведения на дороге Простые правила поведения на дороге 102
umk shkola rossii 0 umk shkola rossii 0 55
Геология моей малой родины - Тункинского района Геология моей малой родины - Тункинского района 151
Семинар Гендерное воспитание детей дошкольного возраста статья по теме Семинар Гендерное воспитание детей дошкольного возраста статья по теме 100
Исем.: исемнәрне килеш белән төрләнешен кабатлау, логик фикерләү сәләте, туган якка мәхәббәт тәрбияләү. Исем.: исемнәрне килеш белән төрләнешен кабатлау, логик фикерләү сәләте, туган якка мәхәббәт тәрбияләү. 135
prezentatsiyanasha gruppa 2 prezentatsiyanasha gruppa 2 111
Адаптация в детском саду презентация к уроку по теме Адаптация в детском саду презентация к уроку по теме 153
УМК Перспектива УМК Перспектива 122
ФГБОУ ВПО ЧГПУ им. И.Я.Яковлева ФГБОУ ВПО ЧГПУ им. И.Я.Яковлева 102
ОРГАНИЗАЦИЯ РАЗВИВАЮЩЕЙ ПРЕДМЕТНО-ПРОСТРАНСТВЕННОЙ СРЕДЫ В ГРУППЕ ДЕТЕЙ СРЕДНЕГО ВОЗРАСТА В СООТВЕТСТВИИ С ТРЕБОВАНИЯМИ ФГОС ДО презентация к уроку (средняя группа) ОРГАНИЗАЦИЯ РАЗВИВАЮЩЕЙ ПРЕДМЕТНО-ПРОСТРАНСТВЕННОЙ СРЕДЫ В ГРУППЕ ДЕТЕЙ СРЕДНЕГО ВОЗРАСТА В СООТВЕТСТВИИ С ТРЕБОВАНИЯМИ ФГОС ДО презентация к уроку (средняя группа) 154
СОТРУДНИЧЕСТВО С ОТЦАМИ- инновационный проект презентация к уроку по теме СОТРУДНИЧЕСТВО С ОТЦАМИ- инновационный проект презентация к уроку по теме 106
Презентация ИКТ в начальной школе. презентация урока для интерактивной доски ( класс) Презентация ИКТ в начальной школе. презентация урока для интерактивной доски ( класс) 194
pobediteli v semeynyh albomah pobediteli v semeynyh albomah 137
ПРОБЛЕМЫ И ЗАДАЧИ В ОБЛАСТИ ЗАКОНОДАТЕЛЬНОЙ МЕТРОЛОГИИ НА СОВРЕМЕННОМ ЭТАПЕ ПРОБЛЕМЫ И ЗАДАЧИ В ОБЛАСТИ ЗАКОНОДАТЕЛЬНОЙ МЕТРОЛОГИИ НА СОВРЕМЕННОМ ЭТАПЕ 114
Фотоальбом Фотоальбом 116
Мұнай бергіштікті арттыру үшін қабатқа ыстық бу айдау. Бу айдау дегеніміз не? Мұнай бергіштікті арттыру үшін қабатқа ыстық бу айдау. Бу айдау дегеніміз не? 148
Как мы делали подарки для пап. Как мы делали подарки для пап. 208
prezentatsiya proekta 1 prezentatsiya proekta 1 64
duhovno-nravstvennoe vospitanie duhovno-nravstvennoe vospitanie 162