Элементы управления

Атрибут Описание
class Обозначает класс элемента управления
id Обозначает идентификатор элемента управления
type Определяет тип элемента управления. Допустимые значения: hidden, text, tel, url, email, password, date, time, number, range, color, checkbox, radio, file, submit, image, reset и button. Если атрибут не указан или браузер не поддерживает указанный тип, используется значение по умолчанию text.
name Указывает имя элемента управления
disabled Логическое значение, указывающее, что элемент должен быть отключен. Отключенные элементы управления не могут редактироваться, не могут получать фокус и при отправке формы данные от них не отправляются.
checked Если значением атрибута type является checkbox или radio, наличие этого логическогого атрибута указывает, что элемент управления выбран по умолчанию; в противном случае он игнорируется.
multiple Атрибут HTML5. Указывает, что можно передавать несколько файлов или значений (применяется только к элементам типа file и email)
placeholder Атрибут HTML5. Подсказка пользователю о том, что можно ввести в элемент управления. Текст заполнитель не должен содержать возврат каретки или перевод на новую строку.
autocomplete Атрибут HTML5. Указывает, будет ли значение элемента управления автоматически завершено браузером.
readonly Логическое значение, указывающее, что элемент не редактируется. Элементы readonly отправляются при отправке формы, но не получают фокуса. В HTML5 этот атрибут игнорируется, когда значение атрибута type: hidden, range, color, checkbox, radio, file или button.
required Атрибут HTML5. Указывает, что значение должно присутствовать или элемент должен быть проверен перед отправкой формы.
alt Альтернативный текст для изображений, если они не отображаются.
autofocus При загрузке страницы элемент <input> должен получить фокус.
value Указывает значение для элемента<input>
step Атрибут step задает допустимые интервалы. Он работает со следующими типами элементов управления: number, range, date, локальной датой, месяцем, временем и неделей.

Ключевым компонентом интерактивных веб-сайтов являются элементы <input>, предназначенные для получения в определенной виде данных от пользователей. Различные типы элементов управления могут управлять введенными данными в соответствии с указанным форматом и обеспечивать безопасность ввода пароля.

Это основной тип элемента управления, кроме того он является типом по умолчанию. Этот тип элементов определяет однострочное текстовое поле с автоматическим удалением переноса строк. Все остальные символы могут быть введены в это текстовое поле. Элементы <input> используются в элементе <form> для объявления элементов управления, в которые пользователь может вводить свои данные.

<input type="text">

или (без указания типа, используя атрибут по умолчанию)

<input>

По умолчанию ширина текстового поля составляет 20 символов. Ее можно изменить, указав значение атрибута size следующим образом:

<input type="text" size="50">

Атрибут size заметно отличается от установки свойства width с помощью CSS. Использование ширины задает конкретное значение (в пикселех или процентах от родительского элемента), что точно задает ширину поля. Использование атрибута size требует вычисления ширины поля на основе используемого шрифта и зависит от размера символов.

Использование атрибута size не ограничивает количество символов, которые могут быть введены в поле, а только ограничивают отображаемую ширину поля. Для ограничения длины ввода см. раздел «Проверка ввода».

Текстовое поле допускает только одну строку текста. Если вам нужен многострочный текстовый элемент для значительного объема текста, используйте вместо него элемент <textarea>.

Элементы checkbox (флажки) и radio (переключатели) задаются в теге <input>, и их поведение определено в стандарте HTML. Самый простой флажок или переключатель - это элемент <input> с атрибутом type соответственно равным checkbox илиradio:

<input type="checkbox">
<input type="radio">

Один отдельный элемент флажок используется для одной логической операции выбора, например вопрос «да» или «нет». Флажки являются независимыми, что означает, что пользователь может выбрать в группе флажков столько вариантов, сколько захочет. Другими словами, выбор одного флажка не отменяет выбор других флажков в группе. Переключатели обычно объединены в группы (если переключатель не сгруппирован с другими переключателями, скорее всего, вы должны использовать флажок), указанием одного и того же имени на всех переключателях этой группы. Выбор переключателей является взаимоисключающим, что означает, что пользователь может выбрать только один вариант из группы переключателей. Когда переключатель установлен, любая другая радиокнопка с тем же именем, которая была ранее отмечена, снимается. Например:

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

При просмотре переключатели отображаются в виде круга (неотмечен) или заполненного круга (отмечен). Флажки отображаются как пустые кватраты (неотмечен) или квадраты с галочкой (отмечен). В зависимости от браузера и операционной системы квадрат иногда имеет закругленные углы.

флажки и переключатели имеют ряд атрибутов для управления их поведением:

Как и в любом другом элементе управления input, атрибут value указывает значение строки, которое нужно связать с элементом в случае отправки формы. Однако флажки и переключатели имеют особенность в том случае, когда значение опущено, по умолчанию при отправке присваивается on вместо отправки пустого значения. Атрибут value не отражается на внешнем виде элемента.

Атрибут checked указывает начальное состояние флажка или переключателя. Это логический атрибут, он может быть опущен. Ниже представлены допустимые способы задания отмеченного переключателя:

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

Отсутствие атрибута checked является единственным допустимым синтаксисом для неотмечанного элемента:

<input type="radio">
<input type="checkbox">

При сбросе формы флажки и переключатели возвращаются к состоянию указанному в атрибуте checked.

Чтобы дать и показать пользователям описания для каждого элемента, каждый из них должен иметь метку. Это можно сделать, используя элемент <label>, чтобы обернуть элемент. Кроме того, это позволяет делать кликабельной метку при выборе соответствующего элемента. Например:

<label>
    <input type="radio" name="color" value="#F00">
    Красный
</label>

или с элементом <label>, имеющим атрибут for, равный атрибуту id элемента:

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Красный</label>

Поскольку каждый переключатель влияет на остальные в группе, обычно указывается описание для всей группы переключателей. Чтобы предоставить метку для всей группы, переключатели должны быть включены в элемент <fieldset> с элементом <legend> внутри него.

<fieldset>
    <legend>Цвет темы:</legend>
    <p>
        <input type="radio" name="color" id="red" value="#F00">
        <label for="red">Красный</label>
    </p>
    <p>
        <input type="radio" name="color" id="green" value="#0F0">
        <label for="green">Зеленый</label>
    </p>
    <p>
        <input type="radio" name="color" id="blue" value="#00F">
        <label for="blue">Синий</label>
    </p>
</fieldset>

Флажки могут быть аналогично сгруппированы с помощью элементов fieldset и legend, идентифицирующий группу связанных флажков. Однако имейте в виду, что флажки не должны иметь одно и то же имя, поскольку они не являются взаимоисключающими. Это приведет к тому, что форма, представляющая несколько значений для одного и того же имени, а не все серверные языки обрабатывают это одинаково (т.к. это неопределенное поведение). Каждый флажок должен иметь либо уникальное имя, либо использовать набор квадратных скобок ([]), чтобы указать, что форма должна представить массив значений для этого ключа. Какой метод вы выбираете, зависит от того, как вы планируете обрабатывать данные формы на стороне клиента или на стороне сервера. Вы также должны придерживаться короткой легенды, т.к. некоторые браузеры читают легенду перед каждым полем ввода в fieldset.

Проверка элементов управления HTML автоматически выполняется браузером на основе специальных атрибутов элемента. Это может частично или полностью заменить проверку с помощью JavaScript. Этот вид проверки может быть легко обойден пользователем через специально созданные HTTP-запросы, поэтому он не заменяет проверку ввода на стороне сервера. Проверка выполняется только при попытке отправить форму (если вы не используете JavaScript), поэтому все проверяемые элементы должны быть внутри валидируемой формы. Имейте в виду, что отключенные элементы управления или доступные только для чтения не будут проверяться. Некоторые новые типы элемента (например, email, url, tel, date и многие другие) автоматически проверяются и не требуют собственных правил проверки.

В HTML5 используйте атрибут required, чтобы указать, что данное поле является обязательным и должно быть заполнено, чтобы пройти валидацию.

<input required>

Минимум/максимум длины Используйте атрибуты minlength и maxlength, чтобы указать требования к длине. Большинство браузеров сразу не позволяют пользователю вводить в поле больше, чем указанное максимальное количество символов, что предотвращает их неправильность еще до отправки формы.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Указание диапазона Используйте атрибуты min и max, чтобы ограничить диапазон чисел, которые пользователь может ввести в элемент типа number или range.

<input type="number" size="6" name="marks" min="0" max="100" />
<input type="range" size="2" name="feedback" min="1" max="5" />

Для большего контроля используйте атрибут pattern, чтобы указать регулярное выражение, которому должен соответствовать проверяемый элемент. Вы также можете указать атрибут title, который отображаться в случае не прохождения проверки.

<input pattern="\d*" title="Numbers only, please.">

Вот сообщение, показанное в Google Chrome версии 51 при попытке отправить форму с недопустимым значением внутри этого поля: Не все браузеры отображают сообщение о недопустимых шаблонах, хотя в большинстве используемых современных браузеров есть полная поддержка атрибута pattern. Проверьте поддержку этого атрибута на CanIUse.

