Извлечение значения, введённого пользователем в текстовое поле

В пособии «Основы HTML» мы познакомились c управляющими элементами input, которые позволяют пользователю вводить свои данные. Текстовое поле создаётся тегом input type="text". Обратитите внимание, что в текстовом поле изначально отображается значение атрибута value. Именно через атрибут value мы будем извлекать значение, введённое пользователем.

Пользователь вводит в текстовое поле свои данные для того, чтобы компьютер их каким-то образом обработал. Нам нужно с помощью JavaScript извлечь значение, которое ввёл пользователь в текстовое поле, и сохранить в переменной, чтобы в последующем использовать в своей программе. В случае с окном подтверждения confirm мы сохраняем в переменной значение, возвращаемое функцией. Но значения, введённые в элементы управления, так извлекать невозможно. Дело тут в том, что управляющие элементы — это не JavaScript-функции, а HTML-теги. Поэтому механизм извлечения значения здесь другой.

Мы уже умеем получать значение ширины HTML-элемента, обращаясь сначала к элементу методом getElementById, а затем к его атрибуту width. Совершенно аналогично для получения значения текстового поля необходимо обратиться к атрибуту value управляющего элемента. Пример:

<input type="text" id="name" value="Введите имя">
<input type="button" value="Отправить" onClick="
var name;
name = document.getElementById('name').value;
window.alert('Ваше имя ' + name);
" >

Код в действии

Здесь при нажатии на кнопку «Отправить» происходит обращение к к атрибуту value текстового поля и его значение запоминается в переменной name. Затем это значение выводится в окно сообщения.

Как мы уже знаем из пособия «Основы CSS», изменение положения элемента возможно при использовании CSS-свойства position. Его значение relative позволяет сдвигать элемент относительно его исходного положения. В этом случае CSS-свойства left и top задают величины смещения. Подробнее об относительном позиционировании можно прочитать в дополнительных материалах по CSS.

Задание 5

Поставьте на странице картинку, два текстовых поля для ввода смещения вправо и вниз и кнопку «Сдвинуть». При нажатии на кнопку картинка должна перемещаться на заданное расстояние.

Внешний вид