Тег INPUT

Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной параметр тега INPUT, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (checkbox), флажок (radiobutton), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.

Синтаксис
<form>
<input ...>
</form>

Закрывающий тег
Не требуется.

Параметры
align — определяет выравнивание изображения.
alt — альтернативный текст для кнопки с изображением.
border — толщина рамки вокруг изображения.
checked — предварительно активированный переключатель или флажок.
disabled — блокирует доступ и изменение элемента.
maxlength — максимальное количество символов разрешенных в тексте.
name — имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly — устанавливает, что поле не может изменяться пользователем.
size — ширина текстового поля.
src — значение элемента.

Пример 1. Использование тега INPUT

<html>
<body>

<form name=test method=POST action=/cgi-bin/handler.cgi>
<p><b>Ваше имя:</b><br>
<input name=nick type=text size=40>
</p>
<p><b>Каким браузером в основном пользуетесь:</b></p>
<p>
<input type=radio name=browser value=ie> Internet Explorer<br>
<input type=radio name=browser value=nc> Netscape<br>
<input type=radio name=browser value=opera> Opera<br>
<input type=radio name=browser value=firefox> FireFox<br>
<input type=radio name=browser value=mozilla> Mozilla <br>
</p>
<p>Комментарий<br>
<textarea name=comment cols=40 rows=7></textarea>
</p>
<p>
<input type=submit value="Отправить">
<input type=reset value="Очистить">
</p>
</form>

</body>
</html>

Описание параметров тега INPUT

Параметр ALIGN

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

Синтаксис
<input type=image align=absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top>

Применяется
<input type=image>

Аргументы
В таблице 1 перечислены возможные значение параметра align и результат его использования.

Таблица 1. Использование значений параметра align
Значение align Описание Пример
absbottom Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
absmiddle Середина изображения выравнивается по средней линии текста. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
bottom или baseline Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
left Изображение располагается по левому краю родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle Середина изображения выравнивается по базовой линии текущей строки текста. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right Изображение выравнивается по правому краю родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
texttop Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

 

Значение по умолчанию
bottom

Пример 2. Выравнивание поля с изображением

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input src=send.gif width=48 height=24 type=image align=right>
</form>
</body>
</html>

Примечание
Хотя все значения параметра align поддерживаются браузерами, аргументы absbottom, absmiddle, baseline и texttop не описаны спецификацией HTML 4.


Параметр ALT

Описание
Параметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.

Синтаксис
<input type=image alt="Текст">

Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию
Нет.

Пример 3. Добавление альтернативного текста

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
<input src=send.gif width=48 height=24 type=image alt="Отправить форму на сервер">
</form>
</body>
</html>

Параметр BORDER

Описание
Браузеры обрабатывают изображения, добавленные через тег INPUT, подобно рисункам, созданным с помощью тега IMG. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.

Синтаксис
<input type=image border=толщина рамки>

Аргументы
Любое целое положительное число в пикселах.

Значение по умолчанию
0

Пример 4. Добавление рамки к изображению

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
...
<input src=send.gif width=48 height=24 type=image border=2>
</form>
</body>
</html>

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


Параметр CHECKED

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

Синтаксис
<input type=checkbox checked>
<input type=radiobutton checked>

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 5. Помечаем переключатели

<html>
<body>
<form method=POST action=/cgi-bin/handler.cgi>
<b>С какими операционными системамы вы знакомы?</b><br>
<input type=checkbox name=option1 value=a1 checked>Windows 95/98<br>
<input type=checkbox name=option2 value=a2>Windows 2000<br>
<input type=checkbox name=option3 value=a3>System X<br>
<input type=checkbox name=option4 value=a4>Linux<br>
<input type=checkbox name=option5 value=a5>X3-DOS
</form>
</body>
</html>

Параметр DISABLED

Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис
<input type=... disabled>

Применяется
Ко всем элементам формы.

Аргументы
Нет.

