<input type="datetime-local"> - HTML

<input type="datetime-local">
=============================

`<input>` элемент типа **`datetime-local`** создаёт поля ввода, позволяющие легко ввести дату и время — год, месяц, день, часы и минуты.

Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого `<input type="text">` (en-US).

```html
<input id="datetime" type="datetime-local" />
```

Интерактивный пример
--------------------

Для тех из вас, кто не использует поддерживающий браузер, Chrome/Opera datetime-local control выглядит как скриншот ниже. Нажатие на стрелку вниз с правой стороны приводит к выбору даты, чтобы вы могли выбрать дату; вы должны ввести время вручную.

![](/ru/docs/Web/HTML/Element/input/datetime-local/datetime-local-chrome.png)

В Edge `datetime-local` элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы вы могли легко установить дату и время. То есть, по сути, получаем два элемента `date` и `time`, объединённых в один:

![](/ru/docs/Web/HTML/Element/input/datetime-local/datetime-local-picker-edge1.png)

![](/ru/docs/Web/HTML/Element/input/datetime-local/datetime-local-picker-edge2.png)

| **Value** | A `DOMString` representing a date and time, or empty. |
| --- | --- |
| **события** | `change (en-US)` и `input (en-US)`. |
| **Supported Common Attributes** | `autocomplete`, `list`, `readonly`, and `step`. |
| **IDL attributes** | `list`, `value`, `valueAsNumber`. |
| **методы** | `select()` (en-US), `stepDown()` (en-US), `stepUp()` (en-US). |

Значение
--------

`DOMString` представление значения даты, введённой во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри `value` атрибута, как:

```html
<label for="party">Enter a date and time for your party booking:</label>
<input
 id="party"
 type="datetime-local"
 name="partydate"
 value="2017-06-01T08:30" />
```

Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического `значения` — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата `значение` всегда форматируется `yyyy-MM-ddThh:mm`. Когда значение передаётся на сервер, например, это будет выглядеть `partydate=2017-06-01T08:30`.

**Примечание:** также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например `partydate=2017-06-01T08%3A30`.

Вы также можете получить и установить значение даты в JavaScript, используя `HTMLInputElement.value` свойство, например:

```js
var dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";
```

Использование локальных входных данных datetime
-----------------------------------------------

Ввод даты и времени выглядит удобно на первый взгляд — он обеспечивает простой пользовательский интерфейс для выбора даты и времени, и они нормализуют формат данных, отправляемых на сервер, независимо от локали пользователя. Тем не менее, есть проблемы с `<input type="datetime-local">` из-за ограниченной поддержки браузера.

Мы рассмотрим основные и более сложные способы использования `<input type="datetime-local">`, затем предложим советы по устранению проблемы поддержки браузера позже (see Handling browser support).

### Базовое использование локальных полей ввода datetime

Самое простои использование `<input type="datetime-local">` включает комбинацию базового `<input>` и `<label>` элемента, как в примере ниже:

```html
<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input id="party" type="datetime-local" name="partydate" />
</form>
```

### Установка максимума и минимума даты и времени

Вы можете использовать `min` и `max` атрибуты чтобы ограничить дату/время, которое может выбрать пользователь. В примере ниже мы устанавливает минимальные дату и время в `2017-06-01T08:30` и максимальные в `2017-06-30T16:30`:

```html
<form>
  <label for="party">Enter a date and time for your party booking:</label>
  <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30" />
</form>
```

Как результат:

* Могут быть выбраны только дни из Июня 2017 — только дни, которые входят в заданный диапазон дат доступны для выбора, и в виджете нельзя увидеть даты, не принадлежащие Июню.
* В зависимости от того, какой браузер вы используете, вы можете заметить, что время вне заданного диапазона не доступно к выбору (e.g. Edge), или доступно к выбору(e.g. Chrome) но невалидно (see Validation).

**Примечание:** Существует возможность использовать `step` атрибут для того, чтобы установить количество дней, которые будут пропущены каждый раз, когда дата увеличивается (например, если вы хотите сделать доступными для выбора только Субботы). Однако, на момент написание этой статьи это нет эффективной реализации этой функции.

### Controlling input size

`<input type="datetime-local">` doesn't support form sizing attributes such as `size`. You'll have to resort to CSS for sizing needs.

### Setting timezones

One thing the `datetime-local` input type doesn't provide is a way to set the timezone/locale of the datetime. This was available in the `datetime` (en-US) input type, but this type is now obsolete, having been removed from the spec. The main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. It is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control.

For example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a `hidden` input type. For example:

```html
<input type="hidden" id="timezone" name="timezone" value="-08:00" />
```

On the other hand, if you were required to allow the user to enter a timezone along with a datetime entry, you could provide a means of inputting a timezone, such as a `<select>` element:

```html
<select name="timezone\_offset" id="timezone-offset" class="span5">
  <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
  <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
  <option value="-10:00">(GMT -10:00) Hawaii</option>
  <option value="-09:50">(GMT -9:30) Taiohae</option>
  <option value="-09:00">(GMT -9:00) Alaska</option>
  <option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option>

  ...
</select>
```

In either case, the timedate and timezone values would be submitted to the server as separate data points, and then you'd need to store them appropriately in the database on the server-side.

**Примечание:** The above code snippet is taken from All world timezones in an HTML select element.

Validation
----------

By default, `<input type="datetime-local">` does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a datetime — which is helpful — but you can still fill in no value and submit, or enter an invalid datetime (e.g. the 32th of April).

You can use `min` and `max` to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the `required` attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.

Let's look at an example — here we've set minimum and maximum datetimes, and also made the field required:

```html
<form>
  <div>
    <label for="party"
 >Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):</label
 >
    <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
</form>
```

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here's'a screenshot for those of you who aren't using a supporting browser:

![](/ru/docs/Web/HTML/Element/input/datetime-local/datetime-local-error.png)

Here's the CSS used in the above example. Here we make use of the `:valid` and `:invalid` CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a `<span>` next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

```css
div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}
```

**Предупреждение:** **Important**: HTML form validation is *not* a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

Handling browser support
------------------------

As mentioned above, the major problem with using date inputs at the time of writing is browser support — only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the `datetime-local` picker on Firefox for Android looks like this:

![](/ru/docs/Web/HTML/Element/input/datetime-local/datetime-local-fxa.png)

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the most serious — as we mentioned earlier, with a `datetime-local` input the actual value is always normalized to the format `yyyy-mm-ddThh:mm`. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates and times, for example:

* `ddmmyyyy`
* `dd/mm/yyyy`
* `mm/dd/yyyy`
* `dd-mm-yyyy`
* `mm-dd-yyyy`
* `mm-dd-yyyy hh:mm` (12 hour clock)
* `mm-dd-yyyy hh:mm` (24 hour clock)
* etc.

One way around this is to put a `pattern` attribute on your `datetime-local` input. Even though the `datetime-local` input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:

```html
<form>
  <div>
    <label for="party"
 >Choose your preferred party date and time (required, June 1st 8.30am to
      June 30th 4.30pm):</label
 >
    <input
 id="party"
 type="datetime-local"
 name="partydate"
 min="2017-06-01T08:30"
 max="2017-06-30T16:30"
 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Book party!" />
  </div>
  <input type="hidden" id="timezone" name="timezone" value="-08:00" />
</form>
```

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern `nnnn-nn-nnTnn:nn`, where `n` is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.

And what user is going to understand the pattern they need to enter the time and date in?

We still have a problem.
```

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span:after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span:after {
  content: "✓";
  position: absolute;
  right: -18px;
}
```

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, year, and time in separate controls (`<select>` elements being popular — see below for an implementation), or use JavaScript libraries such as jQuery date picker, and the jQuery timepicker plugin.

Examples
--------

In this example we create two sets of UI elements for choosing datetimes — a native `<input type="datetime-local">` picker, and a set of five `<select>` elements for choosing dates and times in older browsers that don't support the native input.

The HTML looks like so:

```html
<form>
  <div class="nativeDateTimePicker">
    <label for="party">Choose a date and time for your party:</label>
    <input type="datetime-local" id="party" name="bday" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">Choose a date and time for your party:</p>
  <div class="fallbackDateTimePicker">
    <div>
      <span>
        <label for="day">Day:</label>
        <select id="day" name="day"></select>
      </span>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year"></select>
      </span>
    </div>
    <div>
      <span>
        <label for="hour">Hour:</label>
        <select id="hour" name="hour"></select>
      </span>
      <span>
        <label for="minute">Minute:</label>
        <select id="minute" name="minute"></select>
      </span>
    </div>
  </div>
</form>
```

The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code comments below for detailed explanations of how these functions work.) We also decided to dynamically generate the hours and months, as there are so many of them!
```

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports `<input type="date">`, we create a new `<input>` element, set its `type` to `date`, then immediately check what its type is set to — non-supporting browsers will return `text`, because the `date` type falls back to type `text`. If `<input type="date">` is not supported, we hide the native picker and show the fallback picker UI (`<select>`) instead.

```js
// define variables
var nativePicker = document.querySelector(".nativeDateTimePicker");
var fallbackPicker = document.querySelector(".fallbackDateTimePicker");
var fallbackLabel = document.querySelector(".fallbackLabel");

var yearSelect = document.querySelector("#year");
var monthSelect = document.querySelector("#month");
var daySelect = document.querySelector("#day");
var hourSelect = document.querySelector("#hour");
var minuteSelect = document.querySelector("#minute");

// hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// test whether a new date input falls back to a text input or not
var test = document.createElement("input");
test.type = "date";
// if it does, run the code inside the if() {} block
if (test.type === "text") {
  // hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // populate the days and years dynamically
  // (the months are always the same, therefore hardcoded)
  populateDays(monthSelect.value);
  populateYears();
  populateHours();
  populateMinutes();
}

function populateDays(month) {
  // delete the current set of <option> elements out of the
  // day <select>, ready for the next set to be injected
  while (daySelect.firstChild) {
    daySelect.removeChild(daySelect.firstChild);
  }

  // Create variable to hold new number of days to inject
  var dayNum;

  // 31 or 30 days?
  if (
    (month === "January") |
    (month === "March") |
    (month === "May") |
    (month === "July") |
    (month === "August") |
    (month === "October") |
    (month === "December")
  ) {
    dayNum = 31;
  } else if (
    (month === "April") |
    (month === "June") |
    (month === "September") |
    (month === "November")
  ) {
    dayNum = 30;
  } else {
    // If month is February, calculate whether it is a leap year or not
    var year = yearSelect.value;
    (year - 2016) % 4 === 0 ? (dayNum = 29) : (dayNum = 28);
  }

  // inject the right number of new <option> elements into the day <select>
  for (i = 1; i <= dayNum; i++) {
    var option = document.createElement("option");
    option.textContent = i;
    daySelect.appendChild(option);
  }

  // if previous day has already been set, set daySelect's value
  // to that day, to avoid the day jumping back to 1 when you
  // change the year
  if (previousDay) {
    daySelect.value = previousDay;

    // If the previous day was set to a high number, say 31, and then
    // you chose a month with less total days in it (e.g. February),
    // this part of the code ensures that the highest day available
    // is selected, rather than showing a blank daySelect
    if (daySelect.value === "") {
      daySelect.value = previousDay - 1;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 2;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 3;
    }
  }
}

function populateYears() {
  // get this year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (var i = 0; i <= 100; i++) {
    var option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

function populateHours() {
  // populate the hours <select> with the 24 hours of the day
  for (var i = 0; i <= 23; i++) {
    var option = document.createElement("option");
    option.textContent = i < 10 ? "0" + i : i;
    hourSelect.appendChild(option);
  }
}

function populateMinutes() {
  // populate the minutes <select> with the 60 hours of each minute
  for (var i = 0; i <= 59; i++) {
    var option = document.createElement("option");
    option.textContent = i < 10 ? "0" + i : i;
    minuteSelect.appendChild(option);
  }
}

// when the month or year <select> values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = function () {
  populateDays(monthSelect.value);
};

monthSelect.onchange = function () {
  populateDays(monthSelect.value);
};

//preserve day selection
var previousDay;

// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function () {
  previousDay = daySelect.value;
};
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # local-date-and-time-state-(type=datetime-local) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The generic `<input>` element and the interface used to manipulate it, `HTMLInputElement` (en-US)
* Date and Time picker tutorial (en-US)


<input type="password"> - HTML

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

`<input>` элементы типа **`"password"`** предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенён, чтобы его нельзя было прочитать, как правило, путём замены каждого символа другим символом, таким как звёздочка ("\*") или точка ("•"). Этот символ будет меняться в зависимости от user agent и OS.

Интерактивный пример
--------------------

Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и лёгкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.

**Примечание:** Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. Небезопасные пароли (en-US). Другие браузеры также реализуют аналогичные механизмы.

| **Value** | `DOMString` представляет пароль или пустую строку |
| --- | --- |
| **События** | `change (en-US)` и `input (en-US)` |
| **Общие поддерживаемые атрибуты** | `autocomplete`, `inputmode`, `maxlength`, `minlength`, `pattern`, `placeholder`, `readonly`, `required`, and `size` |
| **IDL атрибуты** | `selectionStart`, `selectionEnd`, `selectionDirection`, и `value` |
| **Методы** | `select()` (en-US), `setRangeText()` (en-US), и `setSelectionRange()` |

Значения
--------

Атрибут `value` содержит `DOMString` , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь ещё ничего не указал, это значение представляет собой пустую строку (`""`). Если указано свойство `required`, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.

Если указан атрибут `pattern`, содержимое элемента управления `"password"` считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.

**Примечание:** Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля `"password"`. При вставке пароля, возвращаемые символы удаляются из значения.

Использование полей ввода пароля
--------------------------------

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

### Простое поле ввода пароля

Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента `<label>`.

```html
<label for="userPassword">Пароль:</label>
<input id="userPassword" type="password" />
```

### Поддержка автозаполнения

Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут `autocomplete`. Для паролей должно быть одно из следующих значений:

`"on"`

Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование `"current-password"` или `"new-password"`.

`"off"`

Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.

`"current-password"`

Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это даёт больше информации, чем `"on"`, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.

`"new-password"`

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

```html
<label for="userPassword">Пароль:</label>
<input id="userPassword" type="password" autocomplete="current-password" />
```

### Обязательное заполнение пароля

Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут `required`.

```html
<label for="userPassword">Пароль:</label>
<input id="userPassword" type="password" required />
```

### Указание режима ввода

Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут `inputmode` для определённого запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.