Для полей типа file можно задать ограничение на определенные типы файлов, такие как видео, изображения, аудио, определенные расширения файлов или определенные медиа типы. Например:

<input type="file" accept="image/*" title="Разрешены только изображения">

Через запятую могут быть заданы несколько значений, например:

<input type="file" accept="image/*,.rar,application/zip">

Добавление атрибута novalidate к элементу form или атрибута formnovalidate к кнопке отправки формы submit, предотвращает проверку элементов формы. Например:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>
    <input type="submit" value="Publish"> <!-- форма будет проверена -->
    <input type="submit" value="Save" formnovalidate> <!-- форма НЕ будет проверена -->
</form>

Форма имеет поля, которые необходимо проверить для «публикации» проекта, но не требуют проверки для «сохранения» проекта. или отключаем проверку формы:

<form novalidate> <!-- форма НЕ будет проверена -->
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>
    <input type="submit" value="Publish"> 
</form>

В HTML5 появился тип элемента управления color:

<input type="color" name="favcolor" value="#ff0000">

В браузерах, поддерживающих этот элемент, появиться кнопочный элемент управления с цветом, равным значению атрибута цвета (по умолчанию черный, если значение не указано).

При щелчке по этой кнопке откроется виджет для выбора цвета в операционной системе.

Если браузер не поддерживает данный тип элемента управления, то он будет выглядеть как обычный текстовый тип, где type=text.

<input type="password" name="password">

Элемент управления с атрибутом type="password" создает однострочное текстовое поле, подобно обычному за исключением того, что текст не отображается при вводе пользователем.

<input type="password" name="password" placeholder="Секретный пароль">

Текст подсказки отображается в виде простого текста (обычно серого цвета) и автоматически исчезает, когда пользователь начинает вводить текст.

Некоторые браузеры изменяют поведение по умолчанию в поле ввода пароля, чтобы также отображать последний введенный символ на короткое время, например

Элементы управления с типом file позволяют пользователям выбирать файл из своей локальной файловой системы для использования на текущей странице. Если они применяются вместе с элементом формы, они могут использоваться, чтобы позволить пользователям загружать файлы на сервер (дополнительную информацию см. в разделе «Загрузка файлов»).

<input type="file" name="fileSubmission">

В следующем примере пользователи могут использовать файловый элемент управления для выбора файла из своей файловой системы и загрузить этот файл с помощью сценария на сервере с именем upload_file.php.

<form action="upload_file.php" method="post" enctype="multipart/form-data">
   Выберите файл для загрузки:
   <input type="file" name="fileSubmission" id="fileSubmission">
   <input type="submit" value="Upload your file" name="submit">
</form>

Если добавить атрибут multiple, то пользователь сможет выбрать несколько файлов:

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

Атрибут accept определяет типы файлов, которые пользователь может выбрать. Например. .png, .gif, .jpeg.

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

<input type="button" value="Название кнопки">

Кнопки могут использоваться для инициализации действий на странице без отправки формы. Кроме того, вы можете использовать элемент <button> для создания кнопки, которую можно более легко стилизовать или включить другие элементы:

<button type="button">Название кнопки</button>

Кнопки обычно используют событие onclick:

<input type="button" onclick="alert('Привет, Мир!')" value="Нажми меня">

или

<button type="button" onclick="alert('Привет, Мир!')">Нажми меня</button>

Уникальное имя кнопки, которое отправляется вместе с данными формы.

Тип кнопки Возможны значения:

  • submit - кнопка передает данные формы на сервер. Это значение по умолчанию, если атрибут не указан, или если атрибут динамически изменен на пустое или недопустимое значение.
  • reset - кнопка сбрасывает все элементы управления до их начальных значений.
  • button - кнопка не имеет поведения по умолчанию. Она может иметь клиентские сценарии, связанные с событиями элемента, которые запускаются при возникновении событий.
  • menu - кнопка открывает всплывающее меню, определенное через элемент <menu>. Пример:
    <!-- Кнопка, отображающая меню при щелчке -->
    <button type="menu" menu="popup-menu">
    Нажми меня
    </button>
    <!-- Меню -->
    <menu type="context" id="popup-menu">
    <menuitem>Действие 1</menuitem>
    <menuitem>Действие 2</menuitem>
    <hr>
    <menuitem>Дополнительное действие</menuitem>
    </menu>

    Пока данный функционал не поддерживается браузерами

    Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задается атрибутом name тега <button>, а значение — атрибутом value. Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через сценарии.

    Атрибут Описание
    form Задает идентификатор формы, к которой принадлежит кнопка. Если он не указан, то кнопка будет принадлежать элементу формы предка (если он существует).
    formaction Определяет адрес, на который надо отправлять данные формы с помощью этой кнопки.
    formenctype Указывает, как данные формы должны быть закодированы при отправке на сервер. Может использоваться только с formmethod = "post".
    formmethod Указывает HTTP-метод (POST или GET) при отправке данных формы.
    formnovalidate Указывает, что данные формы не должны проверяться при отправке.
    formtarget Открывает результат отправки формы в новом окне или фрейме.

    Элемент управления с типом submit создает кнопку, которая отправляет при нажатии форму, внутри которой находится данный элемент.

    <input type="submit" value="Отправить">

    Вы также можете использовать элемент <button>, если вам нужна кнопка отправки, которую можно более легко стилизовать или которая должна содержать другие элементы.

    <button type="submit">
    <img src="submit-icon.jpg" /> Отправить
    </button>

    <input type="reset" value="Очистить форму">

    Элемент управления с типом reset создает кнопку, которая при щелчке сбрасывает все элементы управления в форме, в которой она содержится, до состояния по умолчанию:

  • Текст в поле ввода будет сброшен до пустого или значения по умолчанию (указанного с использованием атрибута value).
  • Пункты из раскрывающегося списка будут отменены, если у них нет атрибута selected.
  • Все флажки и переключатели будут отменены, если у них нет атрибута checked.

    Чтобы кнопка сброса работала она должна быть внутри формы или присоединена (через атрибут form) к элементу <form> .

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

    <input type="hidden" name="inputName" value="inputValue">

    <input type="tel" value="+79876543210">

    Элемент управления с атрибутом type="tel", представляет собой однострочное текстовое поле для ввода номера телефона.

    Элемент управления с атрибутом type="email", представляет собой однострочное текстовое поле для ввода адреса электронной почты.

    <form>
    <label>E-mail: <label>
    <input type="email" name="email">
    </form>

    Адрес email при отправки формы автоматически проверяется, если браузер поддерживает данный тип элемента.

<input type="number" value="0" name="quantity">

Элемент управления с атрибутом type="number" представляет собой текстовую строку для ввода числа.

Обратите внимание, что это поле не гарантирует ввода правильного числа. Он просто позволяет использовать все символы, которые могут использоваться в любом действительном числе, например, пользователь сможет ввести значение, подобное e1e-, 0.

Элемент управления для ввода числа в определенном диапазоне.

<input type="range" min="" max="" step="" />
Атрибут Описание Значение по умолчанию
min Минимальное возможное значение числа 0
max Максимальное возможное значение числа 100
step Шаг увеличения значения 1

Элемент управления с атрибутом type="search" - однострочное текстовое поле для ввода поисковое строки, в которой автоматически удаляются разрывы строк. ``htmlЭлемент управления с атрибутомtype="search"`

## Изображения (Image)
```html
<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

Создает графическую кнопку. Вы должны использовать атрибут src для указания источника изображения и атрибут alt для определения альтернативного текста. Вы можете использовать атрибуты height и width для указания размера изображения в пикселях.

<input type="week" />

Если поддерживается браузером, то отобразиться элемент управления для ввода номера недели и года.

<input type="url" name="Homepage">

Этот элемент используется для полей ввода, которые должны содержать адрес URL. В зависимости от поддержки браузера поле url может быть автоматически проверено при отправке. Некоторые смартфоны распознают тип urlи добавляют «.com» к клавиатуре, чтобы облегчить ввод.

<input type="datetime-local" />

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

<input type="month" />

В зависимости от поддержки браузера элемент управления отобразит месяц.

<input type="time" />

Элемент для ввода времени принимает значения в формате в соответствии со стандартом RFC 3339, например:

19:04:39

08:20:39.04

В настоящее время все версии Edge, Chrome, Opera и Chrome для Android поддерживают этот элемент управления.

Элемент управления с атрибутом type="datetime" предназначен для ввода строки, представляющей глобальную дату и время (с информацией о часовом поясе).

<fieldset>
   <p><label>Время встречи: <input type=datetime name="meeting.start"></label>
</fieldset>

Эта функция устарела. Хотя данный элеметн может по-прежнему работать в некоторых браузерах, его использование не рекомендуется, поскольку оно может быть удалено в любое время. Старайтесь не использовать его. Вместо этого браузеры реализуют (и разработчикам рекомендуется использовать) <input type = "datetime-local">.

<input type="date" />

На экране появится подсказка для выбора даты. Этот элемент не поддерживается в Internet Explorer. Можно использовать дополнительные атрибуты:

<input type="date" id="start"   value="2018-09-22"   min="2018-01-01" max="2018-12-31" />