Тег INPUT является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом INPUT предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент INPUT не требуется помещать внутрь контейнера FORM , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной параметр тега INPUT , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text ), поле с паролем (password ), переключатель (checkbox ), флажок (radiobutton ), скрытое поле (hidden ), кнопка (button ), кнопка для отправки формы (submit ), кнопка для очистки формы (reset ), поле для отправки файла (file ) и кнопка с изображением (image ). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.
Синтаксис
Закрывающий тег
Не требуется.
Параметры
align
- определяет выравнивание изображения.
alt
- альтернативный текст для кнопки с изображением.
border
- толщина рамки вокруг изображения.
checked
- предварительно активированный переключатель или флажок.
disabled
- блокирует доступ и изменение элемента.
maxlength
- максимальное количество символов разрешенных в тексте.
name
- имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly
- устанавливает, что поле не может изменяться пользователем.
size
- ширина текстового поля.
src
- значение элемента.
Пример 1. Использование тега INPUT
Ваше имя:
Каким браузером в основном пользуетесь:
Internet Explorer
Netscape
Opera
FireFox
Mozilla
Комментарий
Описание
Определяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис
Применяется
Аргументы
В таблице 1 перечислены возможные значение параметра align
и результат его использования.
absbottom | Нижняя граница изображения выравнивается по самому нижнему краю текущей строки. | |
absmiddle | Середина изображения выравнивается по средней линии текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
bottom или baseline | Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
left | Изображение располагается по левому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
middle | Середина изображения выравнивается по базовой линии текущей строки текста. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
right | Изображение выравнивается по правому краю родительского элемента. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
texttop | Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
top | Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit... |
Значение по умолчанию
bottom
Пример 2. Выравнивание поля с изображением
...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Примечание
Хотя все значения параметра align
поддерживаются браузерами, аргументы absbottom
, absmiddle
, baseline
и texttop
не описаны спецификацией HTML 4.
Описание
Параметр alt
устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
Синтаксис
Аргументы
Любая подходящяя текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Значение по умолчанию
Нет.
Пример 3. Добавление альтернативного текста
...
Описание
Браузеры обрабатывают изображения, добавленные через тег INPUT
, подобно рисункам, созданным с помощью тега IMG
. В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
Синтаксис
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
0
Пример 4. Добавление рамки к изображению
...
Примечание
В настоящее время этот параметр поддерживается только браузером Netscape, остальные браузеры его игнорируют и отображают изображение без рамки.
Описание
Этот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (checkbox), может быть отмечен только один элемент группы, для флажков (radiobutton) допустимо пометить хоть все элементы.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
Пример 5. Помечаем переключатели
С какими операционными системамы вы знакомы?
Windows 95/98
Windows 2000
System X
Linux
X3-DOS
Описание
Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
Нет.
Значение по умолчанию
По умолчанию этот параметр выключен.
Описание
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Аргументы
Любое целое положительное число в символах.
Значение по умолчанию
Ввод символов не ограничен.
Пример 7. Ограничение ввода числа символов в поле
Описание
Определяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name
.
Значение по умолчанию
Нет.
Пример 8. Использование имени поля
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
Введите текст
Описание
Когда к тегу INPUT
добавляется параметр readonly
, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
Синтаксис
Аргументы
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
Пример 9. Поле только для чтения
Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Аргументы
Любое целое положительное число.
Значение по умолчанию
20
Пример 10. Ширина поля
Описание
Адрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате GIF и JPEG.
Синтаксис
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Нет.
Пример 11. Путь к графическому файлу
...
Описание
Сообщает браузеру, к какому типу относится элемент формы.
Синтаксис
Аргументы
В таблице 2 перечислены возможные значение параметра type
и получаемый вид поля формы.
Описание
Определяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара имя/значение, где имя задается параметром name
тега INPUT
, а значение - параметром value
.
В зависимости от типа элемента параметр value выступает в следующей роли:
Синтаксис
Применяется
Ко всем элементам формы.
Аргументы
Любая текстовая строка.
Значение по умолчанию
Нет.
Пример 13. Добавление значения поля
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух
Тег (от англ. input - вход) является одним из разносторонних элементов формы и позволяет создавать разные части интерфейса и обеспечивать взаимодействие с пользователем.
Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Основной атрибут , определяющий вид элемента - type . Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file), кнопка с изображением (image) и др. Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено ещё более десятка новых атрибутов.
СинтаксисЗакрывающий тег не требуется.
WAI ARIAНет значения role по-умолчанию.
Допустимые значения role:
Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.
Применяется к полю для отправки файла ().
Поддержка браузерами
Значение по умолчанию
altАтрибут alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений, а также предназначен для поисковых систем.
Синтаксис
Значения
Любая подходящая текстовая строка.
Значение по умолчанию
autocompleteЭтот атрибут помогает заполнять поля форм текстом, который был введён в них ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
При вводе первых букв текста выводится список сохранённых ранее значений, из которого можно выбрать необходимое.
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
Значения
Значение по умолчанию
Зависит от настроек браузера.
autofocusАвтоматически устанавливает фокус в поле формы. В таком поле можно сразу набирать текст без явного щелчка по нему курсором мыши.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
checkedЭтот атрибут определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton) может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
Синтаксис
Значения
Значение по умолчанию
dirnameПри наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (иврита, к примеру) значение будет rtl .
Синтаксис
Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют.dir .
Значение по умолчанию
disabledБлокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов. Заблокированное в поле значение не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formСвязывает поле с формой по её идентификатору. Такая связь необходима в случае, когда поле располагается за пределами , например, при создании её программно или по соображениям дизайна.
Синтаксис
...
Значения
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
formactionОпределяет адрес обработчика формы - это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента .
Синтаксис
Значения
formenctypeУстанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"). Этот атрибут по своему действию аналогичен атрибуту enctype элемента , при совместном использовании formenctype и enctype последний игнорируется.
Синтаксис
Значения
Значение по умолчанию
application/x-www-form-urlencoded
formmethodАтрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
Значения
Различают два метода - GET и POST , которые задаются ключевыми словами get и post .
Значение по умолчанию
formnovalidateОтменяет встроенную проверку данных введённых пользователем в форме на корректность перед отправкой формы. Такая проверка делается браузером автоматически для полей , , а также при наличии атрибута pattern или required у элемента .
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtargetОпределяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы в виде HTML-документа.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имен можно указывать следующие.
Значение по умолчанию
listУказывает на список вариантов, созданный с помощью элемента , которые можно выбирать при наборе текста. Изначально этот список скрыт и становится доступным при получении полем фокуса.
Синтаксис
Значения
Имя идентификатора элемента .
Значение по умолчанию
maxУстанавливает верхнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Значение по умолчанию
maxlengthУстанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Значения
Значение по умолчанию
Ввод символов не ограничен.
minУстанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Целое положительное или отрицательное число (для type="number" , type="range").
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type="date" .
Значение по умолчанию
minlengthЗадаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
multipleАтрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты. При использовании двух и более почтовых адресов они должны перечисляться через запятую.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут multiple выключен.
nameОпределяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введённым данным поля через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
patternУказывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.
Поддержка браузерами
Can I Use input-pattern? Data on support for the input-pattern feature across the major browsers from caniuse.com.
Синтаксис
Значения
Некоторые типовые регулярные выражения перечислены в табл. 1.
d | Одна цифра от 0 до 9. |
D [^0-9] | Любой символ кроме цифры. |
s | Пробел. |
Только заглавная латинская буква. | |
Только латинская буква в любом регистре. | |
[А-Яа-яЁё] | Только русская буква в любом регистре. |
Любая буква русского и латинского алфавита. | |
{3} | Три цифры. |
{6,} | Не менее шести латинских букв. |
{,3} | Не более трёх цифр. |
{5,10} | От пяти до десяти цифр. |
^+$ | Любое слово на латинице. |
^[А-Яа-яЁёs]+$ | Любое слово на русском включая пробелы. |
^[ 0-9]+$ | Любое число. |
{6} | Почтовый индекс. |
d+(,d{2})? | Число в формате 1,34 (разделитель запятая). |
d+(.d{2})? | Число в формате 2.10 (разделитель точка). |
d{1,3}.d{1,3}.d{1,3}.d{1,3} | IP-адрес |
Выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста. Обычно отображается серым цветом.
Поддержка браузерами
Can I Use input-placeholder? Data on support for the input-placeholder feature across the major browsers from caniuse.com.
Синтаксис
Значения
Текстовая строка. Если внутри строки предполагается пробел, её необходимо брать в двойные или одинарные кавычки.
Значение по умолчанию
readonlyКогда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов и данные отправляются на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
requiredУстанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение об ошибке, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
sizeШирина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
srcАдрес графического файла, который будет отображаться на веб-странице в поле с изображением. Наиболее популярны файлы в формате PNG и JPEG.
Синтаксис
Значения
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
stepУстанавливает шаг изменения числа для ползунков и полей ввода чисел.
Синтаксис
Значения
Любое целое или дробное число.
Значение по умолчанию
typeСообщает браузеру, к какому типу относится элемент формы.
Поддержка браузерами
email , tel , url:
Can I Use input-email-tel-url? Data on support for the input-email-tel-url feature across the major browsers from caniuse.com.
Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.
Can I Use input-range? Data on support for the input-range feature across the major browsers from caniuse.com.
Can I Use input-number? Data on support for the input-number feature across the major browsers from caniuse.com.
Can I Use input-search? Data on support for the input-search feature across the major browsers from caniuse.com.
date , time , datetime:
Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.
Синтаксис
Значения
Значения type:
В HTML5 добавлены новые значения:
Значение по умолчанию
valueОпределяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента , а значение - атрибутом value .
В зависимости от типа элемента атрибут value выступает в следующей роли:
Синтаксис
Значения
Любая текстовая строка.
Значение по умолчанию
Значения ARIA roleТег является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент не требуется помещать внутрь контейнера , определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает CGI-программа, то указывать FORM обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.
Основной параметр тега , определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список параметров, которые определяют его вид и характеристики.
Синтаксис Параметры Описание параметров тегаОпределяет, как выравнивать поле с изображением относительно текста или других элементов формы.
Синтаксис АргументыЗначение по умолчанию bottom. Браузеры также подддерживают аргументы absbottom , absmiddle , baseline и texttop , которые не включены в спецификацию HTML 4.01.
Параметр ALTПараметр alt устанавливает альтернативный текст для поля с изображением. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Браузеры также отображают альтернативный текст в виде подсказки, появляющейся при наведении курсора мыши на изображение.
СинтаксисЗначением может быть любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.
Параметр BORDERБраузеры обрабатывают изображения, добавленные через тег , подобно рисункам, созданным с помощью тега . В том числе вокруг изображения можно добавить рамку, цвет которой совпадает с цветом текста.
СинтаксисДопустимое значение - любое целое положительное число в пикселах. Значение по умолчанию 0.
Параметр CHECKEDЭтот параметр определяет, помечен ли заранее такой элемент формы, как флажок или переключатель. В случае использования переключателей (radiobutton), может быть отмечен только один элемент группы, для флажков (checkbox) допустимо пометить хоть все элементы.
СинтаксисБлокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Синтаксис Параметр MAXLENGTHУстанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
СинтаксисОпределяет уникальное имя элемента формы. Как правило, это имя используется при отправке данных на сервер или для доступа к введенным данным поля через скрипты.
СинтаксисВ качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в параметре name.
Параметр READONLYКогда к тегу добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.
СинтаксисШирина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
СинтаксисДопустимое значение - любое целое положительное число.
Параметр SRCАдрес графического файла, который будет отображаться на веб-странице в поле с изображением.
СинтаксисВ качестве значения принимается полный или относительный путь к файлу.
Параметр TYPEОбязательный параметр type сообщает браузеру, к какому типу относится элемент формы.
Синтаксис АргументыЗначение по умолчанию - text.
Параметр VALUEОпределяет значение элемента формы, которое будет отправлено на сервер или получено с помощью клиентских скриптов. На сервер отправляется пара «имя=значение», где имя задается параметром name тега , а значение — параметром value.
В зависимости от типа элемента параметр value выступает в следующей роли:
Здравствуйте начинающие программисты.
В этом уроке разберём, как средствами javascript воздействовать на элементы html.
Допустим у нас на странице имеется заголовок h2.
Это на экране
Задача: средствами javascrip воздействовать на этот заголовок. То есть задать ему цвет, изменить текст, заставить двигаться и т.д., и т.п.
Но для того чтобы воплотить эти намерения в жизнь, необходимо получить доступ javascrip к этому элементу html.
Для получения доступа есть несколько способов. Рассмотрим их по порядку.
Доступ по имени тегаСоздаётся доступ с помощью уже известного нам объекта document с методом getElementsByTagName , где
get — получить
Elements — элементы (множественное число потому, что по умолчанию предполагается несколько тегов на странице. Ниже разберём подробнее)
Вот было-бы программирование на русском, да?
Ну, как есть так уж есть, поэтому на латинице прописываем следующий скрипт в тег body под нашим заголовком. Почему именно в body, узнаем в дальнейшем, пока не так важно.
Но это ещё не всё. Так как тегов на html странице обычно бывает много, то javascript воспринимает обращение к ним, как обращение к массиву.
Из вы знаете как обращаться к массиву.
В квадратных скобках надо указать номер элемента в массиве.
document.getElementsByTagName("h2"
);
Но и это ещё не всё. Помимо имени тега надо указать что это тег html. Для этого существует метод innerHTML
document.getElementsByTagName("h2"
).innerHTML;
Вот теперь всё. Доступ для работы с заголовком получен. Как это проверить?
Попробовать вывести на экран. Если скрипт работает, то ниже основного заголовка должен появится текст заголовка взятый скриптом.
");
В общем у меня работает
Доступ по id элементаДля этого добавим на страницу элемент и зададим ему id.
Используем тот же объект document с другим методом getElementById где
get — получить
Element — элемент (уже в единственном числе, так как id обычно бывает уникальным)
Id — идентификатор
Добавим строку в скрипт, сразу с выводом на экран для проверки.
document.write(document.getElementsByTagName("h2"
).innerHTML + "
");
document.write(document.getElementById("nev"
).innerHTML);
Посмотрим, что получилось
Видно, что доступ к обеим элементам html получен.
Доступ по имени элементаВ html есть несколько тегов у которых в спецификации предусмотрен атрибут name .
Это теги формы form, input, select, textarea и тег ссылка a.
а) Доступ из тега.
Создадим форму с двумя тегами input, значение из одного из них будет передаваться в другой по имени.
// Яваскрипт вводится прямо в тег
При клике на кнопку, цифра появится в поле.
Атрибуты type=»text» и type=»button» в этом примере указывают какую форму примет элемент input.
Атрибут value — значение, определяет цифру которая будет в кнопке, и цифру которая выведется в поле формы с именем calc, в теге с именем input.
б) Доступ из функции. Создадим форму с тремя тегами input. Значение из первого поля, преобразуемое в кнопке, передаётся второму полю по имени.
Введите число:
function
example(){
var
a=document.forma.t1.value;
var
s=a*a;
document.forma.res.value=s;}
Здесь локальная переменная а получает доступ из функции к тегу.
В ней указывается полный путь к элементу. Сначала метод document (html страница), затем forma (имя формы), затем t1 (имя тега, к которому осуществляется доступ) и value (значение, которое введся).
В переменной s задаётся действие, выполняемое с переменной а.
Затем результат этого действия (value=s) выводится на экран во втором поле, к которому также имеется доступ по имени.