```html
<label for="pin">ПИН:</label>
<input id="pin" type="password" inputmode="numeric" />
```

### Настройка длины пароля

Как обычно, вы можете использовать атрибуты `minlength` и `maxlength`, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырёх и не более восьми цифр. Атрибут `size` используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.

```html
<label for="pin">ПИН:</label>
<input
 id="pin"
 type="password"
 inputmode="numeric"
 minlength="4"
 maxlength="8"
 size="8" />
```

### Выделение текста

Как и другие элементы управления текстовой записью, вы можете использовать метод `select()` (en-US) для выбора всего текста в поле пароля.

#### HTML

```html
<label for="userPassword">Пароль</label>
<input id="userPassword" type="password" size="12" />
<button id="selectAll">Выделить все</button>
```

#### JavaScript

```js
document.getElementById("selectAll").onclick = function (event) {
  document.getElementById("userPassword").select();
};
```

#### Результат

Вы также можете использовать `selectionStart` и `selectionEnd`, чтобы получить (или установить), какой диапазон символов в элементе управления, и `selectionDirection`, чтобы узнать, какой выбор направления произошёл (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенён, их полезность несколько ограничена.

Валидация
---------

Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введённого пароля, вы можете использовать атрибут `pattern`, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.

В этом примере допустимы только значения, состоящие как минимум из четырёх и не более восьми шестнадцатеричных цифр.

```html
<label for="hexId">Hex ID:</label>
<input
 id="hexId"
 type="password"
 pattern="[0-9a-fA-F]{4,8}"
 title="Enter an ID consisting of 4-8 hexadecimal digits" />
```

`disabled`

Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключённые значения полей не отправляются с формой.

Примеры
-------

### Запрос номера социального страхования

В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединённых Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.

#### HTML

```html
<label for="ssn">SSN:</label>
<input
 type="password"
 id="ssn"
 inputmode="number"
 minlength="9"
 maxlength="12"
 pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
 required
 autocomplete="off" />
<br />
<label for="ssn">Value:</label>
<span id="current"></span>
```

Здесь используется `pattern` , который ограничивает введённое значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.

В `inputmode` установлено значение `"number"`, чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов `minlength` и `maxlength` установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут `required` используется для указания того, что этот элемент управления должен иметь значение. Наконец, `autocomplete` установлен `"off"`, чтобы избежать попыток установить пароли менеджеров паролей.

#### JavaScript

```js
var ssn = document.getElementById("ssn");
var current = document.getElementById("current");

ssn.oninput = function (event) {
  current.innerHTML = ssn.value;
};
```

#### Результат

Спецификация
------------

| Specification |
| --- |
| HTML Standard # password-state-(type=password) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<input type="hidden"> - HTML

<input type="hidden">
=====================

`<input>` c атрибутом `type="hidden"` скрыт со страницы. Разработчик может использовать его, например, для хранения ID товара, который в данный момент заказывается через форму, или другой сопутствующей информации. Пользователи никак не смогут увидеть это поле ввода через свой интерфейс.

**Примечание:** События `input` и `change` не применимы для скрытых полей ввода. Их нельзя взять в фокус даже с помощью JavaScript (например, используя `hiddenInput.focus()`).

Значение
--------

Для скрытых `<input>` атрибут `value` хранит непосредственно скрытые данные, которые затем можно отправить на сервер вместе с формой.

**Предупреждение:** Несмотря на то, что поле ввода скрыто от пользователей, оно по-прежнему видимо и доступно для редактирования через консоль разработчика. Не храните конфиденциальную информацию в `input` с типом `hidden`, она не будет как-либо защищена.

Дополнительные атрибуты
-----------------------

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

### name

Скрытые `input`, чьи атрибуты `name` установлены в `_charset_`, не должны иметь атрибут `value`. При отправке формы он автоматически будет содержать значение с кодировкой символов, используемых в отправленной форме.

Использование скрытых `input`
-----------------------------

Как упоминалось ранее, скрытые `input` можно использовать для хранение данных, которые пользователи не смогут увидеть или изменить через свой интерфейс. Посмотрим на примеры такого применения.

### Отслеживание отредактированного контента

Одним из наиболее распространенных способов применения скрытых полей ввода является отслеживание того, какая именно запись базы данных должна быть обновлена после отправки формы. Типичный процесс редактирования выглядит так:

1. Пользователь решает отредактировать контент, например, запись в своём блоге или какое-то описание товара. Он начинает с нажатия на кнопку «Редактировать».
2. Контент для редактирования запрашивается из базы данных и подгружается в HTML форму, чтобы пользователь мог внести изменения.
3. После правок, пользователь отправляет форму, и обновлённые данные отправляются обратно на сервер для обновления базы данных.

Идея в том, чтобы на втором шаге сохранить ID редактируемой записи в скрытый `input`. Когда пользователь отправит форму на третьем шаге, скрытый ID отправится на сервер вместе с новыми данными. Это позволит серверу точно знать, какая именно запись должна быть изменена.

Вы можете посмотреть пример такой логики в секции Примеры ниже.

### Улучшение безопасности веб-сайта

Скрытые `input` также используются для хранения и отправки токенов безопасности. Основная идея заключается в том, что если пользователь заполняет некую конфиденциальную форму, например, в своём банковском аккаунте для перевода денег на другой счёт, ему будет выдан токен безопасности. Этот токен докажет, что отправитель действительно тот, за кого себя выдаёт, и что он использует нужную форму для отправки своего перевода.

Такой приём затрудняет для злоумышленников создание поддельных банковских веб-сайтов, чтобы обманом вынудить жертву перевести деньги не туда. Подобный вид атак называется подделкой межсайтовых запросов (CSRF); практически любой крупный серверный фреймворк использует токены безопасности для предотвращения атак этого типа.

**Примечание:** Хранение токенов безопасности в скрытых `input` не означает их сохранность, дополнительно портребуется, например, шифрование. Смысл скрытого `input` заключается лишь в хранении токена безопасности, связанного с данными, и его автоматической отправке вместе с формой на сервер.

Валидация
---------

Скрытые `input` не участвуют в валидации.

Примеры
-------

Посмотрим, как мы могли бы реализовать простую версию формы со скрытым `input` для хранения идентификатора редактируемой записи:

```html
<form>
  <div>
    <label for="title">Заголовок поста:</label>
    <input type="text" id="title" name="title" value="Мой замечательный пост" />
  </div>
  <div>
    <label for="content">Контент:</label>
    <textarea id="content" name="content" cols="60" rows="5">
Некий контент внутри поста.
    </textarea>
  </div>
  <div>
    <button type="submit">Обновить пост</button>
  </div>
  <input type="hidden" id="postId" name="postId" value="34657" />
</form>
```

Также добавим немного простого CSS:

```css
html {
  font-family: sans-serif;
}
form {
  width: 500px;
}
div {
  display: flex;
  margin-bottom: 10px;
}
label {
  flex: 2;
  line-height: 2;
  text-align: right;
  padding-right: 20px;
}
input,
textarea {
  flex: 7;
  font-family: sans-serif;
  font-size: 1.1rem;
  padding: 5px;
}
textarea {
  height: 60px;
}
```

Сервер свяжет ID "`postId`" скрытого `input` с ID записи блога, чтобы знать, какую часть базы данных следует обновить. Никакого дополнительного клиентского кода для этого не потребуется.

Результат:

**Примечание:** Вы также можете найти данный пример на GitHub (смотрите исходный код, а так же рабочее демо).

При отправке на сервер данные формы будут выглядеть примерно так:

`title=Мой+замечательный+пост&content=Некий+контент+внутри+поста.&postId=34657`

Даже несмотря на то, что скрытый `input` не виден для пользователей при отправке формы, он содержит данные и они всё равно передаются на сервер.

Техническая сводка
------------------

|  |  |
| --- | --- |
| **Значение** | Строка со скрытыми от пользователя данными. |
| **События** | Нету. |
| **Поддерживаемые общие атрибуты** | `autocomplete` |
| **Атрибуты IDL** | `value` |
| **DOM интерфейс** | `HTMLInputElement` (en-US) |
| **Методы** | Нету. |

Спецификации
------------

| Specification |
| --- |
| HTML Standard # hidden-state-(type=hidden) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Руководство по HTML-формам
* `<input>` и интерфейс `HTMLInputElement` (en-US)


<input type="range"> - HTML

<input type="range">
====================

Элементы `<input>` с типом **`range`** позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как number. Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .

Интерактивный пример
--------------------

Если используемый браузер не поддерживает тип `range`, он будет отображаться как input`text (en-US).`

| **Value** | `DOMString`, содержащий строковое представление выбранного числового значения; используйте `valueAsNumber` чтобы получить значение `Number`. |
| --- | --- |
| **События** | `change (en-US)` и `input (en-US)` |
| **Поддерживаемые общие атрибуты** | `autocomplete`, `list`, `max`, `min`, and `step` |
| **IDL атрибуты** | `list`, `value`, и `valueAsNumber` |
| **Методы** | `stepDown()` (en-US) и `stepUp()` (en-US) |

### Валидация

Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

* Если значение `value` содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.
* Значение не может быть меньше чем `min`. По умолчанию: 0.
* Значение не может быть больше чем `max`. По умолчанию: 100.
* Значение должно кратно `step`. По умолчанию: 1.

Атрибут `value` содержит `DOMString`, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (`""`). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута `min`. Алгоритм определения значения по умолчанию:

```js
defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;
```

Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.

Дополнительные атрибуты
-----------------------

В дополнение к общим для всех элементов `<input>` атрибутам поля ввода диапазона поддерживают следующие атрибуты.

### `list`

Значением атрибута `list` является `id` элемента `<datalist>`, находящегося в этом документе. `<datalist>` содержит список предустановленных значений, из которых пользователь может выбрать подходящее. Значения, несовместимые с `типом`, не становятся доступными для выбора. Список этих значений — набор подсказок, но выбор не ограничен только ими, пользователь может ввести и своё значение.

### `max`

Наибольшее допустимое значение. Если `value` элемента превышает этого значения, элемент не проходит проверку ограничений. Если значение атрибута `max` (en-US) не является числом, то у элемента нет максимального значения.

Это значение должно быть больше или равно значению атрибута `min` (en-US). Смотрите также HTML-атрибут `max` (en-US).

### `min`

Наименьшее допустимое значение. Если `value` элемента меньше этого значения, элемент не проходит проверку ограничений. Если значение атрибута `min` (en-US) не является числом, то у элемента нет минимального значения.

Это значение должно быть меньше или равно значению атрибута `max` (en-US). Смотрите также HTML-атрибут `min` (en-US).

**Примечание:** Если значения `min` и `max` равны или `max` меньше `min`, то у пользователя не будет возможности взаимодействовать с диапазоном.

### `step`

Атрибут `step` — это число, указывающее уровень точности, которому должно соответствовать значение. Допустимы только значения, соответствующие указанному размеру шага (`min`, если указано, `value` в противном случае или любое подходящее значение по умолчанию, если не указано ни то, ни другое).

Атрибут `step` также может принимать строковое значение `any`. Такое значение означает, что пошаговое изменение не подразумевается и разрешены любые значения (за исключением других ограничений, таких как `min` and `max`).

**Примечание:** Когда введённые пользователем данные не соответствуют пошаговой конфигурации, агент пользователя может использовать округление до ближайшего допустимого значения, предпочитая числа в положительном направлении, когда есть два одинаково близких варианта.

По умолчанию размер шага для полей ввода `range` равен 1, что допускает ввод только целых чисел, пока размер шага является целым числом. Например, если установить `min` в -10, а `value` в 1.5, то `step` равный 1 будет допускать только такие значения, как 1.5, 2.5, 3.5,… больше нуля и -0.5, -1.5, -2.5,… меньше нуля. Смотрите также HTML-атрибут `step` (en-US).

### Нестандартные атрибуты

| Attribute | Description |
| --- | --- |
| `orient` | Устанавливает ориентацию слайдера. **Firefox only.** |

`orient`
Non-standard

Похоже на -moz-orient не стандартное CSS-свойство влияющее на `<progress>` и`<meter>` элементы, `orient` атрибут определяем ориентацию слайдера. Значение `horizontal`, значит что слайдер будет отображён горизонтально, а `vertical`- что вертикально .

**Примечание:** Note: Следующие атрибуты не применимы: `accept`, `alt`, `checked`, `dirname`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`, `height`, `maxlength`, `minlength`, `multiple`, `pattern`, `placeholder`, `readonly`, `required`, `size`, `src`, и `width`. Каждый из них будет проигнорирован в случае употребления.

Examples
--------

Пока тип `number` позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом `range` позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.

Несколько примеров основный ситуаций, в которых инпуты с range используются:

* Аудио-контроллеры громкости и баланса, или контроллеры фильтра.
* Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.
* Контроллеры игровой настройки, такие как сложность, дальность видимости, размер мира и т.д.
* Длина пароля для сгенерированных паролей менеджера паролей.

Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".

### Указание минимума и максимума

По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов `min` и/или `max`. Они могут быть принимать любые значения с плавающей точкой.

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

```html
<input type="range" min="-10" max="10" />
```

### Настройка детализации значения

По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут `step` контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение `step` на 0.01:

```html
<input type="range" min="5" max="10" step="0.01" />
```

Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение `any` для атрибута `step`:

```html
<input type="range" min="0" max="3.14" step="any" />
```

Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.

### Добавление хэш-меток и лейблов

Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут `list` и элемент `<datalist>`, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

#### Макеты контроллера диапазона

Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.

##### Недекорированный контроллер диапазона

Этот результат вы получите, если не укажите атрибут `list`, или браузер не будет его поддерживать.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range">
```
 | Screenshot of a plain slider control on macOS |

##### Контроллер диапазона с хэш-метками

Контроллер диапазона, использующий атрибут `list`, указывающий ID `<datalist>`, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента `<option>` с его набором `value` значений диапазона, при котором должна быть нарисована метка.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100">
</datalist>
```

 | Screenshot of a plain slider control on macOS |

##### Контроллер диапазона с хэш-метками и лейблами

Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут `label` элементам `<option>`, соответствующим значениям, на которых вы бы хотели видеть лейблы.

| HTML | Screenshot |
| --- | --- |
|
```html
<input type="range" list="tickmarks">
<datalist id="tickmarks">
<option value="0" label="0%">
<option value="10">
<option value="20">
<option value="30">
<option value="40">
<option value="50" label="50%">
<option value="60">
<option value="70">
<option value="80">
<option value="90">
<option value="100" label="100%">
</datalist>
```

 | Screenshot of a plain slider control on macOS |

**Примечание:** В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддерживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг `<datalist>` должен быть стилизован с помощью CSS, так как его свойство `display` по умолчанию - `none`, тем самым скрывая лейблы.

### Изменение ориентации

По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox Firefox bug 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.

В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки `appearance` для `slider-vertical`, использование нестандартной ориентации `orient` в Firefox,или изменение text direction для Internet Explorer и Edge

Рассмотрим контроллер диапазона:

```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```

| Screenshot | Live sample |
| --- | --- |
|  |  |

Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).

### Standards

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

#### CSS

```css
#volume {
  height: 150px;
  width: 50px;
}
```

#### HTML

```html
<input type="range" id="volume" min="0" max="11" value="7" step="1" />
```

#### Результат

| Screenshot | Live sample |
| --- | --- |
|  |  |

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

### transform: rotate(-90deg)

Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя `transform` для поворота элемента на 90 градусов. Посмотрим:

#### HTML

В HTML нужно добавить обёртку вокруг `<input>` - `<div>`, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):

```html
<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1" />
</div>
```

#### CSS

Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.

```css
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
```

Затем информация о стиле элемента `<input>` в зарезервированном пространстве:

```css
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
```

Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и `transform-origin` (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.

| Screenshot | Live sample |
| --- | --- |
|  |  |

### appearance property

Свойство `appearance` имеет нестандартное значение `slider-vertical` , которое делает слайдер вертикальным.

#### HTML

Используем тот же HTML что и в предыдущем примере:

```html
<input type="range" min="0" max="11" value="7" step="1" />
```

#### CSS

Берём только те инпуты что имеют тип range:

```css
input[type="range"] {
  -webkit-appearance: slider-vertical;
}
```

### orient attribute

В Firefox, реализовано нестандартное свойство `orient`.

#### HTML

Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением `vertical`:

```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```

### writing-mode: bt-lr

Свойство `writing-mode` может быть использовано для специальных эффектов

#### HTML

Используем тот же HTML что и в предыдущем примере:

```html
<input type="range" min="0" max="11" value="7" step="1" />
```

#### CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на `bt-lr`, или bottom-to-top и left-to-right:

```css
input[type="range"] {
  writing-mode: bt-lr;
}
```

### Все вместе

Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:

#### HTML

Оставим `orient` атрибут со значением `vertical` для Firefox:

```html
<input type="range" min="0" max="11" value="7" step="1" orient="vertical" />
```

#### CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на `bt-lr`, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем `-webkit-appearance: slider-vertical` для всех -webkit-based браузеров:

```css
input[type="range"] {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # range-state-(type=range) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* HTML Forms
* `<input>` и интерфейс `HTMLInputElement` (en-US), на котором он основан
* `<input type="number">`
* `validityState.rangeOverflow` и`validityState.rangeUnderflow`
* Controlling multiple parameters with ConstantSourceNode (en-US)
* Styling the range element
* Compatibility of CSS properties (en-US)


<input type="radio"> - HTML

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

Атрибут **type** тега `<input>` со значением **`radio`** обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.

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

Интерактивный пример
--------------------

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

![Shows what radio buttons looked like in the olden days.](/ru/docs/Web/HTML/Element/input/radio/old-radio.jpg)

**Примечание:** Чекбоксы (en-US) похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать" значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.

| **Value** | `Строка DOM` отображающая значение радиокнопки |
| --- | --- |
| **События** | `change (en-US)` и `input (en-US)` |
| **Универсальные атрибуты** | `checked` |
| **Атрибуты IDL** | `checked` и `value` |
| **Методы** | `select()` (en-US) |

Атрибут value
-------------

Атрибут `value` - это `строка DOM`, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.

### Создание группы радиокнопок

Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута (`name`). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе.

Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута `name`.

Например, если в вашей форме необходимо запросить предпочитаемый способ контакта с пользователем, то вы можете создать три радиокнопки с **name= `"contact"` ,** но с разными **value =** `"email"`, **value =**`"phone"` и **value =** `"mail"` соответственно. Пользователь не видит атрибуты `name` и `value` (если только вы не добавляете код для их отображения).

HTML будет выглядеть следующим образом:

```html
<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1" name="contact" value="email" />
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2" name="contact" value="phone" />
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3" name="contact" value="mail" />
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
```

Здесь вы видите три радиокнопки, каждая из которых имеет атрибут `name` со значением `"contact"` и уникальный атрибут `value`, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный `id`, связанный с тегом `<label>` через атрибут `for` для установления связи между конкретной меткой и конкретной радиокнопкой.

Вы можете опробовать этот код здесь:

### Представление данных группы радиокнопок

Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке, то её данные включают запись в виде **"contact=name".** Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку `"contact=phone"`.

Если вы пренебрежёте атрибутом `value` в вашем HTML, то отправленные данные просто присвоят данной группе значение `"on"`. То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как `"contact=on"` и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут `value`!

**Примечание:** Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.

Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута `"checked"`. Смотрите здесь Selecting a radio button by default.

Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока `<pre>` для вывода данных формы.

```html
<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1" name="contact" value="email" />
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2" name="contact" value="phone" />
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3" name="contact" value="mail" />
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log"></pre>
```

Затем добавим немного JavaScript. Установим обработчик события `submit (en-US)`, которая будет отправляться при клике пользователя на кнопку "Отправить":

```js
var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener(
  "submit",
  function (event) {
    var data = new FormData(form);
    var output = "";
    for (const entry of data) {
      output = entry[0] + "=" + entry[1] + "\r";
    }
    log.innerText = output;
    event.preventDefault();
  },
  false,
);
```

Опробуйте этот пример и убедитесь, что для группы радиокнопок `"contact"` будет только один результат.

Использование радиокнопок
-------------------------

Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространённые функции и методы, связанные с использованием радиокнопок, о которых вам нужно знать.

### Выбор радиокнопки по умолчанию

Чтобы установить радиокнопку как выбранную по умолчанию, вам необходимо подключить атрибут `checked`, как показано ниже в немного изменённой версии предыдущего примера.

```html
<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input
 type="radio"
 id="contactChoice1"
 name="contact"
 value="email"
 checked />
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2" name="contact" value="phone" />
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3" name="contact" value="mail" />
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
```

В данном случае первая радиокнопка будет выбрана по умолчанию.

**Примечание:** Если вы устанавливаете атрибут `checked` более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут `checked` отменяет предыдущий, то есть как отмеченная будет выбрана последняя радиокнопка с атрибутом `checked`. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.

### Providing a bigger hit area for your radio buttons

В примерах, представленных выше, вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент `<label>`, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны. Помимо специальных возможностей, это другая веская причина для правильного использования элементов `<label>` в ваших формах.

Валидация формы
---------------

Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.

Установка стилей радиокнопок
----------------------------

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

HTML будет выглядеть следующим образом:

```html
<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
 type="radio"
 id="contactChoice1"
 name="contact"
 value="email"
 checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
```

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

CSS будет выглядеть так:

```css
html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  outline: none;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}
```

Самым примечательным здесь является использование свойства `appearance` с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству `appearance` значение `none`, вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства `border` и `border-radius`, а также свойство `transition` для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс `:checked` используется для указания стилей внешнего вида кнопок при их выборе.

Стоит иметь в виду, что свойство `appearance` неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает ваш сайт в каждом браузере!

Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # radio-button-state-(type=radio) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<input>` and the `HTMLInputElement` (en-US) interface that implements it.
* `RadioNodeList`: the interface that describes a list of radio buttons


<input type="button"> - HTML

<input type="button">
=====================

Элемент `<input>` с типом **`button`** отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события `click (en-US)`).

