"Формы в HTML-документе" презентация

1 слайд

1 слайд

2 слайд
Форма — это инструмент, с помощью которого HTML -документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты. Формы размещаются между тегами < FORM ></ FORM >. HTML -документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег < FORM > может содержать следующие атрибуты: 1. Тег < INPUT> : используется для внесения информации пользователем в форму. Это и есть поля, в которые пользователь вводит информацию. Каждый элемент < INPUT > включает атрибут NAME , определяющий имя данного поля (идентификатор). Далее перечислены основные типы, применяемых элементов < INPUT >:

2 слайд

3 слайд
1. TYPE = text . Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE =число (ширина окна ввода в символах) и MAXLENGTH =число (максимально допустимая длина вводимой строки в символах): Например , <INPUT TYPE=text SIZE=20 NAME=User VALUE=" Привет "> Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст «Привет», который пользователь может изменить. 2. TYPE = password . Определяет окно для ввода пароля. Абсолютно аналогичен типу text , только вместо символов вводимого текста показывает на экране звездочки (*):

3 слайд

4 слайд
3. TYPE = radio . Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: Пример, <INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Да <INPUT TYPE=radio NAME=Question VALUE="No"> Нет <INPUT TYPE=radio NAME=Question VALUE="Possible"> Возможно Определяет группу из трех радиокнопок. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes . Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible .

4 слайд

5 слайд
4. TYPE = checkbox . Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED ( показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов: Пример, <INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры <INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры <INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры <INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные : Comp = Video и Comp = Modem .

5 слайд

6 слайд
5. TYPE = hidden . Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. Пример, <INPUT TYPE=hidden NAME=version VALUE="1.1"> Определяет скрытую переменную version , которая передается обработчику со значением 1.1. 6. TYPE = submit Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику: Пример, <INPUT TYPE=submit VALUE="Отправить"> 7. TYPE = reset . Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name : Пример, <INPUT TYPE=reset VALUE=" Сброс "> .

6 слайд

7 слайд
Тег Тег TEXTAREATEXTAREA Формы могут содержать поля для ввода большого текста < TEXTAREA >: Пример, <TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA> . Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами < TEXTAREA ></ TEXTAREA > , представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

7 слайд

8 слайд
Тег Тег <SELECT><SELECT> Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом < SELECT > (содержит обязательный атрибут NAME , определяющий имя меню) и завершается закрывающимся </ SELECT >. Между ними находятся теги < OPTION >, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег < OPTION > может включать атрибут selected , показывающий, что данный элемент выбран/отмечен по умолчанию. Пример , <SELECT NAME="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </ SELECT > текст 1 текст 2 текст n Тег < SELECT > может также содержать атрибут MULTIPLE , присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню < SELECT MULTIPLE > в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE =число . Пример , < SELECT MULTIPLE SIZE =3 NAME ="имя"> <OPTION VALUE="option_1" selected>текст 1 <OPTION VALUE="option_2">текст 2 <OPTION VALUE="option_n">текст n </SELECT>

8 слайд