Конспект HTML: форма

< на главную

Общая структура формы и элементов, которые в ней могут содержаться:

<form action="адрес" method="..." enctype="...">
	<input type="..." name="...">
	<textarea name="..." rows="..." cols="...">...</textarea>
	<select name="...">
		<option value="...">
		...
	</select>	
	. . . . .
</form>

Форма

1. Атрибуты дескриптора <form>:: 1а) action; 1б) method; 1в) enctype; 1г) target; 1д) name
2. Параметры, общие для всех вложенных в форму дескрипторов:: 2а) name; 2б) disabled

Разновидности вложенных дескрипторов

3. Поле ввода (<input type=text, password>):

3а) value

3б) maxlength

3в) size

3г) readonly

4. Кнопка (<input type=reset, submit, button>):

3а) value

5. Флажок (<input type=checkbox>):

5а) value

5б) checked

6. Переключатель (<input type=radio>):

6а) value

6б) checked

7. Скрытое поле (<input type=hidden>):

7а) value

8. Поле добавления файла (<input type=file>):

8а) size

9. Текстовая область (<textarea>...</textarea>):

9а) cols

9б) rows

9в) readonly

10. Список выбора (<select>...</select>):

10а) size

10б) multiple

10г) вложенный дескриптор <option> и его атрибуты (value, selected)

10д) вложенный дескриптор <optgroup> и его атрибут label

11. <label> и его атрибуты (for, accesskey)

12. <fieldset> и вложенный в него <legend>

13. Кнопка-рисунок (<input type=image>):

1. Атрибуты дескриптора <form>

1а) action="адрес"

Задаёт URL-адрес веб-страницы, куда отсылаются данные формы и где происходит их обработка.
action - англ. действие

1б) method="POST или GET"

Определяет, как будут пересылаться данные от формы до web-сервера. Может принимать два значения: GET или POST.

GET - данные формы пересылаются путём их добавления к URL-адресу после знака "?" в формате [имя_параметра]=[значение_параметра]. Пары "параметр=значение" отделяются друг от друга символом амперсанда (&). Все специальные символы и нелатинские буквы кодируются в формате %nn, а пробел заменяется знаком плюс (+). Метод GET применяется для пересылки данных небольшого объёма, поскольку предел длины URL-адреса составляет 256 символов.
POST предназначен для пересылки данных большого объёма, файлов и конфиденциальной информации (например, паролей).

method - англ. метод
get - англ. получать, устанавливать связь
post - англ. почта

1в) enctype="значение"

Задаёт MIME-тип передаваемых данных. Может принимать два значения:

application/x-www-form-urlencoded (по умолчанию)
multipart/form-data (указывается при пересылке web-серверу файлов)

enctype ~ encryption type - тип кодирования
MIME - Multipurpose Internet Mail Extension(s) — многоцелевые расширения почты Интернета
application - приложение, прикладная программа
multipart - из нескольких частей

1г) target="значение"

Указывает, куда будет помещён документ, являющийся результатом обработки данных формы web-сервером. Параметр может содержать имя фрейма или одно из зарезервированных значений - _blank, _top, _self или _parent.

1д) name="произвольное_буквосочетание"

Параметр name может содержаться в дескрипторе form и определять название всей формы. Здесь он необязателен.

к оглавлению

2. Параметры, общие для всех вложенных в форму дескрипторов

2a) name="произвольное_буквосочетание"

Cодержится в каждом вложенном дескрипторе input, textarea, selected и именно ему эти элементы присваивают своё значение перед передачей результата ([Имя_параметра]=[значение_параметра]).

2б) disabled

Запрещает доступ к элементу формы. При наличии параметра элемент отображается серым цветом. Может использоваться со всеми дескрипторами input, textarea, selected за исключением "type=hidden".
Пример:

<input type=text name=pole2 value="Недоступное поле" disabled>

к оглавлению

3. Поле ввода (<input type=text, password>)

- text (простейшее текстовое поле)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=text name=pole31>Текст2
</form>

- password (все вводимые символы отмечаются звёздочками, копирование невозможно)

<form action="file.php" method="POST" enctype="application/x-www-form-urlencoded">
	Текст1<input type=password name=pole32 value="Пароль">Текст2
</form>

Атрибуты

3а) value="произвольный текст"
Текст поля по умолчанию.

3б) maxlength="число"
Максимальное количество символов, которое может быть введено в поле.

3в) size="число"
Видимый размер поля ввода. Но ведёт себя странновато, это не количество видимых символов.

