www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту
Главная страница > Теги ШТМЛ > Тег INPUT
Теги ШТМЛ
Все теги
!DOCTYPE
A
ABBR
ACRONYM
ADDRESS
AREA
B
BASE
BASEFONT
BDO
BGSOUND
BIG
BLOCKQUOTE
BODY
BR
BUTTON
CAPTION
CENTER
CITE
CODE
COL
COLGROUP
DD
DEL
DFN
DIV
DL
DT
EM
EMBED
FIELDSET
FONT
FORM
FRAME
FRAMESET
H1...H6
HEAD
HR
ШТМЛ
I
IFRAME
IMG
INPUT
INS
KBD
LABEL
LEGEND
LI
LINK
MAP
MARQUEE
META
NOBR
NOEMBED
NOFRAMES
NOSCRIPT
OBJECT
OL
OPTGROUP
OPTION
P
PARAM
PRE
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
STYLE
SUB
SUP
TABLE
TBODY
TD
TEXTAREA
TFOOT
TH
THEAD
TITLE
TR
TT
UL
VAR
WBR
XMP
Теги по типам
файл
Звук
Имаги
Объекты
Скрипты
Списки
Ссылки
Таблица
контент
Форматирование
Формы
Фреймы

Тег INPUT

Браузер Internet ExplorerInternet Explorer NetscapeNetтscape OperaОпера SafariSafari Файер фохMozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да
ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

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

Параметры

align
Определяет выравнивание Имаги.
alt
Альтернативный контент для кнопки с изображением.
border
Толщина рамки вокруг Имаги.
checked
Предварительно активированный переключатель или флажок.
disabled
Блокирует доступ и изменение элемента.
maxlength
Максимальное количество символов разрешенных в контенте.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly
Устанавливает, что поле не может изменяться пользователем.
size
Ширина контентового поля.
value
Значение элемента.

Закрывающий тег

Не требуется.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="/ШТМЛ/example/input1.php">
  <p><b>Ваше имя:</b><br>
   <input name="nick" type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Эксплорер<Br>
   <input type="radio" name="browser" value="Опера"> Опера<Br>
   <input type="radio" name="browser" value="Файер фох"> Файер фох<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Вид элементов формы в браузере Опера

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

Параметр ALIGN

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="image" align="bottom | left | middle | right | top">

Аргументы

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

Табл. 1. Использование значений параметра align
Код ШТМЛ Описание Пример
<input type="image" src="sample.gif " align="bottom"> Выравнивание нижней границы Имаги по окружающему контенту.. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif " align="left"> Выравнивает изображение по левоой стороне окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif " align="middle"> Выравнивание середины Имаги по базовой линии текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif " align="right"> Выравнивает изображение по правой стороне окна. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
<input type="image" src="sample.gif " align="top"> Верхняя граница Имаги выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

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

bottom

Пример 2. Выравнивание Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE ШТМЛ PUBLIC "-//W3C//DTD ШТМЛ 4.01 Transitional//EN" "http://www.w3.org/TR/ШТМЛ4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, параметр align</title>
 </head>
 <body>

  <form method="post" action="/ШТМЛ/example/handler.php">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
   <p><input src="/images/imgbutton.gif" type="image" align="right"></p>
  </form>

 </body>
</html>

Примечание

Браузеры также подддерживают аргументы absbottom, absmiddle, baseline и texttop , которые не включены в спецификацию ШТМЛ 4.01.

Параметр ALT

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="image" alt="контент">

Аргументы

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

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

Нет.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр alt</title>
 </head>
 <body>

  <form method="post" action="/ШТМЛ/example/handler.php">
   <p>...</p>
   <p><input src="/images/imgbutton.gif" type="image" alt="Отправить форму на сервер"></p>
  </form>

 </body>
</html>

Параметр BORDER

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

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

Аргументы

Любое целое положительное число в пикселах.

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

0

Пример 4. Толщина рамки вокруг Имаги

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр border</title>
 </head>
 <body>

  <form method="post" action="/ШТМЛ/example/handler.php">
   <p>...</p>
   <p><input src="/images/imgbutton.gif" type="image" border="2"></p>
  </form>

 </body>
