Формы

<form>...</form>

Тэг <FORM> создает поток данных, отправляемый от клиента на сервер, и имеет атрибуты: accept, accept-charset, action, enctype, method, name, target.

Атрибуты	Назначения	Примеры
accept	Определение списка типа данных (по умолчанию отсутствует )	<form accept="text/html, image/gif">
accept-charset	Задание списка допустимых кодировок	accept-charset="список кодировок"
action	Адрес серверного сценария , получающего и обрабатывающего данные, вводимые пользователем при помощи формы, или почтовый адрес.	<FORM action="http://www.название.домен/имя программы" method="post"> <FORM action="mailto:адрес@сервер.домен" method="post">
enctype	Способ кодирования содержимого формы. Три значения: multipart/form-data text/plain application/x-www-form-urlencoded (по умолчанию) Если форма не содержит прикрепляемых файлов, то значение атрибута можно не указывать; если форма содержит поля типа file, значение этого атрибута должно быть "multipart/form-data".	Enctype=text/plain РУССКИЙ ENGLISH В этом случае сформирован входной поток для сервера STDIN: myText=РУССКИЙ ENGLISH botton1=Отправить сообщение Enctype=application/x-www-form-urlencoded" enctype="application/x-www-form-urlencoded РУССКИЙ ENGLISH В этом случае сформирован входной поток для сервера STDIN: myText=%D0%D3%D1%D1%CA%C8%C9%0D%0AENGLISH%0D%0A&botton1=%CE%F2%EF%F0%E0%E2%E8%F2%FC+%F1%EE%EE%E1%F9%E5%ED%E8%E5
method	Назначение протокола пересылки данных на сервер: GET (по умолчанию) - используется в тех случаях, когда объем передаваемых данных невелик; POST - если передается большой объем данных или передается пароль.	<FORM action="http://www.<название.домена>/<имя программы>" method="post">
name	Имя формы (не обязательный атрибут).	<form name="Forma1">
target	Имя окна или фрейма размещения формы: _blank - новое окно _parent, _self, _top - то же окно	<form target="_blank">

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

Контейнер <form>...</form> может содержать элементы

текстовая область (textarea),
список (select),
текстовое поле (textfield),
"флажок" (checkbox),
"радиокнопка" (radiobutton),
кнопка" (button),
поле для ввода пароля (password),
скрытое поле (hidden),
прикрепление файлов (file),
кнопкf, которая очищает форму (reset),
кнопка, которая передает форму на сервер (submit),

каждый из которых помогает клиенту ввести информацию, передаваемую на сервер, и отражает ее специфику. Все элементы форм кроме submit могут существовать вне формы.

Текстовая область и список задают с помощью тэгов <textarea>, <select>. Остальные элементы форм создаются тэгом, имеющим начало: <input type=" ... " , где значения атрибута type и определяют тип элемента.

<textarea>...</textarea>

Этот тэг имеет атрибуты: accesskey, cols, rows, disabled, name, title, readonly, wrap.

Атрибуты	Назначения	Активные примеры
accesskey	Буквенная клавиша, устанавливающая фокус (в сочетании с клавишей Alt)	Попробуй напиши! Переход на новую строку с помощью клавиши <strong>Enter</strong>
cols	Количество колонок в окне для ввода текста
rows	Количество строк в окне для ввода текста
disabled	Текстовая область не может быть активизирована пользователем
name	Имя области для дальнейшей обработки
title	Всплывающая подсказка
readonly	Только для чтения
wrap	Значения: hard, soft - текст автоматически переносится на новую строку; off - переход на новую строку с помощью клавиши Enter.

<select>...</select>

<option>...</option>

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

Тэги	Атрибуты	Назначения	Активные примеры
<select>	accesskey	Буквенная клавиша, устанавливающая фокус (в сочетании с клавишей Alt)	Список со множественным выбором Список с единственным выбором
	disabled	Текстовая область не может быть активизирована пользователем
	name	Имя области для дальнейшей обработки
	size	Kоличество видимых на экране пунктов списка
	title	Всплывающая подсказка
	multiple	Множественный выбор


