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

Формы в HTML

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

Элементы форм (области редактирования текста, поля ввода, меню) позволяют посетителям вводить различную информацию и выбирать нужные опции.

Тег

Описание формы помещается между парными тегами 

... .

На странице одновременно может располагаться несколько форм, однако они не могут быть вложены одна в другую.

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

• accept-charset

Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму. Помогает в ситуации, когда страницы сайта в одной кодировке, а данные нужно отправить в другой. Или когда браузер неправильно автоопределил кодировку. Например:  accept-charset="cp1251"  или  accept-charset="utf8" .

• A ction

Имя программы, которая будет обрабатывать форму.

• E nctype

Тип содержимого (метод кодирования). Например, если форма содержит файлы, то enctype="multipart/form-data" . (По умолчанию  enctype="application/x-www-form-urlencoded ").

• M ethod

Метод передачи данных от формы обрабатывающей программе. Может принимать значения:  get  или  post . При использовании  get  браузер кодирует данные, получаемые от пользователя, и добавляет к значению атрибута  action  парами имя=значение. Данные отделяются от значения атрибута  action  вопросительным знаком ( ? ). При использовании  post  данные передаются отдельно в теле запроса.

• N ame

Имя формы. Задается для JavaScript, чтобы иметь возможность обращаться к форме по имени, а не по номеру.

... Элементы формы... " width="640"

• N ovalidate

Наличие этого атрибута означает, что данные формы не должны проверяться.

• onsubmit

JavaScript-обработчик проверки правильности заполнения формы. Так как JavaScript-обработчик срабатывает локально, процесс происходит достаточно быстро.

• T arget

Фрейм, куда отправить полученную информацию (задается во фреймосодержащих документах).

Пример

onsubmit="alert(' Некого посылать'); return false;"

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

При создании обычного текстового поля размером  size  и максимальной допустимой длины  maxlength  символов, атрибут  type принимает значение  text . Если указан параметр  value , то поле будет содержать отображать  value -текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным. Пример:   value="Текст по умолчанию" " width="640"

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

• Текстовое поле (text)

Позволяет пользователям вводить различную информацию.

Тип " name=" Имя поля " size=" Размер " maxlength=" Макс. количество символов "

При создании обычного текстового поля размером  size  и максимальной допустимой длины  maxlength  символов, атрибут  type принимает значение  text . Если указан параметр  value , то поле будет содержать отображать  value -текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Пример:

  value="Текст по умолчанию"

• Поле для ввода пароля ( type= password)

Полностью аналогичен текстовому полю, за исключением того что символы, набираемые пользователем, не будут отображаться на экране.

Пример:

• Скрытое текстовое поле (type=hidden)

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

Пример :

• Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

Текст

Многострочное поле ввода текста начинается с парных тегов  . Тэг name задает имя многострочного поля. Также можно указать ширину поля( cols ) и число строк( rows ). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами  .

Пример:

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

  readonly 

Группа флажков состоит из элементов  input , имеющих одинаковые атрибуты  name   и  type(checkbox) . Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как  checked . . Пример: Красный(выбран по умолчанию)  Синий  Черный  Белый " width="640"

• Флажок ( checkbox)

Флажки  checkbox   предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

Имя переключателя " type=" Тип " value=" Значение "

Группа флажков состоит из элементов  input , имеющих одинаковые атрибуты  name   и  type(checkbox) .

Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как  checked . .

Пример:

Красный(выбран по умолчанию)  Синий  Черный  Белый

Переключатель ( radio ) имеет атрибуты  name ,  type   и  value . Атрибут  name   задает имя переключателя,  type   задает тип  radio , а атрибут value   задает значение. При необходимости можно указать параметр  checked , который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя. Пример:      Белый      Зеленый (выбран по умолчанию)      Синий      Красный      Черный " width="640"

• Переключатель( radio)

Переключатели  radio   предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

Имя переключателя " type=" Тип " value=" Значение "

Переключатель ( radio ) имеет атрибуты  name ,  type   и  value . Атрибут  name   задает имя переключателя,  type   задает тип  radio , а атрибут value   задает значение. При необходимости можно указать параметр  checked , который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Пример:

     Белый      Зеленый (выбран по умолчанию)      Синий      Красный      Черный

• Выпадающий список (select)

Тэг   представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов  . Теги   позволяют определить содержимое списка, а параметр value определяет значение строки.

Если в теге   указан параметр  selected , то строка будет изначально выбранной.

Параметр size задает, сколько строк будет занимать список. Если  size  равен 1, то список будет выпадающим. Если указан атрибут  multiple , то разрешено выбирать несколько элементов из списка(при  size = 1  не имеет смысла).

  Отображаемый текст в списке 

При создании кнопки для отправки формы необходимо указать 2 атрибута:  type=“submit”  и  value=”Текст кнопки” . Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка  имя=текст кнопки . Кнопка сброса формы( type= Reset) Тип " name=" Имя кнопки " value=" Надпись на кнопке " При нажатии на кнопку сброса( reset ), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы  не производиться. Пример: " width="640"

• Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

Тип " name=" Имя кнопки " value=" Текст кнопки "

При создании кнопки для отправки формы необходимо указать 2 атрибута:  type=“submit”  и  value=”Текст кнопки” . Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка  имя=текст кнопки .

• Кнопка сброса формы( type= Reset)

Тип " name=" Имя кнопки " value=" Надпись на кнопке "

При нажатии на кнопку сброса( reset ), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы  не производиться.

Пример: