Что такое input в HTML5?
HTML тег позволяет создавать различные поля ввода или же выбора значения для html-форм. При использовании тега input без дополнительных атрибутов будет создано простейшее текстовое поле. Закрывающий тег не требуется.
При помощи атрибута type вы можете указать каким полем будет этот input , к примеру:
- password — создание поля для ввода пароля;
- text — создания простейшего текстового поля;
- email — создания поля для ввода email;
- hidden — создания скрытого поля;
- checkbox — создания поля для проставления галочки;
- radio — создания поля с возможностью выбрать вариант;
- button — создание кнопки;
- submit — создание кнопки с перезагрузкой страницы;
- reset — создание кнопки для очистки формы;
- file — создание кнопки выбора файла с компьютера;
- color — создание поля для выбора цвета;
- time — создание поля для выбора даты;
- image — создание поля с изображением;
Это лишь часть тех возможных значений атрибута type , которые вы можете применить на своем сайте.
Атрибуты:
- type — задает значение (тип) поля;
- form — нужен для связки поля с формой по id;
- checked — устанавливает поставлена ли галочка или же выбрана radio кнопка по умолчанию;
- disabled — отключает поле для ввода или любой другой взаимосвязи с ним;
- placeholder — текст подсказки прямиком в поле;
- readonly — возможно указать что поле не будет возможным для редактирования пользователем;
- required — устанавливает обязательное ли это поле или нет;
- value — устанавливается значение поля.
Пример:
Форма с полями
Что такое input
Многогранный тег позволяет создавать поля ввода, кнопки, переключатели и другие интерактивные элементы.
Время чтения: 9 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Валерий Махнюк ,
- Егор Могилей
Обновлено 12 января 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:
type="text" name="name" required minlength="4" maxlength="8" size="10">label for="name">Введите название (от 4 до 8 символов):label> input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10" >
Как понять
Скопировать ссылку «Как понять» Скопировано
— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Если хочется, чтобы введённые или выбранные в данные отправились на сервер, нужно поместить этот тег в либо связать этот элемент с формой через атрибут id .
Атрибут type определяет, какой вид примет элемент и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type = «password» , чтобы сделать переключатель — type = «radio» , а для создания кнопки — type = «button» .
Благодаря огромному количеству вариантов и функций, которые задаются через type и другие атрибуты, стал одним из самых полезных и сложных тегов в HTML.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
К элементу можно применить все глобальные атрибуты.
type
Скопировать ссылку «type» Скопировано
type — тип элемента : текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text в одну строку.
Типы для ввода данных разных форматов:
- text — поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.
- email — поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.
- search — поле для поиска.
- tel — поле для ввода номера телефона.
- url — поле для ввода URL-адреса.
- password — ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутов minlength и maxlength .
- number — ввод числа.
Типы для различных кнопок:
- submit — простая кнопка для отправки формы.
- button — обычная кнопка.
- image — кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибут src , а для альтернативного текста — атрибут alt . Чтобы скорректировать размер изображения в пикселях, используйте атрибуты height и width .
- reset — кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.
Типы для ввода дат:
- date — ввод даты без времени: год, месяц и дата.
- datetime — local — ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.
- month — ввод месяца и года, без указания часового пояса.
- week — ввод номера недели.
- time — ввод времени без указания часового пояса.
- checkbox — флажки, или чекбокс, с несколькими вариантами на выбор.
- radio — круглая кнопка-переключатель для выбора одного из нескольких вариантов.
- range — ползунок для выбора чисел из заданного диапазона.
- color — виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).
- file — выбор файла для отправки.
И отдельно стоит значение hidden . Поле ввода с этим значением атрибута type не видно на странице, но в то же время оно отправляет своё значение на сервер.
Большое преимущество установки правильного значения для type — в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
value
Скопировать ссылку «value» Скопировано
value — значение элемента , которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name , а значение — value . Например, .
- Если — кнопка ( ), то value будет надписью на ней. Значение value для кнопки ( ) не передаётся на сервер.
- Если — кнопка в виде картинки ( ), то value будет передано в виде двух значений координат нажатия относительно изображения имя . x и имя . y , где имя — это значение атрибута name .
- Если — текстовое поле ( ), то value задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать.
- Если вы вставляете флажок или переключатель ( ), то value задаст уникальное значение элемента, по умолчанию on .
Прочие атрибуты
Скопировать ссылку «Прочие атрибуты» Скопировано
- name — уникальное имя элемента. Обычно имя нужно, чтобы связать с формой и отправить данные на сервер.
- required — делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.
- disabled — отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.
- autocomplete — разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье про autocomplete .
- autofocus — фокусируется на элементе сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типа hidden .
- form — связывает отдельно стоящий элемент с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу . Например, так form = «special — form» . Этот атрибут позволяет разместить в любом месте на странице за пределами . Если его не указать, элемент будет связан с ближайшей формой.
- list — связывает с элементом через его ID. В элементе указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из : «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов , как hidden , password , checkbox , radio , file и любых кнопок.
- readonly — не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.
- step — указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов: number , range , date и datetime — local .
- min , max — указывают минимальные и максимальные числовые значения соответственно для полей с типами number и range . Минимальные и максимальные значения даты в формате ГГГГ — ММ — ДД для полей с типами date и datetime — local .
- size — указывает ширину поля для ввода в символах.
- placeholder — это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.
- pattern — задаёт регулярное выражение, по которому проверяется значение элемента .
- multiple — указывает, что пользователь может выбрать больше одного значения.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной , используйте этот тег в паре с label .
Ещё пример
Скопировать ссылку «Ещё пример» Скопировано
Вот так будет выглядеть простая форма, собранная из нескольких элементов . Мы поместили их все в контейнер , чтобы данные, которые введёт пользователь, можно было отправить на сервер:
Текстовое поле в одну строчку: Радиокнопки: Вариант 1 Вариант 2 Вариант 3 Большое текстовое поле: form name="test" method="post" action="input1.php"> label> Текстовое поле в одну строчку: input type="text" size="40"> label> fieldset> Радиокнопки: label class="radio-label"> input type="radio" name="browser" value="ie" id="ie"> Вариант 1 label> label class="radio-label"> input type="radio" name="browser" value="opera" id="opera"> Вариант 2 label> label class="radio-label"> input type="radio" name="browser" value="firefox" id="firefox"> Вариант 3 label> fieldset> label> Большое текстовое поле: textarea name="comment" cols="40" rows="3">textarea> label> div> input type="reset" value="Очистить"> input type="submit" value="Отправить"> div> form>
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� У есть несколько полезных CSS-псевдоклассов. Например, может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на , он начинает плавно подсвечиваться обводкой.
�� Если вы используете или , можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.
Input — что это такое и зачем это нужно
‘Input’ («вводимая информация», прим. пер.) это короткое слово, которым мы договорились обозначать «предложения, которые вы читаете и слушаете». Input это противоположность слову ‘Output’, которое в наших статьях значит «предложения, которые вы говорите или пишете».
Модель обучения языку edit
Вы никогда не задумывались почему можно говорить на родном языке так легко? Вы хотите сказать что-то (выразить какие-то идеи) — и правильные фразы и предложения просто приходят к вам в голову. Большая часть процесса неосознанная: что-то просто появляется в вашей голове. Вы можете сказать это или нет, но вы не знаете, откуда это пришло. Вот модель, которая объясняет, как это возможно:
- Вы получили input — вы читали и слушали предложения на каком-то языке. Если вы поняли эти предложения, они хранятся в вашем мозге. А точнее, они хранятся в разделе мозга, ответственном за язык.
- Вы хотите сказать или написать что-то на этом языке (вы хотите создать output), ваш мозг при этом ищет предложение, которое вы слышали или читали ранее, — предложение, которое совпадает по смыслу с тем, что вы хотите произвести. Так, мозг имитирует предложение (создавая такое же, или похожее) и вы говорите ваше собственное предложение в языке. Этот процесс подсознательный: мозг делает его автоматически.
Комментарий к модели edit
Конечно, эта модель очень упрощенная. Мозг ищет не целые предложения, а скорее части предложений (законченные по смыслу выражения). Он может построить очень сложные и длинные предложения из этих частей. Так что мозг не просто «имитирует» одно предложение за раз. Он использует много предложений одновременно, чтобы построить что-то оригинальное. Например мозг знает, что можно взять известное предложение и заменить в нем субъект. Например, если вы слышали «кошка под столом», можно легко сказать «собака под столом» или «книга под креслом».
input необходим для мозга. Чем больше правильных и понятных предложений знает мозг, тем лучше он способен выражать мысли.
Эта модель описывает ребенка постигающего его родной язык. Ребенок слушает его родителей и других людей. Его мозг понимает и запоминает слышимое и все лучше и лучше способен думать самостоятельно. Уже к 5 годам ребенок говорит довольно хорошо.
Но эта же модель может работь и при изучении иностранного языка. По сути мы считаем, что это едиственный способ овладеть языком в совершенстве.
Что эта модель значит для изучающих иностранный язык? Самое важное:
- мозг мыслит, основываясь на уже известном (input). Поэтому нужно кормить мозг правильными и понятными выражениями. До того, как вы начнете говорить, мозг должен запомнить достаточно правильных выражений на этом языке.
- речь и письмо (output) не столь важны. Они не улучшат языковые навыки. Вы легко можете навредить своему английскому, пытаясь что-то сказать или написать слишком рано или невнимательно.
- вам не нужны грамматические правила. Вы научились говорить на родном языке, не задумываясь о том, что такое падеж или местоимение. Вы можете изучить иностранный язык точно так же.
Как input может изменить ваш английский. edit
Если вы прочитаете несколько книг на английском, вы заметите, что он стал намного лучше. Вы начнёте использовать новые слова и грамматические конструкции в школьных сочинениях и электронных письмах. Вы будете удивлены, но подобные фразы будут просто приходить к вам в голову, когда вы говорите или пишете! И вы будете говорить практически без ошибок. Во время следующего теста по английкому вы безусловно заметите разницу. Например при необходимость выбрать ответ вы будете «чувстовать» правильный ответ. Вы можете не знать, «почему» он правильный (вы не знаете, какое это правило грамматики), но вы будете знать, что он правильный. Вы будете это знать, потому что вы знаете похожие предложения, и они правильные.
Это касается любой темы в языке. Выкиньте учебник английского! Вы будете понимать, что “I have seen Paul yesterday” неправильно, а “I saw Paul yesterday” правильно. Первое предложение будет просто звучать неправильно. Почему? Вы читали предложения, похожие на второе 200 раз, и похожие на первое 0 раз.
Я никогда не забуду, когда я открыл учебник “Practical English Usage”. Я уже заканчивал среднюю школу, и мой английский уже был на высоте. Учебник был полон вопросов и грамматических правил. Для каждого вопроса были несколько примеров, правильных и неправильных. Когда я смотрел на неправильный пример, я удивлялся «конечно он неправильный, звучит просто ужасно». Когдя я читал правило для него, я думал «я не знал, что для этого есть правило». У меня сложилось вмечатления, что я не знал ни одного правила из книги… Я в них не нуждался. (И даже если бы я захотел, я бы не смог запомнить все правила). Я мог просто посмотреть на предложение и сказать, выглядит ли оно правильно или нет. Я стал как носитель языка. За счет чтения книг, просмотра сериалов, прослушивания музыки и т.д. я получил много input’a. Существует много примеров, когда люди приблизились к совершенству от этого — например Майкл, я, и другие авторы секции Добившиеся успеха в изучении английского.
- This page was last edited on 28 May 2019, at 18:25.
Input
Благодарим вас за то, что вы помогаете нам улучшить качество документации по Unity. Однако, мы не можем принять любой перевод. Мы проверяем каждый предложенный вами вариант перевода и принимаем его только если он соответствует оригиналу.
Ошибка внесения изменений
По определённым причинам предложенный вами перевод не может быть принят. Пожалуйста попробуйте снова через пару минут. И выражаем вам свою благодарность за то, что вы уделяете время, чтобы улучшить документацию по Unity.
Ваше имя Адрес вашей электронной почты Предложение * Разместить предложенное
Описание
Интерфейс системы ввода (Input system).
Этот класс используется для чтения информации с осей координат, установленных в Менеджере Ввода, а также для доступа к данным акселерометра/мультитач на мобильных устройствах.
Для чтения информации с оси используйте Input.GetAxis с одним из следующих стандартных обозначений осей: "Horizontal" and "Vertical" are mapped to joystick, A , W , S , D and the arrow keys. "Mouse X" and "Mouse Y" are mapped to the mouse delta. "Fire1", "Fire2" "Fire3" are mapped to Ctrl , Alt , Cmd keys and three mouse or joystick buttons. Новые оси ввода могут быть добавлены в Менеджере Ввода.
Используйте Input.GetAxis, если для реализации движения вы используете ввод . It gives you smoothed and configurable input that can be mapped to keyboard, joystick or mouse. Use Input.GetButton for action like events only. Don't use it for movement, Input.GetAxis will make the script code smaller and simpler.
Note also that the Input flags are not reset until "Update()", so its suggested you make all the Input Calls in the Update Loop.
Mobile Devices:
iOS and Android devices are capable of tracking multiple fingers touching the screen simultaneously. You can access data on the status of each finger touching screen during the last frame by accessing the Input.touches property array.
As a device moves, its accelerometer hardware reports linear acceleration changes along the three primary axes in three-dimensional space. You can use this data to detect both the current orientation of the device (relative to the ground) and any immediate changes to that orientation.
Acceleration along each axis is reported directly by the hardware as G-force values. A value of 1.0 represents a load of about +1g along a given axis while a value of -1.0 represents -1g. If you hold the device upright (with the home button at the bottom) in front of you, the X axis is positive along the right, the Y axis is positive directly up, and the Z axis is positive pointing toward you.
You can read the Input.acceleration property to get the accelerometer reading. You can also use the Input.deviceOrientation property to get a discrete evaluation of the device's orientation in three-dimensional space. Detecting a change in orientation can be useful if you want to create game behaviors when the user rotates the device to hold it differently.
Note that the accelerometer hardware can be polled more than once per frame. To access all accelerometer samples since the last frame, you can read the Input.accelerationEvents property array. This can be useful when reconstructing player motions, feeding acceleration data into a predictor, or implementing other precise motion analysis.
#pragma strict public function Update() < if (Input.GetButtonDown("Fire1")) < Debug.Log(Input.mousePosition); > >
using UnityEngine; using System.Collections;
public class ExampleClass : MonoBehaviour < public void Update() < if(Input.GetButtonDown("Fire1")) < Debug.Log(Input.mousePosition); > > >
Статические переменные
| acceleration | Последнее измеренное линейное ускорение устройства в трехмерном пространстве. (Read Only) |
| accelerationEventCount | Количество измерений ускорения, произведенных за предыдущий кадр. |
| accelerationEvents | Возвращает список измерений ускорения, произведенных за предыдущий кадр. (Read Only) (Выделяется память под временные переменные, т.е. в куче создаются лишние объекты). |
| anyKey | Нажата ли какая-нибудь клавиша на клавиатуре или кнопка мышки? (Read Only) |
| anyKeyDown | При быстром многократном нажатии клавиши клавиатуры или кнопки мыши возвращает true только в первом кадре. (Read Only) |
| backButtonLeavesApp | Should Back button quit the application?Only usable on Android, Windows Phone or Windows Tablets. |
| compass | Свойство для организации доступа к компасу (только для мобильных устройств). (Read Only) |
| compensateSensors | This property controls if input sensors should be compensated for screen orientation. |
| compositionCursorPos | The current text input position used by IMEs to open windows. |
| compositionString | The current IME composition string being typed by the user. |
| deviceOrientation | Device physical orientation as reported by OS. (Read Only) |
| gyro | Возвращает гироскоп по умолчанию. |
| imeCompositionMode | Controls enabling and disabling of IME input composition. |
| imeIsSelected | Does the user have an IME keyboard input source selected? |
| inputString | Returns the keyboard input entered this frame. (Read Only) |
| location | Property for accessing device location (handheld devices only). (Read Only) |
| mousePosition | Текущее положение мыши в пиксельных координатах. (Read Only) |
| mousePresent | Indicates if a mouse device is detected. |
| mouseScrollDelta | Текущее положение мыши в пиксельных координатах. (Read Only) |
| multiTouchEnabled | Property indicating whether the system handles multiple touches. |
| simulateMouseWithTouches | Enables/Disables mouse simulation with touches. By default this option is enabled. |
| stylusTouchSupported | Returns true when Stylus Touch is supported by a device or platform. |
| touchCount | Количество касаний. Гарантируется, что количество касаний не изменится на протяжении кадра. (Read Only) |
| touches | Возвращает список объектов, отражающих состояние всех касаний за последний кадр. (Read Only) (Выделяет память под временные переменные, т.е. в куче создаются лишние объекты). |
| touchPressureSupported | Bool value which let's users check if touch pressure is supported. |
| touchSupported | Returns whether the device on which application is currently running supports touch input. |
Статические функции
| GetAccelerationEvent | Returns specific acceleration measurement which occurred during last frame. (Does not allocate temporary variables). |
| GetAxis | Возвращает значение по axisName виртуальной оси. |
| GetAxisRaw | Возвращает значение по axisName виртуальной оси без применения фильтра сглаживания. |
| GetButton | Возвращает true, пока зажата кнопка buttonName. |
| GetButtonDown | Возвращает true только в том кадре, в котором пользователь нажал виртуальную кнопку buttonName. |
| GetButtonUp | Returns true the first frame the user releases the virtual button identified by buttonName. |
| GetJoystickNames | Возвращает массив имен подключенных джойстиков. |
| GetKey | Возвращает true пока пользователем зажата клавиша name. Вспомните автовыстрел. |
| GetKeyDown | Возвращает true, если на протяжении кадра пользователь начинает выполнять нажатие клавиши name. |
| GetKeyUp | Возвращает true, если на протяжении кадра пользователь отпустил клавишу name. |
| GetMouseButton | Returns whether the given mouse button is held down. |
| GetMouseButtonDown | Возвращает true, если на протяжении кадра пользователь нажал заданную кнопку мыши. |
| GetMouseButtonUp | Возвращает true, если на протяжении кадра пользователь отпустил заданную кнопку мыши. |
| GetTouch | Возвращает объект, отражающий состояние заданного касания (touch). (Не выделяет память под временные переменные, т.е. в куче лишние объекты не создаются). |
| IsJoystickPreconfigured | Determine whether a particular joystick model has been preconfigured by Unity. (Linux-only). |
| ResetInputAxes | Сбрасывает весь ввод. После ResetInputAxes значения по всем осям устанавливаются равными 0 и все клавиши сбрасываются к 0 на один кадр. |