Интерактивный пример
--------------------

**Примечание:** Хотя элементы `<input>` с типом `button` по-прежнему являются абсолютно корректными в HTML, новый элемент `<button>` теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента `<button>` вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.

| **Значение** | `DOMString` используется в качестве метки кнопки |
| --- | --- |
| **Событие** | `click (en-US)` |
| **Поддерживаемые общие атрибуты** | `type` и `value` |
| **Атрибуты IDL** | `value` |
| **Методы** | None |

Значение
--------

Атрибут значения элементов `<input type="button">` elements' `value` содержит строку `DOMString` , которая используется в качестве метки кнопки.

```html
<input type="button" value="Нажми на меня" />
```

Если вы не укажете `value`, вы получите пустую кнопку:

```html
<input type="button" />
```

Использование кнопок
--------------------

Элементы `<input type="button">` не имеют поведения по умолчанию (их двоюродные братья, `<input type="submit">` (en-US) и `<input type="reset">` (en-US) используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.

### Простая кнопка

Мы начнём с создания простой кнопки с обработчиком события `click (en-US)` , который запускает наш компьютер (ну, он переключает `value` кнопки и текстовое содержимое следующего абзаца):

```html
<form>
  <input type="button" value="Запустить ПК" />
</form>
<p>ПК выключен.</p>
```

```js
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Запустить ПК") {
    button.value = "Выключить ПК";
    paragraph.textContent = "ПК запущен!";
  } else {
    button.value = "Запустить ПК";
    paragraph.textContent = "ПК выключен.";
  }
}
```

Сценарий получает ссылку на объект `HTMLInputElement` (en-US), представляющий `<input>` в DOM, сохраняя этот параметр в переменной `button`. Затем `addEventListener()` используется для установки функции, которая будет запускаться, когда на кнопке происходят события `click (en-US)`.

### Добавление сочетаний клавиш на кнопки

Сочетания клавиш, также известные как клавиши доступа и их эквиваленты на клавиатуре, позволяют пользователю активировать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — точно так же, как вы сделали бы с любым `<input>`, для которого это имеет смысл, — вы используете глобальный атрибут `accesskey`.

В этом примере, `s` это специфичная клавиша доступа (ты должен нажать `s` плюс конкретные клавиши-модификаторы для вашей комбинации браузера и операционной системы; вы можете увидеть полный список на странице accesskey).

```html
<form>
  <input type="button" value="Включить ПК" accesskey="s" />
</form>
<p>ПК выключен.</p>
```

```
const button = document.querySelector("input");
const paragraph = document.querySelector("p");

button.addEventListener("click", updateButton);

function updateButton() {
  if (button.value === "Включить ПК") {
    button.value = "Выключить пк";
    paragraph.textContent = "ПК включён!";
  } else {
    button.value = "Включить ПК";
    paragraph.textContent = "ПК выключен.";
  }
}
```

**Примечание:** Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам пришлось бы предоставлять эту информацию таким образом, чтобы это не противоречило дизайну сайта (например, путем предоставления легкодоступной ссылки, которая указывает на информацию о том, что такое ключи доступа к сайту).

### Выключенные / Включённые кнопки

Чтобы выключить кнопку необходимо просто добавить на неё глобальный атрибут `disabled`, вот так:

```html
<input type="button" value="Я выключена" disabled />
```

Вы можете включать и отключать кнопки во время выполнения, просто установив `disabled` вместо `true` или `false`. В этом примере наша кнопка изначально включена, но если вы нажмете ее, она будет отключена с помощью `button.disabled = true`. А `setTimeout()` затем функция используется для возврата кнопки обратно в ее включённое состояние через две секунды.
```

<input type="button" value="Enabled" />
```

```
const button = document.querySelector("input");

button.addEventListener("click", disableButton);

function disableButton() {
  button.disabled = true;
  button.value = "Выключена";
  window.setTimeout(function () {
    button.disabled = false;
    button.value = "Включена";
  }, 2000);
}
```

Если атрибут `disabled` не указан, то кнопка наследует своё `disabled` состояние из своего родительского элемента. Это позволяет включать и отключать группы элементов одновременно, заключая их в контейнер, такой как `<fieldset>` элемет, и затем установить `disabled` на контейнер.

Приведенный ниже пример показывает это в действии. Это очень похоже на предыдущий пример, за исключением того, что атрибут `disabled` устанавливается в `<fieldset>` при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
```

<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
</fieldset>
```

```
const button = document.querySelector("input");
const fieldset = document.querySelector("fieldset");

button.addEventListener("click", disableButton);

function disableButton() {
  fieldset.disabled = true;
  window.setTimeout(function () {
    fieldset.disabled = false;
  }, 2000);
}
```

**Примечание:** Firefox, в отличие от других браузеров, по умолчанию сохраняет динамическое отключенние состояния из одного `<button>` при загрузке разных страниц. Используйте атрибут `autocomplete` для управления этой функцией.

Валидация
---------

Кнопки не участвуют в проверке валидации; они не имеют реальной ценности для валидации.

Примеры
-------

Приведенный ниже пример показывает очень простое приложение для рисования, созданное с использованием элемента `<canvas>` и простого CSS и JavaScript (CSS мы скроем для краткости). Два верхних элемента управления позволяют выбрать цвет и размер пера для рисования. Кнопка при нажатии вызывает функцию, которая очищает холст.

```html
<div class="toolbar">
  <input type="color" aria-label="select pen color" />
  <input
 type="range"
 min="2"
 max="50"
 value="30"
 aria-label="select pen size" /><span class="output">30</span>
  <input type="button" value="Clear canvas" />
</div>

<canvas class="myCanvas">
  <p>Добавьте подходящий фолбэк здесь.</p>
</canvas>
```

```
body {
  background: #ccc;
  margin: 0;
  overflow: hidden;
}

.toolbar {
  background: #ccc;
  width: 150px;
  height: 75px;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}
```

```js
let canvas = document.querySelector(".myCanvas");
let width = (canvas.width = window.innerWidth);
let height = (canvas.height = window.innerHeight - 85);
let ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, width, height);

let colorPicker = document.querySelector('input[type="color"]');
let sizePicker = document.querySelector('input[type="range"]');
let output = document.querySelector(".output");
let clearBtn = document.querySelector('input[type="button"]');

// covert degrees to radians
function degToRad(degrees) {
  return (degrees \* Math.PI) / 180;
}

// update sizepicker output value

sizePicker.oninput = function () {
  output.textContent = sizePicker.value;
};

// store mouse pointer coordinates, and whether the button is pressed
let curX;
let curY;
let pressed = false;

// update mouse pointer coordinates
document.onmousemove = function (e) {
  curX = window.Event
    ? e.pageX
    : e.clientX +
      (document.documentElement.scrollLeft
        ? document.documentElement.scrollLeft
        : document.body.scrollLeft);
  curY = window.Event
    ? e.pageY
    : e.clientY +
      (document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop);
};

canvas.onmousedown = function () {
  pressed = true;
};

canvas.onmouseup = function () {
  pressed = false;
};

clearBtn.onclick = function () {
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, width, height);
};

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # button-state-(type=button) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<input>` и `HTMLInputElement` (en-US) интерфейс, который его реализует.
* Более современный элемент `<button>`.
* Совместимость свойств CSS (en-US)


<input type="date"> - HTML

<input type="date">
===================

Элементы `<input>` типа **`date`** создают поля ввода и позволяют пользователю ввести дату, либо использовать *text box* для автоматической проверки контента или использовать специальный интерфейс *date picker*. Возвращаемое значение включает год, месяц, день, но *не* время. Используйте поля ввода time (en-US) или datetime-local, чтобы вводить время или дату+время соответственно.

Отображение **`date`** различается в зависимости от браузера, кроме того не все браузеры поддерживают **`date`**. Подробнее см. Browser compatibility. В неподдерживаемых браузерах элемент будет отображаться как обычный `<input type="text">` (en-US).

Интерактивный пример
--------------------

Среди браузеров со своим интерфейсом для выбора даты, есть интерфейс браузеров Chrome и Opera, который выглядит так:

![](/ru/docs/Web/HTML/Element/input/date/date-picker-chrome.png)

В Edge он выглядит так:

![](/ru/docs/Web/HTML/Element/input/date/date-picker-edge.png)

А в Firefox выглядит так:

![Datepicker UI in firefox](/ru/docs/Web/HTML/Element/input/date/firefox_datepicker.png)

| Value | Возвращает `DOMString`, с датой в формате **гггг-мм-дд**, \*\*или \*\*пустую строку\*\* |
| --- | --- |
| **События** | `change (en-US)` и `input (en-US)` |
| **Поддерживаемые атрибуты** | `autocomplete`, `list`, `readonly`, and `step` |
| **IDL attributes** | `list`, `value`, `valueAsDate`, `valueAsNumber`. |
| **Методы** | `select()` (en-US), `stepDown()` (en-US), `stepUp()` (en-US) |

Значение
--------

Возвращает `DOMString`, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в `value`, например:

```html
<input id="date" type="date" value="2017-06-01" />
```

**Примечание:** Помните, что отображаемый формат даты отличается от настоящего значения `value` – отображаемый формат даты будет выбран, *базируясь на региональных параметрах браузера пользователя*, тогда как значение `value` всегда имеет формат `гггг-мм-дд`.

Вы также можете получить или установить значение даты в JavaScript с помощью свойств `value` и `valueAsNumber` элемента input. Например:

```js
var dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)
```

Этот код выбирает первый элемент `<input>`, `type` которого `date` и устанавливает значение даты в `2017-06-01` (1 Июня 2017). Затем он считывает это значение обратно в строковом и числовом форматах.

Дополнительные атрибуты
-----------------------

В дополнение к общим атрибутам для всех элементов `<input>`, у `"date"` есть следующие дополнительные атрибуты:

| Атрибут | Описание |
| --- | --- |
| `max` | Максимально возможная дата для установки |
| `min` | Минимально возможная дата для установки |
| `step` | Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента |

### `max`

Максимально возможная дата для установки. Если `value` является более поздней датой, чем дата, указанная в атрибуте `max`, элемент отобразит ошибку при помощи constraint validation (en-US). Если в атрибуте `max` указано значение, не удовлетворяющее формату `yyyy-MM-dd`, значит элемент не будет иметь максимальной даты.

В атрибуте `max` должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте `min`.

### `min`

Минимально возможная дата для установки. Если `value` является более ранней датой, чем дата, указанная в атрибуте `min`, элемент отобразит ошибку при помощи constraint validation (en-US). Если в атрибуте `min` указано значение, не удовлетворяющее формату `yyyy-MM-dd`, значит элемент не будет иметь минимальной даты.

В атрибуте `min` должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте `max`.

### `step`

Атрибут `step` — это число, указывающее уровень точности, которому должно соответствовать значение, или особое значение `any`, которое описано ниже. Допустимы только значения, соответствующие основанию (`min`, если указано, `value` в противном случае или любое подходящее значение по умолчанию, если не указано ни то, ни другое).

Строковое значение `any` означает, что пошаговое изменение не подразумевается и разрешены любые значения (за исключением других ограничений, таких как `min` and `max`).

**Примечание:** Когда введённые пользователем данные не соответствуют пошаговой конфигурации, агент пользователя может использовать округление до ближайшего допустимого значения, предпочитая числа в положительном направлении, когда есть два одинаково близких варианта.

Для полей ввода `date` значение `step` задаётся в днях; и является количеством миллисекунд, равное 86 400 000 умножить на значение `step` (получаемое числовое значение хранится в миллисекундах). Стандартное значение `step` равно 1, что означает 1 день.

**Примечание:** Для полей ввода `date` указание для `step` значения `any` даёт такой же эффект, что и значение `1`.

Использование полей ввода c типом date
--------------------------------------

На первый взгляд, элемент `<input type="date">` выглядит заманчиво — он предоставляет лёгкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с `<input type="date">` в связи с ограниченной поддержкой браузеров.

В этом разделе мы посмотрим на простые, а затем и более сложные способы использования `<input type="date">`, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите Handling browser support).

