Веб Навсегда.инфоHTML-теги → INPUT

Реклама


!!! Ваша ссылка здесь всего за 10 руб в месяц на всех страницах сайта!!!

INPUT

Описание элемента

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

INPUT должен быть обязательно внутри тега FORM, если вы хотите, чтобы данные с него отправлялись на сервер. Хотя его можно использовать в любом месте.

Синтаксис

<input type="тип" {align alt border maxlenght name size src value = "выравнивание" | "значение" | "значение" | "значение" | "имя" | "значение" | "URL" | "значение"} (checked disabled readonly)>

Возможные параметры

type - задаёт тип кнопки.

align - задаёт выравнивание изображения и его обтекание другими элементами

alt - Добавляет всплывающую подсказку к изображению.

border - Устанавливает толщину границ.

maxlenght - Максимальное количество символов в поле.

name - Имя кнопки

size - Ширина текстового поля.

src - Путь к изображению.

value - Значение элемента

checked - Активированный по умолчанию элемент.

disabled - Блокирует возможность изменения элемента

readonly - Не даёт пользователю изменять поле.

Параметр TYPE

Задаёт тип поля. Не смотря на то, что этот параметр в принципе не является обязательным, но его использование определяет вид тега INPUT.

Некоторые параметры INPUT могут отсутствовать и не работать при некоторых type.

Возможные аргументы:
text - текстовое поле
password - поле с паролем (текст скрыт звёздочками)
radio - радио-кнопка (переключатель)
checkbox - флажок
hidden - скрытое поле (не показывается на странице)
button - кнопка
submit - кнопка отправки данных на сервер
reset - кнопка возвращения формы в исходное состояние
file - поле отправки файла
image - кнопка с изображением

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

Параметр ALIGN

Задает выравнивание плавающего фрейма на странице и его обтекание другими элементами.

Возможные аргументы:
left - выравнивание по левому краю
right - выравнивание по правому краю
bottom - выравнивание нижней границы по тексту
middle - выравнивание изображения серединой по базовой линии
top - выравнивание по самому высокому элементу строки

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

Параметр ALT

Добавляет всплывающую подсказку к INPUT в случае, если параметр type имеет значение image. Эта подсказка появляется, если задержать курсор на блоке неподвижно на несколько секунд.

Возможные аргументы:
Любая строка.

Значение по умолчанию:
Отсутствует.

Параметр BORDER

Задаёт толщину границы элемента.

Возможные аргументы:
Любое целое число больше или равное нулю.

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

Параметр MAXLENGHT

Устанавливает максимально возможное количество символов, которое пользователь может ввести в поле. Имеет смысл в случаях, когда поле является текстовым (text или password)

Возможные аргументы:
Любое целое число больше или равное нулю.

Значение по умолчанию:
Количество символов не ограничено

Параметр NAME

Задаёт уникальное имя элемента. Используется для идентификации элемента в случаях когда он передаёт своё значение на сервер или для доступа через клиентские скрипты.

Возможные аргументы:
Латинские символы и цифры.

Значение по умолчанию:
Отсутствует

Параметр SIZE

Указывает ширину текстового поля в символах. Ширина напрямую зависит от размера текста, его гарнитуры, шрифта и т.д. и меняется пропорционально этим параметрам. Имеет смысл только в случае, когда параметр type имеет значение text или password.

Возможные аргументы:
Любое целое число больше нуля.

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

Параметр SRC

Указывает путь к изображению, которое будет использоваться в качестве кнопки. Имеет смысл только при type="image"

Возможные аргументы:
Абсолютный или относительный URL.

Значение по умолчанию:
Отсутствует

Параметр VALUE

Устанавливает значение по умолчанию. Имеет важное значение в случае отправки данных на сервер или использования клиентских скриптов. Используется вкупе с name. Т.е. каждому name должно соответствовать определённое value.

Возможные аргументы:
Сильно зависит от значения параметра type. Если type равно:

  • button,reset или submit - появляется надпись на кнопках
  • text или password - текстовое значение, которое уже введено и может быть изменено пользователем
  • radio или checkbox - для каждого элемента с одинаковым name должно быть установлено определённое value, чтобы после отправки данных серверу было понятно, какой именно пункт выбран.

Значение по умолчанию:
Отсутствует

Параметр CHECKED

Этот параметр, если он присутствует, то он помечает и делает уже выбранным данный элемент. Имеет смысл только при type равном radio или checkbox.

Возможные аргументы:
Нет аргументов.

Значение по умолчанию:
Выключен

Параметр DISABLED

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

Возможные аргументы:
Нет аргументов.

Значение по умолчанию:
Выключен

Параметр READONLY

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

Возможные аргументы:
Нет аргументов.

Значение по умолчанию:
Выключен

Примеры использования

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример тега INPUT</title>
</head>
<body>
<script type="text/javascript"> 
function doit()
{
 if (document.forma.check[0].checked==true) document.forma.name.disabled=false;
  else document.forma.name.disabled=true;
 if (document.forma.check[1].checked==true) document.forma.family.disabled=false;
  else  document.forma.family.disabled=true;
 if (document.forma.check[2].checked==true) document.forma.passw.disabled=false;
  else  document.forma.passw.disabled=true;
}
</script>
 <form method="POST" action="script.php" name="forma">
  <input readonly type="text"value="Нельзя сменить эту надпись, но можно получить фокус поля." style="width:400px;">
  <p>Ниже представлены радио-кнопки:<br>
   <input name="radiobutton" type="radio" value="select1"> Первая кнопка<br>
   <input name="radiobutton" type="radio" value="select2"> Вторая кнопка<br>
   <input name="radiobutton" type="radio" value="select3"> Третья кнопка<br>
  Обратите внимание, что можно выбрать только одну кнопку из этих 3-х. Это потому, что у кнопок одинаковое имя.</p>
  <p>А теперь давайте поставим галочку напротив того элемента, который мы хотим ввести:<br>
   <input name="check" type="checkbox" value="name" onClick="doit();"> Ввести имя<br>
   <input name="check" type="checkbox" value="family" onClick="doit();"> Ввести фамилию<br>
   <input name="check" type="checkbox" value="pass" checked onClick="doit();"> Ввести пароль<br>
  Вот тут уже можно выбрать сколько угодно много вариантов. По выбору будет сниматься атрибут <i>readonly</i>. с соответствующих полей.</p>
  <p>И теперь можно ввести имя, фамилию или пароль.<br>
   <input name="name" disabled type="text" value="Имя"><br>
   <input name="family" disabled type="text" value="Фамилия"><br>
   <input name="passw" type="password" value="" onchange="document.forma.res.disabled=false;"> - пароль<br>
  Эти поля поля будут открыты или закрыты для редактирования через клик на соответствующие чекбоксы. Чтобы увидеть отличие <i>disabled</i> от <i>readonly</i> сравните эти текстовые поля и текстовое поле в самом верху страницы.</p>
  <div align="center"><input type="reset" name="res" disabled value="Сбросить">&nbsp;<input type="image" src="Logo.gif" width="70" height="70" border="0"></div>
 <p>А чтобы кнопка сбросить форму стала активной, нужно изменить поле с паролем и убрать с неё фокус (кликнуть в любое место страницы, но не в текстовое поле с паролем.)</p>
 </form>

</body>
</html>

И вот как это будет выглядеть в браузере:
Пример тега INPUT