Forms - формы презентация

поля ввода, поля выбора, радиокнопки, кнопки подтверждения, метки, легенды и др.
Позволяет передать данные на сервер.
Является block-level элементом – отделяется дополнительными пустыми строками перед и после.
Контейнерный тег (содержит закрывающий тег).
Форма не может быть вложенной в другую!!!!!
Внутри формы может быть таблица, но не форма

/> Last name:


 

зависит от значения атрибута type.
Не является контейнерным - Не имеет закрывающего тега. В XHTML должен быть правильно закрыт -

  First name:
  Last name:
 

- 20 символов

E-mail:
Pin:

File
определяет поле ввода для загружаемого файла.
Поле ввода и "Browse..." кнопка


EXAMPLES\Form_Example.html

поле маскируются – отображаются символами * или кружочками.
При использовании get – в адресной строке – что ввели


Hidden
определяет скрытое поле.
Поле невидимо для пользователя.
Часто содержат значения по умолчанию или значения, изменяемые с использованием JavaScript.
Используется для передачи дополнительной информации для обработчика.

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


I have a bike


I have a car

Radio
определяет радио-кнопку.
Пользователь может выбрать только одну кнопку из группы.
name в группе – должно быть одинаковое, но значения value - должны быть разными

Male
Female

все поля формы в их начальные значения.



Submit
определяет кнопку подтверждения (типа submit).
Используется для отправки данных на сервер.
Данные передаются программе, указанной в атрибуте action формы.

Email:

активизации JavaScript скрипта.



Image
определяет картинку как кнопку типа submit.
Атрибуты src и alt являются обязательными для .
При передаче по нажатию на этой картинке будут переданы координаты точки, где нажали
pic_name.x=219, pic_name.y=220
Используются для карты – выбор города.... – для каждого фрагмента пишется свой обработчик

цвета.
date
Поле выбора даты в календаре
email
Поле ввода адреса электронной почты
number
Поле ввода (выбора) числа (можно дополнительно задать атрибуты – min, max, step, value)
range
Поле задания значения из диапазона (можно дополнительно задать атрибуты – min, max, step, value)
...

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

  Name:
  Email:
 

определяет значение, связанное с этим элементом. Это значение, которое будет передаваться обработчику формы
Обязательный для и .
Нельзя использовать с .
Для кнопок: определяет текст (надпись) на кнопке.
для кнопок-картинок: определяет символьный результат поля, передаваемый в скрипт.
для checkbox и radio кнопок: определяет результат выбранного элемента. Результат передается обработчику формы
Для полей hidden, password и text: определяет значение по умолчанию для элемента

  First name:
  Last name:
 

type="file">
Работает только для post
Не во всех браузерах корректно работает.
Можно указать несколько значений через запятую.
Должен быть у формы установлен enctype=”multipart/form-data”

Значения
left - Left-aligns the image (this is default)
right - Right-aligns the image
top - Top-aligns the image
middle - Middle-aligns the image
bottom - Bottom-aligns the image

CSS:

First name:
Last name:

This is some text This is some text This is some text.

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

First name:
Last name:
width="48" height="48"/>

загружена.
Для элементов или .
Выбрать элемент можно также после загрузки формы, используя JavaScript.

  value="Car" checked="checked" />
I have a car

общая стоимость покупок)
Не передается вообще фокус этому полю
Средствами JavaScript можно сделать элемент недоступным или доступным.
Нельзя применять к .

  First name:
  Last name: disabled="disabled" />
 

нельзя).
Работает для или

  Name: maxlength="75" />
  Email: maxlength="35" />
 

не может быть изменено, но пользователь сможет в него перейти, выделить и скопировать данные из него.
Можно использовать данный атрибут для того, чтобы предотвратить изменение данных пользователем до наступления некоторого события (например, выбора определенного checkbox,...) с помощью JavaScript можно изменить этот атрибут и сделать поле редактируемым.
Можно использовать для или .

  Email:
  Country: value="Norway" readonly="readonly" />
 

Атрибут readonly

- определяет количество символов, которые будут видимыми.
Для других элементов определяет ширину поля в пикселях.
Рекомендуется использовать стили:
CSS:
{ height:100px; width:100px; }

  Email:
  PIN: maxlength="4" size="4" />
 

type="image">
Является обязательным для

First name:
Last name:

содержать неограниченное количество символов и отображается моноширинным шрифтом (обычно Courier).
Размер поля по умолчанию зависит от браузера, можно задать с помощью атрибутов cols и rows, но лучше с помощью CSS свойств height и width.

cols - количество символов в строке
rows - количество строк
disabled=“disabled” – определяет будет ли данное текстовое поле доступно
name – задает имя текстового поля
readonly=“readonly” – определяет будет ли данное поле доступно для редактирования
...
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. <br>

имеет. Но используется для удобства пользователей, если пользователь щелкает на тексте метки, то это активизирует соответствующий элемент.
Для того, чтобы установить связь между и соответствующим элементом он должен быть равен атрибуту id связанного элемента.
Не поддерживается в Safari 2 и более ранних версиях браузеров.
Атрибут for – определяет элемент формы, связанный с меткой

  Male  
  Female  

вокруг связанных элементов формы.
Тег

позволяет задать заголовок для группы элементов.
Группы можно вкладывать одну в другую

группе.

Атрибут align - Определяет выравнивание заголовка (Not in HTML 5)
top | bottom | left | right

задаются с помощью контейнерного тега

Атрибуты:
disabled=“disabled” - Устанавливет список в недоступное состояние (неактивное, некликабельное)
multiple=“multiple” - Устанавливает множественное выделение элементов – одновременно можно выбрать несколько значений из списка (для Windows – CTRL, SHIFT- если подряд)
name - имя списка элементов (drop-down list) используется в скриптах
size - Количество видимых одновременно элементов списка,
По умолчанию=1,
Не рекомендуется больше 4
Если кол-во элементов более 1, и более чем в size, то будет добавлена линейка прокрутки
Не поддерживается во всех браузерах
...
  Volvo   Saab   Mercedes   Audi

- Делает элемент в списке недоступным
label - Задает краткую метку для элемента (Поддерживается не во всех браузерах).
selected=“selected” - Задает элементы, выбранные по умолчанию
value - Задает значение, которое будет передаваться обработчику (затем обрабатываем) - Пользователь будет видеть тот текст, что между откр.и закр.тегами, а передается то, что в value

если список длинный

Атрибуты:
label - задает название группы
disabled=“disabled” - делает группу неактивной

поместить содержимое, например текст или картинку. Это отличает эту кнопку от кнопки, создаваемой с помощью input.
Всегда задают атрибут type.

использования в скриптах)
type = button | reset | submit - тип кнопки
value – значение
Internet Explorer - отправляет текст между и ,
Др. браузеры – значение атрибута value.
Для форм лучше использовать элемент input для создания кнопок на HTML формах.
Не поддерживается во всех браузерах

  Choose your favorite subject:   value="HTML">HTML   CSS

элемента при переходе по нажатию Tab

accesskey=”N” – по нажатию на Alt+N (Alt+Shift - Firefox) автоматически перейдем на этот элемент, можно нужную букву выделить, подчеркнуть...