**Примечание:** Надеемся, со временем поддержка браузерами станет повсеместной, и эта проблема исчезнет.

### Как использовать date?

Самый простой способ использовать `<input type="date">` - это использовать его с элементами `<input>` и label, как показано ниже:

```html
<form>
  <div>
    <label for="bday">Введите дату вашего рождения:</label>
    <input type="date" id="bday" name="bday" />
  </div>
</form>
```

### Установка максимальной и минимальной даты

Вы можете использовать атрибуты `min` и `max`, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату `2017-04-01` и максимальную дату `2017-04-30`. Пользователь сможет выбрать дату только из этого диапазона:

```html
<form>
  <div>
    <label for="party">Укажите предпочтительную дату события:</label>
    <input
 type="date"
 id="party"
 name="party"
 min="2017-04-01"
 max="2017-04-30" />
  </div>
</form>
```

В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет *date picker*.

**Примечание:** вы *должны* уметь использовать атрибут `step`, чтобы менять количество дней, на которое будет происходить шаг при изменении даты (например, чтобы сделать выбираемыми только субботы). Однако, не похоже, что это где-то применялось на данный момент.

### Controlling input size

`<input type="date">` doesn't support form sizing attributes such as `size`. You'll have to resort to CSS for sizing needs.

Validation
----------