Значение по умолчанию
По умолчанию этот параметр выключен.

Пример 6. Запрет доступа к форме

<html>
<body>
<form method=GET action=/cgi-bin/handler.cgi>
<input type=text size=30 onFocus="this.form.submit.disabled=0"><br>
<input type=submit name=submit value="Отправить" disabled>
</form>
</body>
</html>

Параметр MAXLENGTH

Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис
<input type=text maxlength=число>
<input type=password maxlength=число>

Аргументы
Любое целое положительное число в символах.

Значение по умолчанию
Ввод символов не ограничен.

Пример 7. Ограничение ввода числа символов в поле

<html>
<body>
<form method=GET action=/cgi-bin/handler.cgi>
<input type=text size=30 maxlength=100><br>
<input type=submit name=submit value="Отправить">
</form>
</body>
</html>

Параметр NAME

Описание
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.

Синтаксис
<input type=... name=имя>

Применяется
Ко всем элементам формы.

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

Значение по умолчанию
Нет.

Пример 8. Использование имени поля

<html>
<head>
<script language="JavaScript">

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

}

</script>
</head>
<body>

<form>
<b>Введите текст</b><br>
<input type=text name=comment><br>
<input type=button value="ОК" onClick="dataField(this.form)">
</form>

</body>
</html>

Параметр READONLY

Описание
Когда к тегу INPUT добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис
<input type=text readonly>
<input type=password readonly>

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 9. Поле только для чтения

<html>
<body>

<form>
<input type=text name=comment value="Введенный текст не может изменяться" readonly>
</form>

</body>
</html>

Параметр SIZE

Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис
<input type=text size=ширина>
<input type=password size=ширина>

Аргументы
Любое целое положительное число.

Значение по умолчанию
20

Пример 10. Ширина поля

<html>
<body>

<form>
<input type=text size=40>
</form>

</body>
</html>

Параметр SRC

Описание
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.

Синтаксис
<input type=image src=URL>

Аргументы
В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию
Нет.

Пример 11. Путь к графическому файлу

<html>
<body>

<form>
...
<input type=image src=/images/send.gif>
</form>

</body>
</html>

Параметр TYPE

Описание
Сообщает браузеру, к какому типу относится элемент формы.

Синтаксис
<input type=button | checkbox | file | hidden | image | password | radio | reset | submit | text>

Аргументы
В таблице 2 перечислены возможные значение параметра type и получаемый вид поля формы.

Таблица 2. Значения параметра type
Тип Описание Вид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. Пиво
Чай
Кофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. Пиво
Чай
Кофе
reset Кнопка для возвращение данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Значение по умолчанию
text

Пример 12. Добавление переключателей

<html>
<body>

<form action=/cgi-bin/handler.cgi>
<input type=radio name=drink value=rad1> Пиво <br>
<input type=radio name=drink value=rad2> Чай<br>
<input type=radio name=drink value=rad3> Кофе
<p><input type=image src=/images/imgbutton.gif width=91 height=25 border=0>
</form>

</body>
</html>

Параметр VALUE

Описание
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара имя/значение, где имя задается параметром name тега INPUT, а значение — параметром value.

В зависимости от типа элемента параметр value выступает в следующей роли:

  • для кнопок (input type=button | reset | submit) устанавливает текстовую надпись на них;
  • для текстовых полей (input type=password | text) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value;
  • для флажков и переключателей (input type=checkbox | radio) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.

Синтаксис
<input type=... value=значение>

Применяется
Ко всем элементам формы.

Аргументы
Любая текстовая строка.

Значение по умолчанию
Нет.

Пример 13. Добавление значения поля

<html>
<body>

<form>
<b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b><br>
<input type=radio name=answer value=a1>Офицерский состав<br>
<input type=radio name=answer value=a2>Операционная система<br>
<input type=radio name=answer value=a3>Большой полосатый мух
</form>

</body>
</html>

Материал взят с сайта htmlbook.ru