Обращение к тегу input по его имени. Описание параметров тега. Значение по умолчанию

Модель визуального форматирования CSS описывает систему координат внутри каждого позиционированного элемента. Система координат является точкой отсчета для свойств смещения. Положение и размеры в этом координатном пространстве можно рассматривать как заданные в пикселях, относительно точки отсчета, с положительными значениями, идущими вправо и вниз. Это координатное пространство можно изменить с помощью свойства transform .

CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать элементы. Трансформации преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.

К элементам, которые могут быть трансформированы, относятся элементы с display: block; и display: inline-block; , а также элементы, значение свойства display которых вычисляется как table-row , table-row-group , table-header-group , table-footer-group , table-cell или table-caption . Трансформированным считается элемент с любым установленным значением свойства transform , отличным от none .

Существуют два вида CSS3-трансформаций – 2D и 3D . 2D-трансформации преобразовывают элементы в двумерном пространстве c помощью 2D-матрицы преобразований. Эта матрица применяется для вычисления новых координат объекта, на основе значений свойств transform и transform-origin . Преобразования влияют только на визуальный рендеринг. В отношении макета страницы они могут отразиться на переполнении содержимого блока. По умолчанию точка трансформации находится в центре элемента.

2D-трансформации элементов Поддержка браузерами

IE: 10.0, 9.0 -ms-
Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-

1. Функции 2D-трансформации transform

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

Допустимые значения:

matrix() — любое число
translate() , translateX() , translateY() — единицы длины (положительные и отрицательные), %
scale() , scaleX() , scaleY() — любое число
rotate() — угол (deg, grad, rad или turn)
skew() , skewX() , skewY() — угол (deg, grad, rad)

Функция Описание

none	Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов.
matrix(a, c, b, d, x, y)	Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх.
translate(x,y)	Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения.
translateX(n)	Сдвигает элемент относительно его обычного положения по оси X.
translateY(n)	Сдвигает элемент относительно его обычного положения по оси Y.
scale(x,y)	Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально.
scaleX(n)	Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали.
scaleY(n)	Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали.
rotate(угол)	Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота.
skew(x-угол,y-угол)	Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически.
skewX(угол)	Деформирует стороны элемента относительно оси X.
skewY(угол)	Деформирует стороны элемента относительно оси Y.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Синтаксис

Div { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }

Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.

2. Точка трансформации transform-origin

Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center , или 50% 50% . Задаётся только для трансформированных элементов. Не наследуется.

• Перевод

Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого . Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Система координат Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.


Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат , так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.1: Горизонтальное перемещение Первое перемещение, которое мы продемонстрируем - горизонтальное. Мы будем двигать объекты слева направо и справа налево.Двигаемся вправо Чтобы переместить объект мы будем использовать transform: translate(x,y) , где X - положительное число, а Y=0.


HTML
Откройте ваш любимый редактор кода и введите следующее:

Мы определили три класса к картинке:

• object: Установление главных правил нашего объекта.
• van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
• move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.
.object { position: absolute; } .van { top: 45%; left: 44%; }
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0); . Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

#axis:hover .move-right{ transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ }
Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе.object.

Object { position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ }
Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

• linear : перемещение происходит постоянной скоростью от начала и до конца.
• ease : перемещение начинается медленно и затем набирает скорость.
• ease-in : перемещение начинается медленно.
• ease-out : перемещение заканчивается медленно.
• ease-in-out : перемещение начинается и заканчивается медленно.
• cubic-bezier : ручное определение значения перемещения.

Двигаемся влево Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ , в то время как Y остается неизменным. В нашем случае мы переместим объект на -350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); - переместим объект влево.
#axis:hover .move-left { transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ }
Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.

2: Вертикальное перемещение Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket { top: 43%; left: 44%; }
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

#axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }

Двигаемся вниз Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

CSS
#axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }

3: Диагональное перемещение Чтобы переместить объект по диагонали, мы совместим параметры x и y . Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

CSS
#axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }

4: Вращение Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg) ; где n - градусы.

Вращение по часовой стрелке Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }

Вращение против часовой стрелки Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg) .

HTML

CSS
#axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }

5: Масштабирование Масштабирование - это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y) , мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X - ширина, а Y - высота.
Давайте посмотрим на следующий пример.

Тег 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

Комментарий

Описание параметров тега INPUT Параметр ALIGN

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

Синтаксис

Применяется

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

Таблица 1. Использование значений параметра align Значение 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

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

Синтаксис

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

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

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

...

Параметр BORDER

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

Синтаксис

Аргументы
Любое целое положительное число в пикселах.

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

Пример 4. Добавление рамки к изображению

...

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

Параметр CHECKED

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

Синтаксис

Аргументы
Нет.

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

Пример 5. Помечаем переключатели

С какими операционными системамы вы знакомы?

Windows 95/98

Windows 2000

System X
Linux
X3-DOS

Параметр DISABLED

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

Синтаксис

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

Аргументы
Нет.

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

Параметр MAXLENGTH

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

Синтаксис

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

Значение по умолчанию
Ввод символов не ограничен.

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

Параметр NAME

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

Синтаксис

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

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

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

Пример 8. Использование имени поля

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

Введите текст

Параметр READONLY

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

Синтаксис

Аргументы
Нет.

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

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

Параметр SIZE

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

Синтаксис

Аргументы
Любое целое положительное число.

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

Пример 10. Ширина поля

Параметр SRC

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

Синтаксис

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

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

Пример 11. Путь к графическому файлу

...

Параметр TYPE

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

Синтаксис

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

Параметр VALUE

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

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

• для кнопок (input type=button | reset | submit ) устанавливает текстовую надпись на них;
• для текстовых полей (input type=password | text ) указывает предварительно введенную строку. Пользователь может стирать текст и вводить свои символы, но при использовании в форме кнопки Reset пользовательский текст очищается и восстанавливается введенный в параметре value ;
• для флажков и переключателей (input type=checkbox | radio ) уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно определить, какой пункт выбрал пользователь.

Синтаксис

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

Аргументы
Любая текстовая строка.

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

Пример 13. Добавление значения поля

Как по вашему мнению расшифровывается аббревиатура "ОС"?

Офицерский состав

Операционная система

Большой полосатый мух

Здравствуйте начинающие программисты.

В этом уроке разберём, как средствами 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) выводится на экран во втором поле, к которому также имеется доступ по имени.