By default, `<input type="date">` does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still leave the field empty or (in browsers where the input falls back to type `text`) enter an invalid date (e.g. the 32nd of April).

If you use `min` and `max` to restrict the available dates (see Setting maximum and minimum dates), supporting browsers will display an error if you try to submit a date that is outside the set bounds. However, you'll have to check the results to be sure the value is within these dates, since they're only enforced if the date picker is fully supported on the user's device.

In addition, you can use the `required` attribute to make filling in the date mandatory — again, an error will be displayed if you try to submit an empty date field. This, at least, should work in most browsers.

Let's look at an example — here we've set minimum and maximum dates, and also made the field required:

```html
<form>
  <div>
    <label for="party"
 >Choose your preferred party date (required, April 1st to 20th):</label
 >
    <input
 type="date"
 id="party"
 name="party"
 min="2017-04-01"
 max="2017-04-20"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

If you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. Try playing with the example now:

Here's a screenshot for those of you who aren't using a supporting browser:

![](/ru/docs/Web/HTML/Element/input/date/date-picker-chrome-error-message.png)

Here's the CSS used in the above example. Here we make use of the `:valid` and `:invalid` CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a `<span>` next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.

```css
div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}
```

**Предупреждение:** **Important**: HTML form validation is *not* a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

Handling browser support
------------------------

As mentioned above, the major problem with using date inputs at the time of writing is browser support. As an example, the date picker on Firefox for Android looks like this:

![](/ru/docs/Web/HTML/Element/input/date/date-picker-fxa.png)

Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.

The second problem is the more serious of the two; as we mentioned earlier, with a date input, the actual value is always normalized to the format `yyyy-mm-dd`. With a text input on the other hand, by default the browser has no recognition of what format the date should be in, and there are lots of different ways in which people write dates, for example:

* `ddmmyyyy`
* `dd/mm/yyyy`
* `mm/dd/yyyy`
* `dd-mm-yyyy`
* `mm-dd-yyyy`
* `Month dd yyyy`

One way around this is to put a `pattern` attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:

```html
<form>
  <div>
    <label for="bday">Enter your birthday:</label>
    <input
 type="date"
 id="bday"
 name="bday"
 required
 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern `nnnn-nn-nn`, where `n` is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as `yyyy-dd-mm` (whereas we want `yyyy-mm-dd`). So we still have a problem.
