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

Содержание

Слайд 2


...
Элементы формы
...

Все элементы формы должны иметь имена

!!


... Элементы формы ... Все элементы формы должны иметь имена !! …

Слайд 3


GET: Для сообщений ≤256 байт; не для секретной информации;

передача на стороне клиента; информация добавляется в URL, который был указан в теге :
http://www.bandname.com/cgi-bin/mailinglist.php?username =аnna%20Sokolova&email=annsokol%40example.com

POST: более популярный метод; передача на стороне сервера.

Методы GET и POST

GET: Для сообщений ≤256 байт; не для секретной информации; передача на стороне клиента;

Слайд 4



/>




Задействовать поисковую машину Google:

Задействовать поисковую машину Google:

Слайд 5

Атрибуты тега


- содержимое формы будет обработано CGI-программой

ENCTYPE=“text/plain”>
или

содержимое формы будет отправлено по электронной почте по указанному адресу

Атрибуты тега - содержимое формы будет обработано CGI-программой или содержимое формы будет отправлено

Слайд 6

Атрибуты тега

- содержимое формы будет обработано CGI-программой

ENCTYPE=“text/plain”>
или

содержимое формы будет отправлено по электронной почте по указанному адресу

Атрибуты тега - содержимое формы будет обработано CGI-программой или содержимое формы будет отправлено

Слайд 7

Результаты:

ENCTYPE=“text/plane”:
a=user18
b1=qwerty
b2=qwerty
c=c2
d=d1
e1=1
e4=1
f=свободно владею английским языком

ENCTYPE=“application/x-www-form-urlencoded”:
a=user18&b1=qwerty&b2=qwerty&c=c2&d=d1&e1=1&e4=1&f=%D1%E2%EE%E1%EE%E4%ED%EE+%E2%EB%E0%E4%E5%FE+%E0%ED%E3%EB%E8%E9%F1%EA%E8%EC+%FF%E7%FB%EA%EE%EC

Результаты: ENCTYPE=“text/plane”: a=user18 b1=qwerty b2=qwerty c=c2 d=d1 e1=1 e4=1 f=свободно владею английским языком ENCTYPE=“application/x-www-form-urlencoded”: a=user18&b1=qwerty&b2=qwerty&c=c2&d=d1&e1=1&e4=1&f=%D1%E2%EE%E1%EE%E4%ED%EE+%E2%EB%E0%E4%E5%FE+%E0%ED%E3%EB%E8%E9%F1%EA%E8%EC+%FF%E7%FB%EA%EE%EC

Слайд 8


Атрибуты:
SIZE=“20” – размер отображаемого поля ввода на экране
MAXLENGTH=“15” – максимальная длина вводимого

значения

- в зависимости от параметра TYPE создает различные типы полей ввода
- однострочное поле ввода

Атрибуты: SIZE=“20” – размер отображаемого поля ввода на экране MAXLENGTH=“15” – максимальная длина

Слайд 9


Пример:




MAXLENGTH=“10”>

Введите имя:
Введите серийный код:

Мурзиков Апполон Валерьевич

1212121313

Пример: Введите имя Введите серийный код Введите имя: Введите серийный код: Мурзиков Апполон Валерьевич 1212121313

Слайд 10


- поле для ввода пароля
Атрибуты:
SIZE=“20” - размер отображаемого поля ввода

на экране
MAXLENGTH=“15” - максимальная длина вводимого значения
Пример:


Введите пароль:

**********

- поле для ввода пароля Атрибуты: SIZE=“20” - размер отображаемого поля ввода на

Слайд 11

- многострочное поле ввода
Атрибуты:
NAME=“address” - имя поля ввода
ROWS=“5” - высота поля

ввода в строках
COLS=“40” - ширина поля ввода в символах


… - многострочное поле ввода Атрибуты: NAME=“address” - имя поля ввода ROWS=“5” -

Слайд 12


WRAP=“off” - не разбивать строки автоматически
“virtual” - разбивать при вводе, но передавать как

одну строку
“physical” - разбивать на строки и передавать в таком виде
Пример:

Москва,
Мичуринский пр-т,
дом 70

… WRAP=“off” - не разбивать строки автоматически “virtual” - разбивать при вводе, но

Слайд 13

Атрибуты HTML5

REQUIRED – обязательность заполнения данного элемента
DISABLED – отключить поле формы
AUTOFOCUS – стартовый

элемент формы
PLACEHOLDER – текст-заполнитель
CONTENTEDITABLE – элемент доступен для редактирования пользователем (допускается удалять текст и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.)

Атрибуты HTML5 REQUIRED – обязательность заполнения данного элемента DISABLED – отключить поле формы

Слайд 14


- поле поиска
- поле ввода телефонного номера
-

поле ввода адреса электронной почты
- поле выбора цвета

- поле поиска - поле ввода телефонного номера - поле ввода адреса электронной

Слайд 15


- виджет счетчика
- поле ввода даты

- виджет счетчика - поле ввода даты

Слайд 16


- поле ввода в виде ползункового регулятора

TYPE="range" min="0" max="10" onchange="document.getElementById('rangeValue').innerHTML=this.value;" list="rangeList">
5

Слайд 17

Элемент LABEL необходим для сопоставления текстового описания с соответствующим полем формы. Каждый элемент

LABEL может быть соотнесен с одним элементом формы.
Неявная ассоциация:




Явная ассоциация:




Элемент LABEL необходим для сопоставления текстового описания с соответствующим полем формы. Каждый элемент

Слайд 18


< DATALIST > - предоставляет способ присоединить выпадающий список возможных вариантов ввода к

обыкновенному текстовому полю.








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

Слайд 19

и

Характеристики (выберите один пункт)
Цвет





Размер


и Характеристики (выберите один пункт) Цвет name="color" value="red"> Красный … Размер Стандартные российские

Слайд 20

Элементы и атрибуты форм HTML5, поддерживаемые в браузерах

Элементы и атрибуты форм HTML5, поддерживаемые в браузерах

Слайд 21

- кнопка сброса
- кнопка для отправки формы

TYPE=“submit” VALUE=“отправить”>

очистить

отправить

КНОПКИ

- кнопка сброса - кнопка для отправки формы Пример: очистить отправить КНОПКИ

Слайд 22

- графическая кнопка
Пример:

- просто

кнопка
Пример:

КНОПКИ

- графическая кнопка Пример: - просто кнопка Пример: КНОПКИ

Слайд 23

- одиночный выбор значения из нескольких
Атрибуты:
NAME=“name” – имя возвращаемой переменной
VALUE=“yes” –

значение возвращаемой переменной (поля)
CHECKED – выбрано изначально


- одиночный выбор значения из нескольких Атрибуты: NAME=“name” – имя возвращаемой переменной VALUE=“yes”

Слайд 24

Пример:
Лимон

Апельсин

Яблоко


Пример: Лимон Апельсин Яблоко

Слайд 25

Пример:
Лимон

Апельсин

Яблоко


TYPE=“checkbox”> - множественный выбор

Пример: Лимон Апельсин Яблоко - множественный выбор

Слайд 26

- выбор значений из разворачивающегося списка значений, заданных при помощи тега .
Атрибуты:
SIZE=“1”

– начальная высота списка
MULTIPLE – возможность выбора нескольких значений


… - выбор значений из разворачивающегося списка значений, заданных при помощи тега …

Слайд 27

Пример:

SIZE=“1”

SIZE=“3”


Пример: Апельсин Банан Яблоко Груша SIZE=“1” SIZE=“3” …

Имя файла: Формы-в-HTML.pptx
Количество просмотров: 94
Количество скачиваний: 0