Тег INPUT

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

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

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

  Несмотря на то, что тег INPUT непарный, его элемент создает поле на Web-странице, и к нему применимы атрибуты стилей размеров, расположения и переполнения.
  Атрибуты:
  TYPE - Устанавливает тип элемента интерфейса.

  • Значения:

    • button - Интерфейс "кнопки".
        "Нажатие" задает одно значение этого элемента, "ненажатие" - другое.

    • checkbox - Интерфейс "Флажков".
        Интерфейс "Флажков" создают несколько элементов тегов INPUT с атрибутом TYPE="checkbox". Пользователю предлагается выбрать несколько вариантов из предложенных.
        Значение этого элемента браузер передает, если "флажок" выбран пользователем.
      1 2 3 4 5

    • file - Интерфейс для выбора файла на устройстве пользователя.
        Значением этого элемента будет некий фальшивый путь (fakepath) к выбранному файлу, включающий его правильное имя. Доступ к такому файлу (или файлам) скрипт может получить через свойство files объекта HTMLInputElement.

    • hidden - Скрытый элемент интерфейса. Такой элемент никак не отображается на Web-странице но может быть отображен скриптом с любым значением атрибута TYPE.

    • image - Интерфейс с изображением для активации.
        Изображение не оформляется браузером "кнопкой", а выводится как есть.
        Активация изображения (например мышкой), созданного таким элементом тега, приводит к отправке всей формы получателю. (Также работает и элемент с арибутом TYPE="submit".). Значение этого элемента браузер передает, если изображение активировано пользователем.

    • password - Интерфейс поля для ввода срытого текста.
        Все введенные в это поле символы отображаются на Web-странице звездочками.
        Значением этого элемента будет текст, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH).

    • radio - Интерфейс "переключателя".
        Используется, если следует выбрать один вариант из нескольких предложенных.
        Интерфейс "переключателя" создают несколько элементов тега INPUT с атрибутом TYPE="radio". У всех этих элементов атрибут NAME должен иметь одинаковое значение.
        Значение этого элемента браузер передает, если "переключатель" выбран пользователем.
      ДА Нет Не знаю.

    • reset - Интерфейс "кнопки" сброса.
        "Нажатие" приводит к сбросу всех измененных пользователем значений элементов интерфейса связанной формы к первоначальному состоянию.
        У этого элемента нет значения.

    • submit - "Кнопка" отправки.
        "Нажатие" приводит к отправке всей информации, формализованной связанной формой, получателю.

    • text - Интерфейс однострочного поля для ввода символьного контента с клавиатуры.
        Значением этого элемента будет текст, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH).
      - редактируйте текст

    • color - Интерфейс виджета для выбора цвета.
        Значением этого элемента будет RGB-код цвета выбранного пользователем.
      - выберите цвет

    • date - Интерфейс поля для выбора календарной даты.
        Значением этого элемента будет дата выбранная пользователем (в указанном формате).
      - укажите дату

    • datetime - Интерфейс поля для указания даты и времени в свободном формате.
        Значением этого элемента будет текст, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH).

    • datetime-local - Интерфейс поля для выбора местной даты и времени.
        Значением этого элемента будут дата и время, выбранные пользователем (в указанном формате)
      - укажите местные дату и время

    • email - Интерфейс поля для указания адресов электронной почты.
        Значением этого элемента будет текст, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH, по умолчанию формат контролируется браузером).

    • number - Интерфейс поля для ввода числового значения.
        Значением этого элемента будет число выбранное пользователем (в диапазоне от MIN до MAX).
      - укажите число от 0 до 9

    • range - Интерфейс "ползунка" для выбора значения в указанном диапазоне.
        Значением этого элемента будет число выбранное пользователем (в диапазоне от MIN до MAX).
      - выберите число

    • search - Интерфейс поля для ввода строки поиска.
        Значением этого элемента будет текст, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH).

    • tel - Интерфейс поля для указания телефонных номеров.
        Значением этого элемента будет текст, введенный пользователем (в свободном формате с количеством символов ограниченным значением MAXLENGTH).

    • time - Интерфейс поля для указания времени.
        Значением этого элемента будет время выбранное пользователем (в указанном формате).
      - укажите время

    • url - Интерфейс поля для указания Интернет-адреса.
        Значением этого элемента будет текс, введенный пользователем (с количеством символов ограниченным значением MAXLENGTH, по умолчанию формат контролируется браузером).

    • month - Интерфейс поля для выбора месяца.
        Значением этого элемента будут, выбранные пользователем месяц и год (для указанной даты в указанном формате).
      - укажите месяц

    • week - Интерфейс поля для выбора недели.
        Значением этого элемента будет, выбранный пользователем номер недели и год (от начала указанного года и до указанной даты в указанном формате) .
      - укажите неделю


  • Значение по умолчанию - text.
  • Атрибут не обязательный.
  ACCEPT - Устанавливает фильтр на типы файлов, которые можно выбрать через интерфейс выбора файлов.
  Для элементов с атрибутом TYPE="file".
  • Значения:

    • MIME-тип файла в любом регистре. Несколько MIME-типов перечисляются через запятую.
    • audio/* - разрешает выбрать все звуковые MIME-типы.
    • video/* - разрешает выбрать все видео MIME-типы.
    • image/* - разрешает выбрать все графические MIME-типы.

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  ACCESSKEY - Устанавливает возможность получить фокус ввода для элемента не только мышкой, но и с помощью некоторой комбинации клавиш клавиатуры.
  Получение фокуса ввода приводит элемент в готовность к выполнению своей функции и активирует все связанные с ним дополнительные сервисы. Например появится связанная подсказка, "нажать кнопку" можно будет клавишей Enter, а, также, можно начать заполнять поле элемента.
  • Значение:

    • Латинская буква или цифра.
        К примеру комбинации клавиш для активации элемента буквой "C":
      • Internet Explorer - Alt + C
      • Chrome - Alt + C
      • Opera - Shift + Esc + C
      • Safari - Alt + C
      • Firefox - Shift + Alt + C

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  ALT - Устанавливает текст для замещения изображения.
  Для элементов с атрибутом TYPE="image".
  Такой текст появится на Web-странице вместо изображения если в браузере отключена загрузка графики и(или) во время загрузки графического контента.
  AUTOCOMPLETE - Разрешает автозаполнение поля для этого элемента интерфейса.
  Браузер может запомнить контент сформированный пользователем в этом поле и отобразить его, при следующей активации HTML-документа.
  Автозаполнение может быть отключено пользователем настройками браузера. В этом случае атрибут AUTOCOMPLETE не сработает.
  Значение не может быть перекрыто атрибутом AUTOCOMPLETE элемента тега FORM связанного с этим элементом тега INPUT.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Зависит от настроек браузера.
  • Атрибут необязательный.
  AUTOFOCUS - Устанавливает фокус ввода элементу сразу после загрузки документа.
  Получение фокуса ввода приводит элемент в готовность к выполнению своей функции и активирует все связанные с ним дополнительные сервисы. Например появится связанная подсказка, "нажать кнопку" можно будет клавишей Enter, а, также, можно начать заполнять поле элемента.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  CHECKED - Устанавливает, что элемент интерфейса уже выбран по умолчанию сразу после загрузки документа.
  Для элементов с атрибутами TYPE="radio" или TYPE="checkbox".
  Для элементов с атрибутом TYPE="radio", может быть отмечен только один элемент группы с одинаковым значением атрибута NAME.
  Пользователь может изменить установленную выборку.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  DISABLED - Устанавливает блокировку элемента.
  На Web-странице элемент, в этом случае, отобразится серым и будет недоступен для активации пользователем. Однако скрипт может его активировать.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  [WEBKIT]DIRECTORY - Устанавливает, что для элементов с атрибутом TYPE="file" будут выбираться все файлы указанной папки.

  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  FORM - Устанавливает связь элемента интерфейса с формой, когда элемент тега INPUT располагается за пределами элемента тега FORM.
  Значение должно совпадать со значением атрибута ID соответствующего элемента тега FORM.
  FORMACTION - Устанавливает для этого элемента адрес обработчика формы.
  Обработчик формы — это программа (скрипт), для которого предназначена информация формализованная формой.
  Это может быть скрипт, который выполнится на сервере (например PHP-скрипт), или скрипт, который будет загружен на клиентское устройство (скорее всего JavaScript-скрипт) и выполнится на нём.
  Атрибут FORMACTION аналогичен атрибуту ACTION тега FORM, который имеет преимущество перед FORMACTION при совместном использовании.
  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  FORMENCTYPE - Устанавливает способ кодировки значения этого элемента, который должен быть понятен получателю.
  Атрибут FORMACTION аналогичен атрибуту ENCTYPE тега FORM, но при совместном использовании, преимущество имеет атрибут FORMENCTYPE.
  • Значение - один из mime-типов:
    • application/x-www-form-urlencoded - Вместо пробелов ставится +, все управляющие символы (не алфавитно-цифровые) и символы вроде русских букв кодируются их шестнадцатеричными значениями.
    • multipart/form-data - Данные не кодируются. Это значение применяется при отправке файлов.
    • text/plain - Пробелы заменяются знаком +, буквы и другие символы не кодируются.

  • Значение по умолчанию - application/x-www-form-urlencoded.
  • Атрибут не обязательный.
  FORMMETHOD - Устанавливает протокол передачи значения этого элемента, который должен быть понятен получателю.
  Атрибут FORMMETHOD аналогичен атрибуту METHOD тега FORM, который имеет преимущество перед FORMMETHOD при совместном использовании.
  • Значения:

    • get - Передача значения непосредственно в адресной строке в виде пар «имя=значение», которые добавляются к адресу - документа после вопросительного знака и разделяются между собой амперсандом (символ &).
        Полный адрес, к примеру, будет http://index.ru/content/?name=kisa&password=1234.
        Объём данных в методе ограничен 4 Кб.
    • post - посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.

  • Значение по умолчанию - get.
  • Атрибут не обязательный.
  FORMNOVALIDATE - Устанавливает отмену встроенной проверки на корректность значения введенного пользователем в поле этого элемента.
  Проверку корректности значения элементов с атрибутами TYPE="email" и TYPE="url", и при наличии у них атрибутов PATTERN или REQUIRED, браузер выполняет автоматически. Присутствие атрибута FORMNOVALIDATE указывает, что этого делать не следует.
  Этот атрибут аналогичен атрибуту NOVALIDATE тега FORM. При совместном использовании преимущество имеет атрибут FORMNOVALIDATE.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  FORMTARGET - Устанавливает имя окна или фрейма, куда браузер будет передавать данные, полученные от обработчика формы в ответ на отправленное значение этого элемента формы.
  При использовании атрибута TARGET в связанном элементе тега FORM преимущество имеет атрибут TARGET.
  • Значения:

    • Допустимый символьный код, назначенный именем фрейма
        Для направления данных во фрейм заданное имя фрейма должно совпадать с именем указанным в атрибуте NAME элемента тега FRAME или тега IFRAME создавшего этот фрейм.
    • _blank - Данные передаются в новое окно браузера.
    • _self - Данные передаются в текущий фрейм. Если фреймов нет, то это значение равносильно _parent.
    • _parent - Данные передаются в текущее окно.
    • _top - Данные передаются в "родительский" фрейм текущего фрейма. Если "родительского" фрейма нет, то это значение равносильно _self.

  • Значение по умолчанию - _parent.
  • Атрибут не обязательный.
  HEIGHT - Устанавливает высоту поля для изображения.
  Для элементов с атрибутом TYPE="image".
  Значение атрибута HEIGHT может быть перекрыто атрибутом стиля height.
  Значение высоты поля для изображения можно менять как угодно, но размер файла с изображением от этого не изменится.
  • Значения:

    • Целое число с обозначенной единицей измерения CSS (px - пикселы, или % - от соответствующей величины поля элемента "родительского" тега.) - значение высоты.
    • auto - Высота подгоняется под контент файла с изображением.

  • Значение по умолчанию - auto.
  • Атрибут не обязательный.
  LIST - Указывает на список вариантов, из которого можно выбирать при вводе контента в поле этого элемента.
  Для элементов с атрибутами TYPE="text", TYPE="password", TYPE="datetime", TYPE="email", TYPE="search", TYPE="tel", TYPE="url".
  Список вариантов создается элементом тега DATALIST. Список становится доступным при активации этого элемента интерфейса пользователем.
  • Значение:


  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  MAX - Устанавливает верхнее значение элемента.
  Для элементов с атрибутами TYPE="number", TYPE="range" или TYPE="date".
  • Значения:

    • Целое положительное или отрицательное число - для TYPE="number" и TYPE="range".
    • ГГГГ-ММ-ДД - Дата для TYPE="date" (например 2014-02-23).

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  MAXLENGTH - Устанавливает максимальное количество символов разрешенных ко вводу в поле элемента.
  Для элементов с атрибутами TYPE="text", TYPE="password", TYPE="datetime", TYPE="email", TYPE="search", TYPE="tel", TYPE="url".
  • Значение:

    • Целое положительное число - количество символов.

  • Значение по умолчанию - Практически не ограниченное количество.
  • Атрибут не обязательный.
  MIN - Устанавливает нижнее значение элемента.
  Для элементов с атрибутами TYPE="number" TYPE="range", или TYPE="date".
  • Значения:

    • Целое положительное или отрицательное число - для TYPE="number" и TYPE="range".
    • ГГГГ-ММ-ДД - Дата для TYPE="date" (например 2014-02-23).

  • Значение по умолчанию - Нет.
  • Атрибут не обязательный.
  MULTIPLE - Устанавливает разрешение на выборку нескольких файлов и(или) нескольких адресов.
  Для элементов с атрибутами TYPE="file" и TYPE="email".
  Почтовые адреса должны перечисляться через запятую.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут необязательный.
  NAME - Устанавливает имя этого элемента интерфейса.
  Используется для идентификации значения формализованного элементом.
  У элементов с атрибутами TYPE="radio", формирующих единый интерфейс переключателей, значения атрибута NAME должны совпадать.
  PATTERN - Устанавливает шаблон ввода в поле этого элемента.
  Для элементов с атрибутами TYPE="text", TYPE="password", TYPE="search".
  Форма не будет отправлена, если данные занесенные пользователем в поля, формализованные этим элементом не соответствуют шаблону, указанному в атрибуте PATTERN.
  PLACEHOLDER - Устанавливает некоторый фоновый текст для поля этого элемента.
  Для элементов с атрибутами TYPE="text", TYPE="password", TYPE="datetime", TYPE="email", TYPE="search", TYPE="tel", TYPE="url".
  Этот текст может, например, использоваться для подсказки.
  Этот текст не мешает пользователю заполнять поле элемента и никак не влияет на его значение.
  READONLY - Устанавливает, что поле этого элемента не может никак изменяться пользователем.
  Скрипт может отменить этот запрет и(или) изменить контент поля.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  REQUIRED - Устанавливает обязательное для заполнения поле формы формализованное этим элементом.
  Пользователь обязан ввести контент запрошенный этим элементом интерфейса, в противном случае форма не будет отправлена, а браузер выведет напоминание.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  SIZE - Устанавливает ширину поля для ввода контента.
  Для элементов с атрибутами TYPE="text", TYPE="password", TYPE="datetime", TYPE="email", TYPE="search", TYPE="tel", TYPE="url".
  • Значение:

    • Целое положительное число - количество символов моноширинного шрифта.

  • Значение по умолчанию - 20.
  • Атрибут не обязательный.
  SPELLCHECK - Устанавливает орфографическую проверку текстового контента в поле этого элемента.
  Для элементов с атрибутом TYPE="text".
  Такая проверка может быть отключена в браузере или им не поддерживаться.
  • Значение:

    • Нет, только присутствие.

  • Значение по умолчанию - Выключен.
  • Атрибут не обязательный.
  SRC - Устанавливает адрес файла с графическим контентом.
  Для элементов с атрибутом TYPE="image".
  STEP - Устанавливает шаг изменения значения элемента.
  Для элементов с атрибутами TYPE="number" и TYPE="range".
  • Значение:

    • Целое или дробное число.

  • Значение по умолчанию - 1.
  • Атрибут не обязательный.
  TABINDEX - Устанавливает номер этого элемента в общей последовательности элементов гиперссылок (теги A и AREA), элементов интерфейса и элементов сгенерированных объектов в пределах HTML-документа.
  Это означает что, элемент может получить фокус ввода не только мышкой, но и с помощью клавиши Tab клавиатуры.
  Получение фокуса ввода устанавливает элемент в готовность к выполнению своей функции и активирует все связанные с ним дополнительные сервисы. Например появится связанная подсказка, "нажать кнопку" можно будет клавишей Enter, а, также, можно начать заполнять поле элемента.
  • Значение:

    • Целое число от – 32 767 до 32 767 - номер в порядке обхода элементов в документе.
        Если указан положительный номер, то он будет определять порядок обхода. То есть сначала фокус ввода (возможность активации клавишей Enter) получит элемент с номером 1, потом с номером 2 и т. д.
        Если указан номер, равный нулю, то обход будет осуществляться в порядке, в котором элемент определен в HTML-коде HTML-документа.
        Если указан отрицательный номер, то этот элемент вообще исключается из порядка обхода. Добраться до него можно будет только мышкой.

  • Значение по умолчанию - 0.
  • Атрибут не обязательный.
  VALUE - Устанавливает значение элемента, которое может быть отправлено на сервер или скрипту в составе формы.
  В отсылаемом коде для каждого выбранного пользователем элемента формы, браузером формируется пара -

  Значение атрибута NAME = Значение атрибута VALUE.
  Значение атрибута VALUE будет отражено в пользовательском представлении на Web-странице некоторых элементов. А именно:
  • Для элементов с атрибутами TYPE="button", TYPE="reset", TYPE="submit" - устанавливается надпись на поле элемента ("кнопке").
  • Для элементов с атрибутами TYPE="password", TYPE="text", TYPE="datetime", TYPE="email", TYPE="search", TYPE="tel", TYPE="url" - устанавливается предварительный текстовый контент в их полях, пользователь может заменить его своим контентом но, при "нажатии кнопки" TYPE="reset", восстановится текст установленный атрибутом VALUE.
  WIDTH - Устанавливает ширину поля для изображения.
  Для элементов с атрибутом TYPE="image".
  Значение атрибута WIDTH может быть перекрыто атрибутом стиля width.
  Значение ширины поля для изображения можно менять как угодно, но размер файла с изображением от этого не изменится.
  • Значения:

    • Целое число с обозначенной единицей измерения CSS (px - пикселы, или % - от соответствующей величины поля элемента "родительского" тега.) - значение ширины.
    • auto - Ширина подгоняется под контент файла с изображением.

  • Значение по умолчанию - auto.
  • Атрибут не обязательный.


Пример ■■■■■■■■■■►