```

div {
  margin-bottom: 10px;
}

input:invalid + span {
  position: relative;
}

input:invalid + span:after {
  content: "✖";
  position: absolute;
  right: -18px;
}

input:valid + span {
  position: relative;
}

input:valid + span:after {
  content: "✓";
  position: absolute;
  right: -18px;
}
```

The best way to deal with dates in forms in a cross-browser way at the moment is to get the user to enter the day, month, and year in separate controls (`<select>` elements being popular; see below for an implementation), or to use a JavaScript library such as jQuery date picker.

Examples
--------

In this example we create two sets of UI elements for choosing dates: a native `<input type="date">` picker and a set of three `<select>` elements for choosing dates in older browsers that don't support the native input.

### HTML

The HTML looks like so:

```html
<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">Enter your birthday:</p>
  <div class="fallbackDatePicker">
    <span>
      <label for="day">Day:</label>
      <select id="day" name="day"></select>
    </span>
    <span>
      <label for="month">Month:</label>
      <select id="month" name="month">
        <option selected>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </span>
    <span>
      <label for="year">Year:</label>
      <select id="year" name="year"></select>
    </span>
  </div>
</form>
```

The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)
```

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}
```

### JavaScript

The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports `<input type="date">`, we create a new `<input>` element, set its `type` to `date`, then immediately check what its type is set to — non-supporting browsers will return `text`, because the `date` type falls back to type `text`. If `<input type="date">` is not supported, we hide the native picker and show the fallback picker UI (`<select>`) instead.