3г) readonly
Указывает, что поле доступно только для чтения.

Примеры:

<input type=text name=pole33 value="12345" maxlength=8 size=4>

<input type=text name=pole34 value="Только для чтения" size=40 readonly>

Примечание: Если форма состоит только из одного текстового поля, то кнопку отправки данных ("Submit") можно и не создавать. Информацию можно отослать путёт нажатия на клавиатуре клавиши Enter.

к оглавлению

4. Кнопка (<input type=reset, submit, button>)

- reset (кнопка очищения формы, reset - англ. сброс)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=reset name=pole41>Текст2
</form>

- submit (кнопка отправки данных, submit - англ. представить)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=submit name=pole42>Текст2
</form>

- button (обычная командная кнопка, имеет смысл использовать только с прикреплённым к ней скриптом)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=button name=pole43>Текст2
</form>

Атрибуты

value="произвольный текст"
Текст, отображаемый на кнопке. От подвида кнопки результат не зависит.
Пример:

<input type=button name=pole44 value="Текст на кнопке">

(Примечание: вставление параметров maxlength, size, width, height в код кнопки ни к каким последствиям не приводит.)

к оглавлению

5. Флажок (<input type=checkbox>)

checkbox (поле для установки флажка, который можно поставить или сбросить)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=checkbox name=pole51>Текст2
</form>

Атрибуты

5а) value="произвольный текст"
Задаёт значение, которое будет передано web-серверу, если флажок отмечен. Если флажок снят, значение не передаётся. Если параметр не задан, используется значение по умолчанию - "on".

5б) checked
Указывает, что флажок по умолчанию отмечен.

Элементы checkbox можно объединить в группу. Для этого необходимо установить одинаковое значение параметра name. Чтобы получить все значения на сервере, после названия поля следует указать квадратные скобки (это признак массива в языке PHP).
Пример:

<input type="checkbox" name="chb[]" value="1">Текст 1<br>
<input type="checkbox" name="chb[]" value="2" checked>Текст 2

к оглавлению

6. Переключатель (<input type=radio>)

radio (элемент-переключатель)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=radio name=pole61>Текст2
</form>

Атрибуты

6а) value="произвольный текст"
Указывает значение, которое будет передано web-серверу, если переключатель выбран. Если ни одно из значений не выбрано, никаких данных передано не будет.

6б) checked
Обозначает переключатель, выбранный по умолчанию.

Элемент-переключатель имеет осмысленность только в составе группы подобных элементов, из которых может быть выбран только один. При отправке данных формы пересылается только значение выбранного переключателя. Для объединения переключателей в группу необходимо установить одинаковое значение параметра name и разное значение параметра value.
Пример:

<input type="radio" name="rd1" value="val1">Значение1<br>
<input type="radio" name="rd1" value="val2" checked>Значение2

к оглавлению

7. Скрытое поле (<input type=hidden>)

hidden (Скрытый элемент, не видимый пользователю, но значение которого отправляется вместе со всеми данными формы. К примеру, может содержать данные из предыдущей заполненной формы или уникальное имя пользователя.)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	Текст1<input type=hidden name=pole71>Текст2
</form>

Атрибуты

7а) value="произвольный текст"
Значение скрытого поля.

к оглавлению

8. Поле добавления файла (<input type=file>)

file (Поле ввода имени файла с кнопкой "Обзор", позволяет отправить файл с компьютера на web-сервер. В различных браузерах представление этого элемента может сильно отличаться.)

<form action="file.php" method="POST" enctype="multipart/form-data">
	Текст1<input type=file name=pole81>Текст2
</form>

Атрибуты

8а) size="число"
С помощью этого атрибута в браузерах MF3.6, Opera11 и IE8 можно задать протяжённость поля. (Но число обозначает не количество символов.) В браузерах Safari5 и GCh9 в силу специфики представления элемента этот параметр ни на что не влияет.
Пример:

<input type=file name=pole82 size=1>

(Замечание: добавление в код параметра value на элементе никак не сказывается.)

к оглавлению

9. Текстовая область (<textarea>...</textarea>)

<form action="file.php" method="POST" enctype="application/x-www-form-urlencoded">
<textarea name="имя">Текст по умолчанию</textarea>
</form> Исходное содержимое отображается моноширинным шрифтом и предформатируется. В разных браузерах значения параметров по умолчанию и способ отображения могут несколько отличаться.

Атрибуты

9а) cols="число"
Число столбцов видимого текста (+что-то резервируется под полосу прокрутки).

