Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Казахская Национальная Академия Искусств им. Т. Жургенова

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Создание форм.doc

Скачиваний:

Добавлен:

01.07.2025

Размер:

1.03 Mб

Скачать

☆

<<< < Предыдущая 1 2 34 / 94 5 6 7 8 9 > Следующая >>>

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

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

Синтаксис

HTML	<input атрибуты>
XHTML	<input атрибуты />

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

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

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

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!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="input1.php">

<input name="nick" type="text" size="40">

</p>

<p><b>Каким браузером в основном пользуетесь:</b><Br>

<input type="radio" name="browser" value="ie"> Internet Explorer<Br>

<input type="radio" name="browser" value="opera"> Opera<Br>

<input type="radio" name="browser" value="firefox"> Firefox<Br>

</p>

<p>Комментарий<Br>

<textarea name="comment" cols="40" rows="3"></textarea></p>

<input type="reset" value="Очистить"></p>

</form>

</body>

</html>

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

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

Атрибуты

checked

Предварительно активированный переключатель или флажок.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML

<input type="radio" checked>

<input type="checkbox" checked>

XHTML

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

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

Значения

Нет.

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

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

Пример

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!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="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>

</form>

</body>

</html>

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

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

maxlength

Максимальное количество символов разрешенных в тексте.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML

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

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

XHTML

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

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

Значения

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

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

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

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

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!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="handler.php">

</form>

</body>

</html>

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML	<input type="..." name="имя">
XHTML	<input type="..." name="имя" />

Применяется

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

Значения

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

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

Нет.

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

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!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="handler.php">

<p><b>Введите текст</b></p>

<input type="button" value="ОК" onClick="dataField(this.form)"></p>

</form>

</body>

</html>

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

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

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

size

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

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML

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

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

XHTML

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

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

Значения

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

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

src

Адрес графического файла для поля с изображением.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Синтаксис

HTML	<input type="image" src="URL">
XHTML	<input type="image" src="URL" />

Значения

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

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

Нет.

tabindex

Определяет порядок перехода между элементами с помощью клавиши Tab.

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Атрибут tabindex определяет последовательность перехода между элементами при нажатии на клавишу Tab.

Синтаксис

HTML	<input tabindex="число">
XHTML	<input tabindex="число" />

Обязательный атрибут

Нет.

Значения

Любое целое положительное число, начиная с нуля. Значения выстраиваются последовательно и переход между элементами происходит от меньшего значения к большему.

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

Нет.

type

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

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

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

Обязательный атрибут

Да

Синтаксис

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

Значения

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

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

<<< < Предыдущая 1 2 34 / 94 5 6 7 8 9 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.07.202585.5 Кб1работа над музыкальным произведением 1.doc
#
13.02.201631.71 Кб55рус.язык экзамен.docx
#
13.02.2016162.49 Кб45Са мдениеті.docx
#
13.02.2016118.78 Кб27силл история мир кино реж -2013.doc
#
13.02.201696.88 Кб44Совет 2.docx
#
01.07.20251.03 Mб0Создание форм.doc
#
01.05.20251.94 Mб1спец часть++++++++.doc
#
01.07.2025658.43 Кб2Справочник по тегам.doc
#
01.07.2025295.58 Кб5Таблицы.docx
#
13.02.201658.64 Кб26театр тарихы.docx
#
01.05.2025406.98 Кб0теория эстр-инстр. (1).docx