```js
// define variables
var nativePicker = document.querySelector(".nativeDatePicker");
var fallbackPicker = document.querySelector(".fallbackDatePicker");
var fallbackLabel = document.querySelector(".fallbackLabel");

var yearSelect = document.querySelector("#year");
var monthSelect = document.querySelector("#month");
var daySelect = document.querySelector("#day");

// hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// test whether a new date input falls back to a text input or not
var test = document.createElement("input");
test.type = "date";

// if it does, run the code inside the if() {} block
if (test.type === "text") {
  // hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // populate the days and years dynamically
  // (the months are always the same, therefore hardcoded)
  populateDays(monthSelect.value);
  populateYears();
}

function populateDays(month) {
  // delete the current set of <option> elements out of the
  // day <select>, ready for the next set to be injected
  while (daySelect.firstChild) {
    daySelect.removeChild(daySelect.firstChild);
  }

  // Create variable to hold new number of days to inject
  var dayNum;

  // 31 or 30 days?
  if (
    month === "January" ||
    month === "March" ||
    month === "May" ||
    month === "July" ||
    month === "August" ||
    month === "October" ||
    month === "December"
  ) {
    dayNum = 31;
  } else if (
    month === "April" ||
    month === "June" ||
    month === "September" ||
    month === "November"
  ) {
    dayNum = 30;
  } else {
    // If month is February, calculate whether it is a leap year or not
    var year = yearSelect.value;
    var leap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
    dayNum = leap ? 29 : 28;
  }

  // inject the right number of new <option> elements into the day <select>
  for (i = 1; i <= dayNum; i++) {
    var option = document.createElement("option");
    option.textContent = i;
    daySelect.appendChild(option);
  }

  // if previous day has already been set, set daySelect's value
  // to that day, to avoid the day jumping back to 1 when you
  // change the year
  if (previousDay) {
    daySelect.value = previousDay;

    // If the previous day was set to a high number, say 31, and then
    // you chose a month with less total days in it (e.g. February),
    // this part of the code ensures that the highest day available
    // is selected, rather than showing a blank daySelect
    if (daySelect.value === "") {
      daySelect.value = previousDay - 1;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 2;
    }

    if (daySelect.value === "") {
      daySelect.value = previousDay - 3;
    }
  }
}

function populateYears() {
  // get this year as a number
  var date = new Date();
  var year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (var i = 0; i <= 100; i++) {
    var option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

// when the month or year <select> values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = function () {
  populateDays(monthSelect.value);
};

monthSelect.onchange = function () {
  populateDays(monthSelect.value);
};

//preserve day selection
var previousDay;

// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function () {
  previousDay = daySelect.value;
};
```

**Примечание:** Remember that some years have 53 weeks in them (see Weeks per year)! You'll need to take this into consideration when developing production apps.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # date-state-(type=date) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The generic `<input>` element and the interface used to manipulate it, `HTMLInputElement` (en-US)
* Date and Time picker tutorial (en-US)


<input type="tel"> - HTML

<input type="tel">
==================

Элементы `<input>` с типом **`tel`** используются для ввода телефонных номеров. В отличие от `<input/email>` (en-US) и `<input/url>` (en-US) вводимое значение не проходит автоматическую валидацию перед отправкой формы, поскольку форматы телефонных номеров сильно различаются по всему миру.

Интерактивный пример
--------------------

Несмотря на то, что поля ввода `tel` функционально идентичны обычным полям ввода с типом `text`, они приносят пользу: например, браузеры мобильных телефонов могут предоставлять для таких полей специальную клавиатуру, оптимизированную для ввода телефонных номеров. Использование специального поля ввода для телефонных номеров также упрощает реализацию их проверки и обработки.

**Примечание:** Браузеры, не поддерживающие тип `tel`, будут отображать обычное поле ввода `<input/text>` (en-US).

Значение
--------

Атрибут `value` элемента `<input>` содержит строку, которая представляет номер телефона либо является пустой строкой (`""`).

Спецификации
------------

| Specification |
| --- |
| HTML Standard # telephone-state-(type=tel) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Руководство по HTML-формам
* `<input>`
    + `<input/text>` (en-US)
    + `<input/email>` (en-US)
* Compatibility of CSS properties (en-US)