<option>
	selected	Выделенный пункт меню
	title	Всплывающая подсказка
	value	Число для выбора

<input>

Этот элемент не имеет конечного тэга.

Этот тэг имеет атрибуты: type, accept, accesskey, align, alt, name, border, height, width, hspace, vspace, maxlength, size, src, value

Разнообразие элементов возможно благодаря атрибуту type, который и определяет тип элемента.

Атрибуты

Назначения

Примеры

type

Значения:

button - создает произвольную кнопку

checkbox - создает флажок Ваши любимые цветы:

Роза

Пеон

Гвоздика

Георгин

Астра

Лилия

Маргаритки

file - создает кнопку - выбора файла и его присоединение к форме

hidden - элемент скрыт от пользователя. Это используют для включения некой информации в форму

image - создает кнопку - рисунок

password - поле ввода для пароля, информация отображается в виде звездочек

radio - создает один переключатель
Выбери президента:

Абрамович

Березовский

Задорнов

Касперский

Путин

Явлинский

Против всех

reset - создает кнопку, которая очищает форму

submit - создает кнопку, которая подтверждает и передает форму на сервер
Это форма

text - поле формы для ввода текста

accept

Список типов данных:

application/msexcel

application/msword

application/pdf

<input name="text" type="text" accept="application/msword">

accesskey

Буквенная клавиша, устанавливающая фокус (в сочетании с клавишей Alt)
<input name="text" type="text" accesskey="t">

align

Выравнивание может принимать значения:

absbottom

absmiddle

baseline

right

bottom

left

middle

texttop

top

<input name="text" type="text" align=middle >

alt
Всплывающая подсказка <input type="image" alt="Мамонт" >

name
Имя элемента формы для дальнейшей обработки на сервере, должно присутствовать во всех элементах INPUT, кроме кнопок подтверждения сброса. <input name="text" type="text">

border
Толщина рамки <input type="image" alt="Мамонт"
border="2" >

height, width
Высота или ширина рамки (в пикселах) <input name="text" type="text" title="Title" value="Текстовое поле"alt="Текстовое поле" height="50"width="50" vspace="400">

hspace, vspace
Минимальное расстояние (в пикселах) между картинкой в форме и рамкой формы по горизонтали или по вертикали. <input name="text" type="text" title="Title" value="Текстовое поле"alt="Текстовое поле" height="50" hspace="50" vspace="400">

maxlength
Максимальное количество символов, которое может быть записано в строке ввода, или размер файла, присоединяемого к форме. <input name="text" type="text" title="Title" maxlength="50" >

size
Длина поля ввода текста задается в символах <input name="text" type="text" title="Title" alt="Текстовое поле" size="50" >

src
URL-адрес рисунка в форме. <input type="image" alt="Мамонт" vspace="400" hspace="50" src="pictures/hobot.gif" border="2" >

value
значение кнопки по умолчанию или надпись на кнопке <input type="Button" value="Это кнопка" >

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

События, связанные с мышью:

onclick -щелчок мышью на элементе;
ondblclick -двойной щелчок мышью на элементе;
onmousedown -кнопка мыши нажата;
onmouseup -кнопка мыши отпущена;
onmousemove -указатель мыши перемещен в область элемента;
onmouseover -указатель мыши расположен на элементе;
onmouseout -указатель мыши перемещен за границы области элемента.

События, связанные с выбором элементов и редактированием форм:

onfocus - элемент выбран (фокусирован);
onselect - часть текста внутри элемента выделена;
onchange - данные в элементе были изменены;
onblur - элемент перестал быть выбран (потерял фокус).

События, связанные с клавиатурой:

onkeydown - клавиша нажата;
onkeyup - клавиша отпущена;
onkeypress - клавиша нажата и отпущена.

Вопросы для самоконтроля

Оглавление