Браузер | Internet Explorer | Netтscape | Опера | Safari | 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>
Не требуется.
Пример 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. Вид элементов формы в браузере Опера
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Определяет, как выравнивать поле с изображением относительно контента или других элементов формы.
<input type="image" align="bottom | left | middle | right | top">
В табл. 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.
ШТМЛ: | 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>
ШТМЛ: | 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>
ШТМЛ: | 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. Помеченный флажок в форме
ШТМЛ: | 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>
ШТМЛ: | 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>
ШТМЛ: | 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. Вывод окна JavaScript
В данном примере при нажатии на кнопку выводится окно JavaScript, в котором отображается фраза, введенная в контентовом поле.
ШТМЛ: | 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. контентовое поле только для чтения
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Ширина контентового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
<input type="text" size="ширина"> <input type="password" size="ширина">
Любое целое положительное число.
20
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Адрес графического файла, который будет отображаться на web-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.
<input type="image" src="URL">
В качестве значения принимается полный или относительный путь к файлу.
Нет.
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Сообщает браузеру, к какому типу относится элемент формы.
<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text">
Да
В табл. 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>
ШТМЛ: | 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 проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект