Главная - Справочник по HTML - Тег "IMPUT"

Поддержка браузерами:

Параметры тега:

Тег <INPUT> предназначен для создания на странице элементов управления с обязательным определением их типов (флажки, кнопки и т.д.).

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

Пример:

<form>
<input ...>
</form>

Параметры тега <INPUT>

type

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

button
Создает стандартную кнопку.

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

file
Создает элемент для ввода имени локального файла. Например, кнопку "Обзор", при нажатии на которую открывается диалог «Выбор файла».

hidden
Создает невидимый для пользователя элемент. Может использоваться для отправки дополнительной, служебной информации.

image
Создает элемент формы в виде кнопки-изображения.

password
Создает строку для ввода текста, при этом отображает вводимые символы как звездочки (*).

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

reset
Создает кнопку «Сброс», которая возвращает форму в начальное состояние.

submit
Создает кнопку для отправки данных на сервер.

text
Создает строку для ввода текста.

Пример:

<input type="radio" value="xxx1">текст1<br>
<input type="radio" value="xxx2">текст2<br>
<input type="radio" value="xxx3">текст3</p>

border

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

Пример:

<input type="image" border="3">

alt

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

Пример:

<input type="image" alt="Альтернативный т екст">

align

Параметр используется для выравнивания поля относительно текста или изображений на веб-странице. Наиболее популярные параметры — left и right, создающие обтекание текста вокруг данного поля. В качестве зарезервированных имен используются следующие:

left
Выравнивает поле по левому краю окна.

right
Выравнивает поле по правому краю окна.

top
Верхняя граница поля выравнивается по самому высокому элементу строки.

bottom
Выравнивание нижней границы поля по окружающему тексту.

middle
Выравнивание середины поля по базовой линии строки.

absmiddle
Выравнивание середины поля по середине строки.

baseline
Выравнивание поля по базовой линии строки.

texttop
Верхняя граница поля выравнивается по самому высокому текстовому элементу текущей строки.

Пример:

<input type="image" align="top">

checked

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

Пример:

<input type="checkbox" checked>

disabled

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

Пример:

<input type="submit" disabled >

maxlength

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

Пример:

<input type="text" maxlength="20">

name

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

Пример:

<input type="text" name="pas">

readonly

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

Пример:

<input type="text" name="pas" readonly>

size

Устанавливает число видимых символов в text.Если размер шрифта изменяется с помощью стилей, ширина поля также меняется.

Пример:

<input type="password" size="12">

src

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

Пример:

<input type="image" src="URL">

value

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

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

Для кнопок ( input type="button, reset, submit ") устанавливает текстовую надпись на них.

Для текстовых полей ( input type="password, text" ) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value.

Для флажков и переключателей ( input type="checkbox, radio" ) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.

Пример:

<input type="radio" value="значение">

по алфавиту  /  по категориям  / скачать "Справочник по HTML"