9б) rows="число"
Число строк видимого текста (+что-то резервируется под полосу прокрутки).

9в) readonly
Содержимое предназначено только для чтения.
Пример:

<textarea name=92 cols=5 rows=4 readonly>123456789abc</textarea>

к оглавлению

10. Список выбора (<select>...</select>)

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
    <select name="имя">
        <option>элемент1</option>
        <option>элемент2</option>
    </select>
</form>

Атрибуты

10а) size="число"
Число одновременно видимых элементов списка. По умолчанию = 1.
Пример при size=3:

10б) multiple
Указывает, что из списка можно выбрать сразу несколько элементов одновременно. Чтобы получить все значения на сервере, после названия списка следует указать квадратные скобки (это признак массива в языке PHP). Для выбора одновременно нескольких пунктов используются щелчки мышью при нажатой клавише Ctrl или Shift.
Пример:

<select name="slct[]" size=3 multiple>
	<option>элемент 1</option>
	<option selected>элемент 2</option>
	<option>элемент 3</option>
	<option selected>элемент 4</option>
</select>

multiple - многочисленный, множественная цель

10в) вложенный дескриптор <option> и его атрибуты (value, selected)

value - задаёт значение, которое будет передано web-серверу, если пункт списка выбран. Если параметр не задан, то посылается текст пункта (т.е. то, что написано между <option> и </option>).
selected - указывает, какой пункт списка выбран изначально.

Пример:

<select name=pole104>
	<option>элемент 1</option>
	<option selected>элемент 2</option>
	<option>элемент 3</option>
</select>

(а также см. предыдущий пример)

10г) вложенный дескриптор <optgroup> и его атрибут label
Дескриптор <optgroup> позволяет объединить несколько пунктов в подгруппу. Название подгруппы указывается в параметре label. Элемент optgroup не может содержать других элементов optgroup.

<select name=105>
	<option>элемент 1</option>
	<optgroup label="Подгруппа 1">
		<option>элемент 2</option>
		<option>элемент 3</option>
	</optgroup>
	<option>элемент 4</option>
</select>

к оглавлению

11. <label> и его атрибуты (for, accesskey)

<label>...</label>
Дескриптор позволяет связать элемент формы и некую надпись. Делается это для того, чтобы при щелчке на надписи фокус автоматически передавался соответствующему элементу формы.

1-ый способ:
Вставить в тэг <label> параметр for="буквосочетание", и это же буквосочетание указать в параметре id элемента формы.
Пример:

текст1 <label for="id_pole111" accesskey="q">Связанный текст</label> текст2<br>
Ещё какой-то текст
<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	<input type="text" name="pole111" id="id_pole111">
</form>

текст1 Связанный текст текст2
Ещё какой-то текст (В тэге <input> значения параметров name и id можно и даже логично делать одинаковыми.)

2-ой способ:
Разместить все связанные элементы внутри дескриптора <label>.
Пример:

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
	<label accesskey="w">
		Пароль: <input type="password" name="pole112">
	</label>
</form>

В текст тега <label> можно добавить параметр accesskey="символ", как в указанных выше примерах. В браузерах IE8, Safari5 и GCh9 c его помощью при нажатии клавиш <Alt>+<символ> можно перейти непосредственно к полю формы. Но нужно быть внимательным к раскладке клавиатуры. В Mozilla Firefox 3.6 и Opera11 команда не работает.

label - англ. этикетка, ярлык

к оглавлению

12. <fieldset> и вложенный внутрь него <legend>

Дескриптор <fieldset> позволяет сгруппировать элементы формы. Вложенный дескриптор <legend> размещает надпись на линии. Пример:

<form action="file.php" method="GET" enctype="application/x-www-form-urlencoded">
		<input type=checkbox name="pole121">Флажок 1
	<fieldset>
		<legend>Группа 1</legend>
		<input type=checkbox name="pole122">Флажок 2
		<input type=checkbox name="pole123">Флажок 3	
	</fieldset>;
		<input type=checkbox name="pole124">Флажок 4
</form>

(Примечание: вставка параметров width и height ни к каким последствиям не приводит.)
field - англ. поле
set - англ. набор, множество
legend - англ. надпись

к оглавлению

13. Кнопка-рисунок (<input type=image>)

P.S. Позволяет вместе стандартной кнопки использовать свой рисунок. Щелчок мышью по изображению отправляет данные формы на сервер.
Пример оформления (без результата):

<input type="image" name="my_button" src="graphic/sendme.gif" alt="Send me">










  < на главную
  к оглавлению