</html>

Параметр CHECKED

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="radio" checked> <input type="checkbox" checked>

Аргументы

Нет.

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

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

Пример 5. Использование параметра checked

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр checked</title>
 </head>
 <body>

  <form method="post" action="/ШТМЛ/example/input5.php">
   <p><b>С какими операционными системамы вы знакомы?</b></p>
   <p><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</p>
   <p><input type="submit"value="Отправить"></p>
  </form>

 </body>
</html>

Результат данного примера показан ни рис. 2.

Рис. 2

Рис. 2. Помеченный флажок в форме

Параметр DISABLED

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="..." disabled>

Применяется

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

Аргументы

Нет.

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

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

Пример 6. Блокировка поля формы

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр disabled</title>
 </head>
 <body>

  <form  action="/ШТМЛ/example/handler.php">
   <p><input type="text" size="30" onFocus="this.form.submit.disabled=0"></p>
   <p><input type="submit" name="submit" value="Отправить" disabled></p>
  </form> 

 </body>
</html>

Параметр MAXLENGTH

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="text" maxlength="число"> <input type="password" maxlength="число">

Аргументы

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

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

Ввод символов не ограничен.

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр maxlength</title>
 </head>
 <body>

  <form  action="/ШТМЛ/example/handler.php">
   <p><input type="text" size="30" maxlength="10"></p>
   <p><input type="submit" name="submit" value="Отправить"></p>
  </form> 

 </body>
</html>

Параметр NAME

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="..." name="имя">

Применяется

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

Аргументы

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

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

Нет.

Пример 8. Обращение к полю формы по имени

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр name</title>
  <script type="text/javascript">  
    function dataField(f) {
      alert("Вы ввели: " + f.comment.value);
    }
  </script>
 </head>
 <body>  

  <form action="/ШТМЛ/example/handler.php">
    <p><b>Введите контент</b></p>
    <p><input type="text" name="comment">
     <input type="button" value="ОК" onClick="dataField(this.form)"></p>
  </form>

 </body>
</html>

Результат примера показан ни рис. 3.

Рис. 3

Рис. 3. Вывод окна JavaScript

В данном примере при нажатии на кнопку выводится окно JavaScript, в котором отображается фраза, введенная в контентовом поле.

Параметр READONLY

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="text" readonly> <input type="password" readonly>

Аргументы

Нет.

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

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

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

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр readonly</title>
 </head>
 <body>  

 <form action="/ШТМЛ/example/handler.php">
   <p><input type="text" name="comment" size="40" value="Введенный контент не может изменяться"
   readonly></p>
 </form>

 </body>
</html>

Результат примера показан ни рис. 4.

Рис. 4

Рис. 4. контентовое поле только для чтения

Параметр SIZE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="text" size="ширина"> <input type="password" size="ширина">

Аргументы

Любое целое положительное число.

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

20

Параметр SRC

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

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

Аргументы

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

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

Нет.

Параметр TYPE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

Синтаксис

<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text">

Обязательный параметр

Да

Аргументы

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

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

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

text

Пример 10. Элементы формы

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр type</title>
 </head>
 <body>  
 
  <form action="/ШТМЛ/example/input10.php">
   <p><input type="radio" name="drink" value="rad1"> Пиво<Br>
   <input type="radio" name="drink" value="rad2"> Чай<Br>
   <input type="radio" name="drink" value="rad3"> Кофе</p>
   <p><input type="image" src="/images/imgbutton.gif"></p>
  </form>

 </body>
</html>

Параметр VALUE

ШТМЛ: 3.2 4 XШТМЛ: 1.0 1.1

Описание

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

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

Синтаксис

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

Применяется

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

Аргументы

Любая контентовая строка.

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

Нет.

Пример 12. Значение поля формы

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>Тег INPUT, параметр value</title>
 </head>
 <body>  

  <form action="/ШТМЛ/example/input12.php">
    <p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
    <p><input type="radio" name="answer" value="a1">Офицерский 
    состав<Br>
    <input type="radio" name="answer" value="a2">Операционная 
    система<Br>
    <input type="radio" name="answer" value="a3">Большой 
    полоскатый мух</p>
    <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект