initial commit

14 files changed, 5527 insertions, 0 deletions

diff --git a/files/ru/web/html/element/input/button/index.html b/files/ru/web/html/element/input/button/index.html
new file mode 100644
index 0000000000..984fa13988
--- /dev/null
+++ b/files/ru/web/html/element/input/button/index.html
@@ -0,0 +1,345 @@
+---
+title: <input type="button">
+slug: Web/HTML/Element/Input/button
+tags:
+  - HTML формы
+  - Формы
+  - Элемент Input
+translation_of: Web/HTML/Element/input/button
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Элемент {{HTMLElement("input")}} с типом <strong><code>button</code></strong> отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события {{event("click")}}).</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div>
+
+
+
+<div class="note">
+<p><strong>Заметка</strong>: Хотя элементы <code>&lt;input&gt;</code> с типом <code>button</code> по-прежнему являются абсолютно корректными в HTML, новый элемент {{HTMLElement("button")}} теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента {{HTMLElement("button")}} вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Значение")}}</strong></td>
+   <td>{{domxref("DOMString")}} используется в качестве метки кнопки</td>
+  </tr>
+  <tr>
+   <td><strong>Событие</strong></td>
+   <td>{{event("click")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("type", "input")}} и {{htmlattrxref("value", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Атрибуты IDL</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>None</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Атрибут значения элементов <code>&lt;input type="button"&gt;</code> elements' {{htmlattrxref("value", "input")}} содержит строку {{domxref("DOMString")}} , которая используется в качестве метки кнопки.</p>
+
+<div id="summary-example3">
+<pre class="brush: html">&lt;input type="button" value="Нажми на меня"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p>
+
+<p>Если вы не укажете <code>value</code>, вы получите пустую кнопку:</p>
+
+<div id="summary-example1">
+<pre class="brush: html">&lt;input type="button"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>
+
+<h2 id="Использование_кнопок">Использование кнопок</h2>
+
+<p>Элементы <code>&lt;input type="button"&gt;</code> не имеют поведения по умолчанию (их двоюродные братья, <code><a href="/en-US/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code> используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.</p>
+
+<h3 id="Простая_кнопка">Простая кнопка</h3>
+
+<p>Мы начнем с создания простой кнопки с обработчиком события {{event("click")}} , который запускает наш компьютер (ну, он переключает <code>value</code> кнопки и текстовое содержимое следующего абзаца):</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Запустить ПК"&gt;
+&lt;/form&gt;
+&lt;p&gt;ПК выключен.&lt;/p&gt;</pre>
+
+<pre class="brush: 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 = 'ПК выключен.';
+  }
+}</pre>
+
+<p>Сценарий получает ссылку на объект {{domxref("HTMLInputElement")}}, представляющий <code>&lt;input&gt;</code> в DOM, сохраняя этот параметр в переменной <code>button</code>. Затем {{domxref("EventTarget.addEventListener", "addEventListener()")}} используется для установки функции, которая будет запускаться, когда на кнопке происходят события {{event("click")}}.</p>
+
+<p>{{EmbedLiveSample("Простая_кнопка", 650, 100)}}</p>
+
+<h3 id="Добавление_сочетаний_клавиш_на_кнопки">Добавление сочетаний клавиш на кнопки</h3>
+
+<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p>
+
+<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination; see <a href="/en-US/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> for a useful list of those).</p>
+
+<div id="accesskey-example1">
+<pre class="brush: html">&lt;form&gt;
+  &lt;input type="button" value="Start machine" accesskey="s"&gt;
+&lt;/form&gt;
+&lt;p&gt;The machine is stopped.&lt;/p&gt;
+</pre>
+</div>
+
+<div class="hidden">
+<pre class="brush: js">const button = document.querySelector('input');
+const paragraph = document.querySelector('p');
+
+button.addEventListener('click', updateButton);
+
+function updateButton() {
+  if (button.value === 'Start machine') {
+    button.value = 'Stop machine';
+    paragraph.textContent = 'The machine has started!';
+  } else {
+    button.value = 'Start machine';
+    paragraph.textContent = 'The machine is stopped.';
+  }
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The problem with the above example of course is that the user will not know what the access key is! In a real site, you'd have to provide this information in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).</p>
+</div>
+
+<h3 id="Disabling_and_enabling_a_button">Disabling and enabling a button</h3>
+
+<p>To disable a button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p>
+
+<div id="disable-example1">
+<pre class="brush: html">&lt;input type="button" value="Disable me" disabled&gt;</pre>
+</div>
+
+<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>. In this example our button starts off enabled, but if you press it, it is disabled using <code>button.disabled = true</code>. A {{domxref("WindowTimers.setTimeout","setTimeout()")}} function is then used to reset the button back to its enabled state after two seconds.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_1">Hidden code 1</h6>
+
+<pre class="brush: html">&lt;input type="button" value="Enabled"&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('input');
+
+button.addEventListener('click', disableButton);
+
+function disableButton() {
+  button.disabled = true;
+  button.value = 'Disabled';
+  window.setTimeout(function() {
+    button.disabled = false;
+    button.value = 'Enabled';
+  }, 2000);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p>
+
+<p>If the <code>disabled</code> attribute isn't specified, the button inherits its <code>disabled</code> state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a {{HTMLElement("fieldset")}} element, and then setting <code>disabled</code> on the container.</p>
+
+<p>The example below shows this in action. This is very similar to the previous example, except that the <code>disabled</code> attribute is set on the <code>&lt;fieldset&gt;</code> when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code_2">Hidden code 2</h6>
+
+<pre class="brush: html">&lt;fieldset&gt;
+  &lt;legend&gt;Button group&lt;/legend&gt;
+  &lt;input type="button" value="Button 1"&gt;
+  &lt;input type="button" value="Button 2"&gt;
+  &lt;input type="button" value="Button 3"&gt;
+&lt;/fieldset&gt;</pre>
+
+<pre class="brush: js">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);
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Buttons don't participate in constraint validation; they have no real value to be constrained.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The below example shows a very simple drawing app created using a {{htmlelement("canvas")}} element and some simple CSS and JavaScript (we'll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.</p>
+
+<pre class="brush: html">&lt;div class="toolbar"&gt;
+  &lt;input type="color" aria-label="select pen color"&gt;
+  &lt;input type="range" min="2" max="50" value="30" aria-label="select pen size"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
+  &lt;input type="button" value="Clear canvas"&gt;
+&lt;/div&gt;
+
+&lt;canvas class="myCanvas"&gt;
+  &lt;p&gt;Add suitable fallback here.&lt;/p&gt;
+&lt;/canvas&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">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;
+}</pre>
+</div>
+
+<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight-85;
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'rgb(0,0,0)';
+ctx.fillRect(0,0,width,height);
+
+var colorPicker = document.querySelector('input[type="color"]');
+var sizePicker = document.querySelector('input[type="range"]');
+var output = document.querySelector('.output');
+var 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
+var curX;
+var curY;
+var 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();</pre>
+
+<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-button")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li>
+ <li>The more modern {{HTMLElement("button")}} element.</li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/color/index.html b/files/ru/web/html/element/input/color/index.html
new file mode 100644
index 0000000000..0dcdf05619
--- /dev/null
+++ b/files/ru/web/html/element/input/color/index.html
@@ -0,0 +1,221 @@
+---
+title: <input type="color">
+slug: Web/HTML/Element/Input/color
+tags:
+  - Color Picker
+  - Element
+  - Form input
+  - Forms
+  - HTML
+  - HTML forms
+  - HTML input
+  - Input
+  - Reference
+  - color
+translation_of: Web/HTML/Element/input/color
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>color</code></strong> предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путем ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.</span></p>
+
+<p>Представление элемента может существенно отличаться от одного браузера и/или платформы к другой — это может быть простой текстовый ввод, который автоматически проверяет правильность ввода информации о цвете в соответствующем формате, или стандартный для платформы выбор цвета, или какое-то пользовательское окно выбора цвета.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>7-значная {{domxref("DOMString")}} , указывающая {{cssxref("&lt;color&gt;")}} в строчной шестнадцатеричной системе счисления</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}} и {{htmlattrxref("list", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>list</code> и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>{{Htmlattrxref ("value","input")}} элемента {{HTMLElement ("input")}} типа <code>color</code> всегда является {{domxref ("DOMString")}}, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранен в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведет к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведет к тому, что цвет будет установлен на #000000.</p>
+</div>
+
+<h2 id="Использование_настроек_цвета">Использование настроек цвета</h2>
+
+<p>Входные данные типа <code>color</code> просты из-за ограниченного числа атрибутов, которые они поддерживают.</p>
+
+<h3 id="Предоставление_цвета_по_умолчанию">Предоставление цвета по умолчанию</h3>
+
+<p>Вы можете обновить простой пример выше, чтобы установить значение по умолчанию, так что цветовая заливка будет предварительно заполнена цветом по умолчанию, и палитра цветов (если таковая имеется) также будет по умолчанию использовать этот цвет:</p>
+
+<pre class="brush: html notranslate">&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p>
+
+<p>Если вы не зададите значение, то по умолчанию будет <code>#000000</code>, то есть черный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зеленый и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придется преобразовать их в шестнадцатеричные перед установкой значения.</p>
+
+<h3 id="Отслеживание_изменений_цвета">Отслеживание изменений цвета</h3>
+
+<p>Как и в случае с другими типами {{HTMLElement("input")}}, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: {{domxref("HTMLElement/input_event", "input")}} и {{domxref("HTMLElement/change_event", "change")}}. <code>input</code> запускается на элементе <code>&lt;input&gt;</code> каждый раз, когда меняется цвет. <code>change</code> событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его {{domxref("HTMLInputElement.value", "value")}}.</p>
+
+<p>Вот пример, который наблюдает за изменениями со временем значения цвета:</p>
+
+<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false);
+colorPicker.addEventListener("change", watchColorPicker, false);
+
+function watchColorPicker(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<h3 id="Выбор_значения">Выбор значения</h3>
+
+<p>Если реализация элемента {{HTMLElement("input")}} типа <code>color</code> в браузере пользователя не поддерживается правильно, а вместо этого является текстовым полем для непосредственного ввода строки цвета, вы можете использовать {{domxref("HTMLInputElement.select", " select ()")}} метод выбора текста, находящегося в данный момент в поле редактирования. Если браузер вместо этого верно использует <code>color</code>, select () ничего не делает. Вы должны знать об этом, чтобы ваш код мог адекватно реагировать в любом случае.</p>
+
+<pre class="brush: js notranslate">colorWell.select();</pre>
+
+<h3 id="Вариации_внешнего_вида">Вариации внешнего вида</h3>
+
+<p>Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:<img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>То же самое можно увидеть и в Firefox 55:<img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p>
+
+<p>В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):</p>
+
+<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>Значение цветового ввода считается недопустимым, если {{Glossary("user agent")}} не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс {{cssxref(":invalid")}}.</p>
+
+<h2 id="Пример">Пример</h2>
+
+<p>Давайте создадим пример, который делает немного больше с цветом входного сигнала путем отслеживания {{domxref("HTMLElement/change_event", "change")}} и {{domxref("HTMLElement/input_event", "input")}} событий, чтобы взять новый цвет и применить его к каждому {{HTMLElement("Р")}} элемента в документе.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>HTML довольно прост — пара абзацев описательного материала с {{HTMLElement ("input")}} типа <code>color </code>с идентификатором <code>colorWell</code>, который мы будем использовать для изменения цвета текста абзацев.</p>
+
+<pre class="brush: html notranslate">&lt;p&gt;An example demonstrating the use of the &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;
+   control.&lt;/p&gt;
+
+&lt;label for="colorWell"&gt;Color:&lt;/label&gt;
+&lt;input type="color" value="#ff0000" id="colorWell"&gt;
+
+&lt;p&gt;Watch the paragraph colors change when you adjust the color picker.
+   As you make changes in the color picker, the first paragraph's
+   color changes, as a preview (this uses the &lt;code&gt;input&lt;/code&gt;
+   event). When you close the color picker, the &lt;code&gt;change&lt;/code&gt;
+   event fires, and we detect that to change every paragraph to
+   the selected color.&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Во-первых, есть некоторые настройки. Здесь мы объявляем некоторые переменные. Объявляя переменную, содержащую цвет, который мы установим, когда загрузим страницу, а затем устанавливаем обработчик {{domxref("Window/load_event", "load")}} для выполнения основной работы запуска, как только страница будет полностью загружена.</p>
+
+<pre class="brush: js notranslate">var colorWell;
+var defaultColor = "#0000ff";
+
+window.addEventListener("load", startup, false);
+</pre>
+
+<h4 id="Инициализация">Инициализация</h4>
+
+<p>Как только страница загружена, вызывается наш обработчик событий загрузки <code>startup()</code>:</p>
+
+<pre class="brush: js notranslate">function startup() {
+  colorWell = document.querySelector("#colorWell");
+  colorWell.value = defaultColor;
+  colorWell.addEventListener("input", updateFirst, false);
+  colorWell.addEventListener("change", updateAll, false);
+  colorWell.select();
+}
+</pre>
+
+<p>Это возвращает ссылку на элемент color<strong> </strong><code>&lt;input&gt;</code><strong> </strong>в переменной <code>colorWell</code>, а затем устанавливает значение входного цвета в значение <code>defaultColor</code>. То цвет входное {{domxref("HTMLElement/input_event", "input")}} событие настроено, чтобы вызвать <code>updateFirst()</code> функцию и {{domxref("HTMLElement/change_event", "change")}} событие, вызывается <code>updateAll()</code>. Они оба видны ниже.</p>
+
+<p>Наконец, мы вызываем {{domxref ("HTMLInputElement.select", " select ()")}} для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).</p>
+
+<h4 id="Реакция_на_изменение_цвета">Реакция на изменение цвета</h4>
+
+<p>Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция <code>updateFirst()</code> вызывается в ответ на <code>input</code> событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку <code>input</code> события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.</p>
+
+<pre class="brush: js notranslate">function updateFirst(event) {
+  var p = document.querySelector("p");
+
+  if (p) {
+    p.style.color = event.target.value;
+  }
+}</pre>
+
+<p>Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие <code>change</code>. Мы обрабатываем это событие с помощью функции <code>updateAll()</code>, используя {{domxref("HTMLInputElement.value", "Event.target.value")}} для получения окончательного выбранного цвета:</p>
+
+<pre class="brush: js notranslate">function updateAll(event) {
+  document.querySelectorAll("p").forEach(function(p) {
+    p.style.color = event.target.value;
+  });
+}
+</pre>
+
+<p>Это устанавливает цвет каждого элемента {{HTMLElement("p")}} таким образом, чтобы его атрибут {{cssxref("color")}} соответствовал текущему значению входного цвета, на которое ссылаются с помощью {{domxref("Event.target", "event.target")}}.</p>
+
+<h3 id="Результат">Результат</h3>
+
+<p>Финальный результат выглядит так:</p>
+
+<p>{{EmbedLiveSample("Example", 700, 200)}}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#color-state-(type=color)')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
+
+<p>{{Compat("html.elements.input.input-color")}}</p>
+
+<h2 id="Изучите_также">Изучите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html
new file mode 100644
index 0000000000..5fb53a1437
--- /dev/null
+++ b/files/ru/web/html/element/input/date/index.html
@@ -0,0 +1,510 @@
+---
+title: <input type="date">
+slug: Web/HTML/Element/Input/date
+translation_of: Web/HTML/Element/input/date
+---
+<div>{{HTMLRef}}</div>
+
+<p>Элементы {{htmlelement("input")}} типа <strong><code>date</code></strong> создают поля ввода и позволяют пользователю ввести дату, либо использовать <em>text box</em> для автоматической проверки контента или использовать специальный интерфейс <em>date picker</em>. Возвращаемое значение включает год, месяц, день, но <em>не</em> время. Используйте поля ввода {{HTMLElement("input/time", "time")}} или {{HTMLElement("input/datetime-local", "datetime-local")}}, чтобы вводить время или дату+время соответственно.</p>
+
+<p>Отображение <strong><code>date</code></strong> различается в зависимости от браузера, кроме того не все браузеры поддерживают <strong><code>date</code></strong>. Подробнее см. {{anch("Browser compatibility")}}. В неподдерживаемых браузерах элемент будет отображаться как обычный <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на внесение изменений.</p>
+
+<p>Среди браузеров со своим интерфейсом для выбора даты, есть интерфейс браузеров Chrome и Opera, который выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p>
+
+<p>В Edge он выглядит так:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p>
+
+<p>А в Firefox выглядит так:</p>
+
+<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>Возвращает {{domxref("DOMString")}}, с датой в формате <strong>гггг-мм-дд</strong>,<strong> </strong>или <strong>пустую строку</strong></td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введенной в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p>
+
+<pre class="brush: html notranslate">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+
+<p>{{EmbedLiveSample('Значение', 600, 40)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Помните, что отображаемый формат даты отличается от настоящего значения <code>value</code></strong> – отображаемый формат даты будет выбран, <em>базируясь на региональных параметрах браузера пользователя</em>, тогда как значение <code>value</code> всегда имеет формат <code>гггг-мм-дд</code>.</p>
+</div>
+
+<p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p>
+
+<pre class="brush: js notranslate">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)
+</pre>
+
+<p>Этот код выбирает первый элемент {{HTMLElement("input")}}, <code>type</code> которого <code>date</code> и устанавливает значение даты в <code>2017-06-01</code> (1 Июня 2017). Затем он считывает это значение обратно в строковом и числовом форматах.</p>
+
+<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2>
+
+<p>В дополнение к общим атрибутам для всех элементов {{HTMLElement("input")}}, у <code>"date"</code> есть следующие дополнительные атрибуты:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Атрибут</th>
+   <th scope="col">Описание</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимально возможная дата для установки</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Минимально возможная дата для установки</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Шаг (в днях), с которым будет изменяться дата при нажатии кнопок вниз или вверх данного элемента</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>Максимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более поздней датой, чем дата, указанная в атрибуте <code>{{anch("max")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>max</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь максимальной даты.</p>
+
+<p>В атрибуте <code>max</code> должна быть указана строка с датой, которая больше или равна дате, указанной в атрибуте <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>Минимально возможная дата для установки. Если {{htmlattrxref("value", "input")}} является более ранней датой, чем дата, указанная в атрибуте <code>{{anch("min")}}</code>, элемент отобразит ошибку при помощи <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Если в атрибуте <code>min</code> указано значение, не удовлетворяющее формату <code>yyyy-MM-dd</code>, значит элемент не будет иметь минимальной даты.</p>
+
+<p>В атрибуте <code>min</code> должна быть указана строка с датой, которая меньше или равна дате, указанной в атрибуте <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/ru/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>Для полей ввода <code>date</code> значение <code>step</code> задаётся в днях; и является количеством миллисекунд, равное 86 400 000 умножить на значение <code>step</code> (получаемое числовое значение хранится в миллисекундах). Стандартное значение <code>step</code> равно 1, что означает 1 день.</p>
+
+<div class="blockIndicator note">
+<p>Для полей ввода <code>date</code> указание для <code>step</code> значения <code>any</code> даёт такой же эффект, что и значение <code>1</code>.</p>
+</div>
+
+<h2 id="Использование_полей_ввода_c_типом_date">Использование полей ввода c типом date</h2>
+
+<p>На первый взгляд, элемент <code>&lt;input type="date"&gt;</code> выглядит заманчиво — он предоставляет легкий графический интерфейс для выбора даты, нормализует формат даты, отправляемой на сервер независимо от локальных настроек пользователя. Тем не менее, есть проблемы с <code>&lt;input type="date"&gt;</code> в связи с ограниченой поддержкой браузеров.</p>
+
+<p>В этом разделе мы посмотрим на простые, а затем и более сложные способы использования <code>&lt;input type="date"&gt;</code>, и позже дадим советы по уменьшению влияния поддержки браузерами (смотрите {{anch("Handling browser support")}}).</p>
+
+<div class="blockIndicator note">
+<p>Надеемся, со временем поддержка браузерами станет повсеместной, и эта проблема исчезнет.</p>
+</div>
+
+<h3 id="Как_использовать_date">Как использовать date?</h3>
+
+<p>Самый простой способ использовать <code>&lt;input type="date"&gt;</code> - это использовать его с элементами <code>&lt;input&gt;</code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Введите дату вашего рождения:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Как_использовать_date', 600, 40)}}</p>
+
+<h3 id="Установка_максимальной_и_минимальной_даты">Установка максимальной и минимальной даты</h3>
+
+<p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Укажите предпочтительную дату события:&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample('Установка_максимальной_и_минимальной_даты', 600, 40)}}</p>
+
+<p>В результате выполнения кода, пользователь сможет выбрать любой день апреля 2017 года, но не сможет выбрать и даже просмотреть дни других месяцев и годов, в том числе через виджет <em>date picker</em>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Вы <em>должны</em> уметь использовать аттрибут {{htmlattrxref("step", "input")}}, чтобы менять количество дней, на которое будет происходить шаг при изменении даты (например, чтобы сделать выбираемыми только субботы). Однако, не похоже, что это где-то применялось на данный момент.</p>
+</div>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p><code>&lt;input type="date"&gt;</code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>By default, <code>&lt;input type="date"&gt;</code> 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 <code>text</code>) enter an invalid date (e.g. the 32nd of April).</p>
+
+<p>If you use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see {{anch("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.</p>
+
+<p>In addition, you can use the {{htmlattrxref("required", "input")}} 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.</p>
+
+<p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date (required, April 1st to 20th):&lt;/label&gt;
+    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>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:</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 100) }}</p>
+
+<p>Here's a screenshot for those of you who aren't using a supporting browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":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 {{htmlelement("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.</p>
+
+<pre class="brush: css notranslate">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;
+}</pre>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> 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).</p>
+</div>
+
+<h2 id="Handling_browser_support">Handling browser support</h2>
+
+<p>As mentioned above, the major problem with using date inputs at the time of writing is {{anch("Browser compatibility", "browser support")}}. As an example, the date picker on Firefox for Android looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p>
+
+<p>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.</p>
+
+<p>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 <code>yyyy-mm-dd</code>. 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:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>Month dd yyyy</code></li>
+</ul>
+
+<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} 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:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p>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 <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">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;
+}</pre>
+</div>
+
+<p>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 ({{htmlelement("select")}} elements being popular; see below for an implementation), or to use a JavaScript library such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example we create two sets of UI elements for choosing dates: a native <code>&lt;input type="date"&gt;</code> picker and a set of three {{htmlelement("select")}} elements for choosing dates in older browsers that don't support the native input.</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 100) }}</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML looks like so:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="nativeDatePicker"&gt;
+      &lt;label for="bday"&gt;Enter your birthday:&lt;/label&gt;
+      &lt;input type="date" id="bday" name="bday"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;p class="fallbackLabel"&gt;Enter your birthday:&lt;/p&gt;
+    &lt;div class="fallbackDatePicker"&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>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.)</p>
+
+<div class="hidden">
+<pre class="brush: css notranslate">input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="date"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code>&lt;input type="date"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p>
+
+<pre class="brush: js notranslate">// 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 &lt;option&gt; elements out of the
+  // day &lt;select&gt;, 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 &amp;&amp; year % 100 !== 0) || year % 400 === 0;
+    dayNum = leap ? 29 : 28;
+  }
+
+  // inject the right number of new &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= 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 &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; 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;
+}</pre>
+
+<div class="note">
+<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-date")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/datetime-local/index.html b/files/ru/web/html/element/input/datetime-local/index.html
new file mode 100644
index 0000000000..99ddddd6bd
--- /dev/null
+++ b/files/ru/web/html/element/input/datetime-local/index.html
@@ -0,0 +1,586 @@
+---
+title: <input type="datetime-local">
+slug: Web/HTML/Element/Input/datetime-local
+translation_of: Web/HTML/Element/input/datetime-local
+---
+<p>{{HTMLRef}}</p>
+
+<p>{{htmlelement("input")}} элемент типа <strong><code>datetime-local</code></strong> создает поля ввода, позволяющие легко ввести дату и время —  год, месяц, день, часы и минуты.</p>
+
+<p>Интерфейс управления варьируется от браузера к браузеру, на данный момент поддержка носит фрагментарный характер, только с Chrome/Opera  и EDGE на рабочем столе — и большинство современных мобильных версиях браузера — наличие полезной реализации. В других браузерах элемент управления сводиться до простого <code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="datetime" type="datetime-local"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p>
+</div>
+
+<p>Для тех из вас, кто не использует поддерживающий браузер, Chrome/Opera datetime-local control выглядит как скриншот ниже. Нажатие на стрелку вниз с правой стороны приводит к выбору даты, чтобы вы могли выбрать дату; вы должны ввести время вручную.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p>
+
+<p>В Edge <code>datetime-local</code> элемент управления выглядит как на скриншоте ниже. Клик на дате и времени отобразит два отдельных поля выбора, чтобы Вы могли легко установить дату и время. То есть, по сути, получаем два элемента <code>date</code> и <code>time</code>, объединенных в один:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing a date and time, or empty.</td>
+  </tr>
+  <tr>
+   <td><strong>события</strong></td>
+   <td>{{event("change")}} и {{event("input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("step", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td>
+  </tr>
+  <tr>
+   <td><strong>методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значение">Значение</h2>
+
+<p> {{domxref("DOMString")}} представление значения даты, введенной во входные данные. Вы можете установить значение по умолчанию для ввода, включая дату внутри {{htmlattrxref("value", "input")}} атрибута, как:</p>
+
+<pre class="brush: html">&lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Value', 600, 60) }}</p>
+
+<p>Одна вещь, чтобы отметить, что отображаемый формат даты отличается от фактического <code>значения</code> — отображаемый формат даты будет выбран на основе установленного языкового стандарта операционной системы пользователя, в то время как дата<code>значение</code> всегда форматируется <code>yyyy-MM-ddThh:mm</code>. Когда значение передается на сервер, например, это будет выглядеть <code>partydate=2017-06-01T08:30</code>.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: также имейте в виду, что если такие данные поступают через http-запрос Get, двоеточие нужно экранировать для включения в параметры URL, например <code>partydate=2017-06-01T08%3A30</code>.</p>
+</div>
+
+<p>Вы также можете получить и установить значение даты в JavaScript, используя {{domxref("HTMLInputElement.value")}} свойство, например:</p>
+
+<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]');
+dateControl.value = '2017-06-01T08:30';</pre>
+
+<h2 id="Использование_локальных_входных_данных_datetime">Использование локальных входных данных datetime</h2>
+
+<p>Ввод даты и времени выглядит удобно на первый взгляд — он обеспечивает простой пользовательский интерфейс для выбора даты и времени, и они нормализуют формат данных, отправляемых на сервер, независимо от локали пользователя. Тем не менее, есть проблемы с <code>&lt;input type="datetime-local"&gt;</code> из-за ограниченной поддержки браузера.</p>
+
+<p>Мы рассмотрим основные и более сложные способы использования <code>&lt;input type="datetime-local"&gt;</code>, затем предложим советы по устранению проблемы поддержки браузера позже (see {{anch("Handling browser support")}}).</p>
+
+<h3 id="Базовое_использование_локальных_полей_ввода_datetime">Базовое использование локальных полей ввода datetime</h3>
+
+<p>Самое простои использование <code>&lt;input type="datetime-local"&gt;</code> включает комбинацию базового <code>&lt;input&gt;</code> и {{htmlelement("label")}} элемента, как в примере ниже:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }}</p>
+
+<h3 id="Установка_максимума_и_минимума_даты_и_времени">Установка максимума и минимума даты и времени</h3>
+
+<p>Вы можете использовать {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}} аттрибуты чтобы ограничить дату/время, которое может выбрать пользователь. В примере ниже мы устанавливает минимальные дату и время в <code>2017-06-01T08:30</code> и максимальные в <code>2017-06-30T16:30</code>:</p>
+
+<pre class="brush: html">  &lt;form&gt;
+    &lt;label for="party"&gt;Enter a date and time for your party booking:&lt;/label&gt;
+    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
+  &lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }}</p>
+
+<p>Как результат:</p>
+
+<ul>
+ <li>Могут быть выбраны только дни из Июня 2017 — только дни, которые входят в заданный диапазон дат доступны для выбота, и в виджете нельзя увидеть даты, не принадлежaщие Июню.</li>
+ <li>В зависимости от того, какой браузер Вы используете, Вы можете заметить, что вребя вне заданного диапазона не доступно к выбору (e.g. Edge), или доступно к выбору(e.g. Chrome) но невалидно (see {{anch("Validation")}}).</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Существует возможность использовать {{htmlattrxref("step", "input")}} аттрибут для того, чтобы установить количество дней, которые будут пропущены каждый раз, когда дата увеличивается (например, если Вы хотите сделать доступными для выбора только Субботы). Однако, на момент написание этой статьи это нет эффективной реализации этой функции.</p>
+</div>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p><code>&lt;input type="datetime-local"&gt;</code> doesn't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> for sizing needs.</p>
+
+<h3 id="Setting_timezones">Setting timezones</h3>
+
+<p>One thing the <code>datetime-local</code> input type doesn't provide is a way to set the timezone/locale of the datetime. This was available in the <code><a href="/en-US/docs/Web/HTML/Element/input/datetime">datetime</a></code> 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.</p>
+
+<p>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 <code><a href="/en-US/docs/Web/HTML/Element/input/hidden">hidden</a></code> input type. For example:</p>
+
+<pre class="brush: html">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+
+<p>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 {{htmlelement("select")}} element:</p>
+
+<pre class="brush: html">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
+    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
+    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
+    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
+    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
+    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
+    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+
+  ...
+
+&lt;/select&gt;</pre>
+
+<p>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.</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above code snippet is taken from <a href="https://gist.github.com/nodesocket/3919205">All world timezones in an HTML select element</a>.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>By default, <code>&lt;input type="datetime-local"&gt;</code> 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).</p>
+
+<p>You can use {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} to restrict the available dates (see anch("Setting maximum and minimum dates")), and in addition use the {{htmlattrxref("required", "input")}} 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.</p>
+
+<p>Let's look at an example — here we've set minimum and maximum datetimes, and also made the field required:</p>
+
+<pre class="brush: html">&lt;form&gt;
+    &lt;div&gt;
+        &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Book party!"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>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:</p>
+
+<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p>
+
+<p>Here's'a screenshot for those of you who aren't using a supporting browser:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p>
+
+<p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":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 {{htmlelement("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.</p>
+
+<pre class="brush: 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;
+}</pre>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> 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).</p>
+</div>
+
+<h2 id="Handling_browser_support">Handling browser support</h2>
+
+<p>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 <code>datetime-local</code> picker on Firefox for Android looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p>
+
+<p>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.</p>
+
+<p>The second problem is the most serious — as we mentioned earlier, with a <code>datetime-local</code> input the actual value is always normalized to the format <code>yyyy-mm-ddThh:mm</code>. 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:</p>
+
+<ul>
+ <li><code>ddmmyyyy</code></li>
+ <li><code>dd/mm/yyyy</code></li>
+ <li><code>mm/dd/yyyy</code></li>
+ <li><code>dd-mm-yyyy</code></li>
+ <li><code>mm-dd-yyyy</code></li>
+ <li><code>mm-dd-yyyy hh:mm</code> (12 hour clock)</li>
+ <li><code>mm-dd-yyyy hh:mm</code> (24 hour clock)</li>
+ <li>etc.</li>
+</ul>
+
+<p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your <code>datetime-local</code> input. Even though the <code>datetime-local</code> input doesn't use it, the text input fallback will. For example, try viewing the following demo in a non-supporting browser:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="party"&gt;Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):&lt;/label&gt;
+    &lt;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&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit" value="Book party!"&gt;
+  &lt;/div&gt;
+  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p>
+
+<p>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 <code>nnnn-nn-nnTnn:nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times.</p>
+
+<p>And what user is going to understand the pattern they need to enter the time and date in?</p>
+
+<p>We still have a problem.</p>
+
+<div class="hidden">
+<pre class="brush: css">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;
+}</pre>
+</div>
+
+<p>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 ({{htmlelement("select")}} elements being popular — see below for an implementation), or use JavaScript libraries such as <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>, and the <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example we create two sets of UI elements for choosing datetimes — a native <code>&lt;input type="datetime-local"&gt;</code> picker, and a set of five {{htmlelement("select")}} elements for choosing dates and times in older browsers that don't support the native input.</p>
+
+<p>{{ EmbedLiveSample('Examples', 600, 140) }}</p>
+
+<p>The HTML looks like so:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div class="nativeDateTimePicker"&gt;
+    &lt;label for="party"&gt;Choose a date and time for your party:&lt;/label&gt;
+    &lt;input type="datetime-local" id="party" name="bday"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;p class="fallbackLabel"&gt;Choose a date and time for your party:&lt;/p&gt;
+  &lt;div class="fallbackDateTimePicker"&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="day"&gt;Day:&lt;/label&gt;
+        &lt;select id="day" name="day"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="month"&gt;Month:&lt;/label&gt;
+        &lt;select id="month" name="month"&gt;
+          &lt;option selected&gt;January&lt;/option&gt;
+          &lt;option&gt;February&lt;/option&gt;
+          &lt;option&gt;March&lt;/option&gt;
+          &lt;option&gt;April&lt;/option&gt;
+          &lt;option&gt;May&lt;/option&gt;
+          &lt;option&gt;June&lt;/option&gt;
+          &lt;option&gt;July&lt;/option&gt;
+          &lt;option&gt;August&lt;/option&gt;
+          &lt;option&gt;September&lt;/option&gt;
+          &lt;option&gt;October&lt;/option&gt;
+          &lt;option&gt;November&lt;/option&gt;
+          &lt;option&gt;December&lt;/option&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="year"&gt;Year:&lt;/label&gt;
+        &lt;select id="year" name="year"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;span&gt;
+        &lt;label for="hour"&gt;Hour:&lt;/label&gt;
+        &lt;select id="hour" name="hour"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+      &lt;span&gt;
+        &lt;label for="minute"&gt;Minute:&lt;/label&gt;
+        &lt;select id="minute" name="minute"&gt;
+        &lt;/select&gt;
+      &lt;/span&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>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!</p>
+
+<div class="hidden">
+<pre class="brush: css">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;
+}</pre>
+</div>
+
+<p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code>&lt;input type="date"&gt;</code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code>&lt;input type="date"&gt;</code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p>
+
+<pre class="brush: 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 &lt;option&gt; elements out of the
+  // day &lt;select&gt;, 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 &lt;option&gt; elements into the day &lt;select&gt;
+  for(i = 1; i &lt;= 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 &lt;select&gt;
+  for(var i = 0; i &lt;= 100; i++) {
+    var option = document.createElement('option');
+    option.textContent = year-i;
+    yearSelect.appendChild(option);
+  }
+}
+
+function populateHours() {
+  // populate the hours &lt;select&gt; with the 24 hours of the day
+  for(var i = 0; i &lt;= 23; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    hourSelect.appendChild(option);
+  }
+}
+
+function populateMinutes() {
+  // populate the minutes &lt;select&gt; with the 60 hours of each minute
+  for(var i = 0; i &lt;= 59; i++) {
+    var option = document.createElement('option');
+    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    minuteSelect.appendChild(option);
+  }
+}
+
+// when the month or year &lt;select&gt; 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;
+}</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comments</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>20</td>
+   <td>12</td>
+   <td>{{CompatNo}}<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>10.62</td>
+   <td>{{CompatNo}}<sup>[2]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] This feature is not implemented yet. See {{bug("888320")}} and <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<p>[2] It is recognized but there is no UI.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/datetime/index.html b/files/ru/web/html/element/input/datetime/index.html
new file mode 100644
index 0000000000..6b6b0a2292
--- /dev/null
+++ b/files/ru/web/html/element/input/datetime/index.html
@@ -0,0 +1,29 @@
+---
+title: <input type="datetime">
+slug: Web/HTML/Element/Input/datetime
+tags:
+  - Element
+  - HTML
+  - HTML формы
+  - Reference
+  - datetime
+  - Устаревший
+  - Формы
+  - Элемент
+  - Элемент ввода
+translation_of: Web/HTML/Element/input/datetime
+---
+<div>{{HTMLRef}}{{obsolete_header}}</div>
+
+<p>HTML <code>&lt;input type="datetime"&gt;</code>  был элементом для ввода даты и времени (час, минута, секунда и доля секунды), а также часовой пояс. <strong>Эта функция была <a class="external external-icon" href="https://github.com/whatwg/html/issues/336">удалена из WHATWG HTML</a></strong> и больше не поддерживается в браузерах.</p>
+
+<p>Вместо этого, браузеры реализуют (и разработчикам рекомендуется использовать)  <code><a href="/ru/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>.</p>
+
+<p>Формат значений даты и времени, использумый этим типом описан в {{SectionOnPage("/ru/docs/Web/HTML/Date_and_time_formats", "Строки глобальной даты и времени")}}.</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("input")}}</li>
+ <li><a href="/ru/docs/Web/HTML/Date_and_time_formats">Форматы даты и времени используемые в HTML</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/file/index.html b/files/ru/web/html/element/input/file/index.html
new file mode 100644
index 0000000000..7e47d3be03
--- /dev/null
+++ b/files/ru/web/html/element/input/file/index.html
@@ -0,0 +1,439 @@
+---
+title: <input type="file">
+slug: Web/HTML/Element/Input/file
+translation_of: Web/HTML/Element/input/file
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элемент с атрибутом <strong><code>type="file"</code></strong> позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи <a href="/ru/docs/Learn/HTML/Forms">формы</a>, или обработаны JavaScript и <a href="/en-US/docs/Using_files_from_web_applications">File API</a>.</span></p>
+
+<div id="file-example">
+<pre class="brush: html">&lt;input name="myFile" type="file"&gt;
+</pre>
+</div>
+
+<p>{{EmbedLiveSample('file-example', 650, 40)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} представляет собой путь до выбранного файла.</td>
+  </tr>
+  <tr>
+   <td><strong>Действия</strong></td>
+   <td>{{event("change")}} и{{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("accept", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("required", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>files</code> and <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} элемента input содержит {{domxref("DOMString")}}, который представляет путь к выбранным файлам. Если пользователь выбрал несколько файлов, <code>value</code> представляет первый файл из списка. Отстальные файлы можно определить используя {{domxref("HTMLInputElement.files")}} свойство элемента input.</p>
+
+<div class="note"><strong>Note:</strong>
+
+<ol>
+ <li>Если выбрано несколько файлов, строка представляет собой первый выбранный файл. JavaScript предоставляет доступ к остальным файлам через свойство <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)"><code>FileList</code></a>.</li>
+ <li>Если не выбрано ни одного файла, .строка равна <code>""</code> (пустая).</li>
+ <li>Строка <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">начинается с  <code>C:\fakepath\</code></a>,  для предотвращения определения файловой структуры пользователя вредоносным ПО.</li>
+</ol>
+</div>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the common attributes shared by all {{HTMLElement("input")}} elements, inputs of type <code>file</code> also support:</p>
+
+<dl>
+ <dt><code>files</code></dt>
+ <dd>A {{domxref("FileList")}} object that lists every selected file. This list has no more than one member unless the {{htmlattrxref("multiple", "input")}} attribute is specified.</dd>
+</dl>
+
+<h2 id="Using_file_inputs">Using file inputs</h2>
+
+<h3 id="A_basic_example">A basic example</h3>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+ &lt;div&gt;
+   &lt;label for="file"&gt;Choose file to upload&lt;/label&gt;
+   &lt;input type="file" id="file" name="file" multiple&gt;
+ &lt;/div&gt;
+ &lt;div&gt;
+   &lt;button&gt;Submit&lt;/button&gt;
+ &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>This produces the following output:</p>
+
+<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">see it running live</a>.</p>
+</div>
+
+<p>Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.</p>
+
+<p>Including the {{htmlattrxref("multiple", "input")}} attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down <kbd>Shift</kbd> or <kbd>Control</kbd>, and then clicking). If you only want the user to choose a single file per <code>&lt;input&gt;</code>, omit the <code>multiple</code> attribute.</p>
+
+<p>When the form is submitted, each selected file's name will be added to URL parameters in the following fashion: <code>?file=file1.txt&amp;file=file2.txt</code></p>
+
+<h3 id="Getting_information_on_selected_files">Getting information on selected files</h3>
+
+<p>The selected files' are returned by the element's {{domxref("HTMLElement.files", "files")}} property, which is a {{domxref("FileList")}} object containing a list of {{domxref("File")}} objects. The <code>FileList</code> behaves like an array, so you can check its <code>length</code> property to get the number of selected files.</p>
+
+<p>Each <code>File</code> object contains the following information:</p>
+
+<dl>
+ <dt><code>name</code></dt>
+ <dd>The file's name.</dd>
+ <dt><code>lastModified</code></dt>
+ <dd>A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).</dd>
+ <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt>
+ <dd>A {{jsxref("Date")}} object representing the date and time at which the file was last modified. <em>This is deprecated and should not be used. Use <code>lastModified</code> instead.</em></dd>
+ <dt><code>size</code></dt>
+ <dd>The size of the file in bytes.</dd>
+ <dt><code>type</code></dt>
+ <dd>The file's <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME type</a>.</dd>
+ <dt>webkitRelativePath {{non-standard_inline}}</dt>
+ <dd>A string specifying the file's path relative to the base directory selected in a directory picker (that is, a <code>file</code> picker in which the {{htmlattrxref("webkitdirectory", "input")}} attribute is set). <em>This is non-standard and should be used with caution.</em></dd>
+</dl>
+
+<div class="note">
+<p><strong>Note</strong>: You can set as well as get the value of <code>HTMLInputElement.files</code> in all modern browsers; this was most recently added to Firefox, in version 57 (see {{bug(1384030)}}).</p>
+</div>
+
+<h3 id="Limiting_accepted_file_types">Limiting accepted file types</h3>
+
+<p>Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as <a href="/en-US/docs/Glossary/jpeg">JPEG</a> or <a href="/en-US/docs/Glossary/PNG">PNG</a>.</p>
+
+<p>Acceptable file types can be specified with the {{htmlattrxref("accept","input")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:</p>
+
+<ul>
+ <li><code>accept="image/png"</code> or <code>accept=".png"</code> — Accepts PNG files.</li>
+ <li><code>accept="image/png, image/jpeg"</code> or <code>accept=".png, .jpg, .jpeg"</code> — Accept PNG or JPEG files.</li>
+ <li><code>accept="image/*"</code> — Accept any file with an <code>image/*</code> MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)</li>
+ <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — accept anything that smells like an MS Word document.</li>
+</ul>
+
+<p>Let's look like a more complete example:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="profile_pic"&gt;Choose file to upload&lt;/label&gt;
+    &lt;input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png"&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">div {
+  margin-bottom: 10px;
+}</pre>
+</div>
+
+<p>This produces a similar-looking output to the previous example:</p>
+
+<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub too — see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">source code</a>, and also <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">see it running live</a>.</p>
+</div>
+
+<p>It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the <code>accept</code> value (the exact nature differs across browsers and operating systems).</p>
+
+<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p>
+
+<p>The <code>accept</code> attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.</p>
+
+<p>Because of this, you should make sure that the <code>accept</code> attribute is backed up by appropriate server-side validation.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the {{domxref("HTMLInputElement.files")}} property, as well as showing off a few clever tricks.</p>
+
+<div class="note">
+<p><strong>Note</strong>: You can see the complete source code for this example on GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">see it live also</a>). We won't explain the CSS; the JavaScript is the main focus.</p>
+</div>
+
+<p>First of all, let's look at the HTML:</p>
+
+<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
+  &lt;div&gt;
+    &lt;label for="image_uploads"&gt;Choose images to upload (PNG, JPG)&lt;/label&gt;
+    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
+  &lt;/div&gt;
+  &lt;div class="preview"&gt;
+    &lt;p&gt;No files currently selected for upload&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">html {
+  font-family: sans-serif;
+}
+
+form {
+  width: 600px;
+  background: #ccc;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid black;
+}
+
+form ol {
+  padding-left: 0;
+}
+
+form li, div &gt; p {
+  background: #eee;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  list-style-type: none;
+  border: 1px solid black;
+}
+
+form img {
+  height: 64px;
+  order: 1;
+}
+
+form p {
+  line-height: 32px;
+  padding-left: 10px;
+}
+
+form label, form button {
+  background-color: #7F9CCB;
+  padding: 5px 10px;
+  border-radius: 5px;
+  border: 1px ridge black;
+  font-size: 0.8rem;
+  height: auto;
+}
+
+form label:hover, form button:hover {
+  background-color: #2D5BA3;
+  color: white;
+}
+
+form label:active, form button:active {
+  background-color: #0D3F8F;
+  color: white;
+}</pre>
+</div>
+
+<p>This is similar to what we've seen before — nothing special to comment on.</p>
+
+<p>Next, let's walk through the JavaScript.</p>
+
+<p>In the first lines of script, we get references to the form input itself, and the {{htmlelement("div")}} element with the class of <code>.preview</code>. Next, we hide the {{htmlelement("input")}} element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the input element by clicking its {{htmlelement("label")}}, so it is better to visually hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.</p>
+
+<pre class="brush: js">var input = document.querySelector('input');
+var preview = document.querySelector('.preview');
+
+input.style.opacity = 0;</pre>
+
+<div class="note">
+<p><strong>Note:</strong> <a href="/en-US/docs/Web/CSS/opacity"><code>opacity</code></a> is used to hide the file input instead of <a href="/en-US/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> or <a href="/en-US/docs/Web/CSS/display"><code>display: none</code></a>, because assistive technology interprets the latter two styles to mean the file input isn't interactive.</p>
+</div>
+
+<p>Next, we add an <a href="/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a> to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom <code>updateImageDisplay()</code> function.</p>
+
+<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre>
+
+<p>Whenever the <code>updateImageDisplay()</code> function is invoked, we:</p>
+
+<ul>
+ <li>Use a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> loop to empty the previous contents of the preview <code>&lt;div&gt;</code>.</li>
+ <li>Grab the {{domxref("FileList")}} object that contains the information on all the selected files, and store it in a variable called <code>curFiles</code>.</li>
+ <li>Check to see if no files were selected, by checking if<code>curFiles.length</code> is equal to 0. If so, print a message into the preview <code>&lt;div&gt;</code> stating that no files have been selected.</li>
+ <li>If files <em>have</em> been selected, we loop through each one, printing information about it into the preview <code>&lt;div&gt;</code>. Things to note here:</li>
+ <li>We use the custom <code>validFileType()</code> function to check whether the file is of the correct type (e.g. the image types specified in the <code>accept</code> attribute).</li>
+ <li>If it is, we:
+  <ul>
+   <li>Print out its name and file size into a list item inside the previous <code>&lt;div&gt;</code> (obtained from <code>curFiles[i].name</code> and <code>curFiles[i].size</code>). The custom <code>returnFileSize()</code> function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).</li>
+   <li>Generate a thumbnail preview of the image by calling <code>window.<a href="/en-US/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> and reducing the image size in the CSS, then insert that image into the list item too.</li>
+  </ul>
+ </li>
+ <li>If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.</li>
+</ul>
+
+<pre class="brush: js">function updateImageDisplay() {
+  while(preview.firstChild) {
+    preview.removeChild(preview.firstChild);
+  }
+
+  var curFiles = input.files;
+  if(curFiles.length === 0) {
+    var para = document.createElement('p');
+    para.textContent = 'No files currently selected for upload';
+    preview.appendChild(para);
+  } else {
+    var list = document.createElement('ol');
+    preview.appendChild(list);
+    for(var i = 0; i &lt; curFiles.length; i++) {
+      var listItem = document.createElement('li');
+      var para = document.createElement('p');
+      if(validFileType(curFiles[i])) {
+        para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
+        var image = document.createElement('img');
+        image.src = window.URL.createObjectURL(curFiles[i]);
+
+        listItem.appendChild(image);
+        listItem.appendChild(para);
+
+      } else {
+        para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
+        listItem.appendChild(para);
+      }
+
+      list.appendChild(listItem);
+    }
+  }
+}</pre>
+
+<p>The custom <code>validFileType()</code> function takes a {{domxref("File")}} object as a parameter, then loops through the list of allowed file types, checking if any matches the file's <code>type</code> property. If a match is found, the function returns <code>true</code>. If no match is found, it returns <code>false</code>.</p>
+
+<pre class="brush: js">var fileTypes = [
+  'image/jpeg',
+  'image/pjpeg',
+  'image/png'
+]
+
+function validFileType(file) {
+  for(var i = 0; i &lt; fileTypes.length; i++) {
+    if(file.type === fileTypes[i]) {
+      return true;
+    }
+  }
+
+  return false;
+}</pre>
+
+<p>The <code>returnFileSize()</code> function takes a number (of bytes, taken from the current file's <code>size</code> property), and turns it into a nicely formatted size in bytes/KB/MB.</p>
+
+<pre class="brush: js">function returnFileSize(number) {
+  if(number &lt; 1024) {
+    return number + 'bytes';
+  } else if(number &gt; 1024 &amp;&amp; number &lt; 1048576) {
+    return (number/1024).toFixed(1) + 'KB';
+  } else if(number &gt; 1048576) {
+    return (number/1048576).toFixed(1) + 'MB';
+  }
+}</pre>
+
+<p>The example looks like this; have a play:</p>
+
+<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>iOS WebKit<br>
+    <sup><sub>(Safari/Chrome/Firefox/etc)</sub></sup></th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(4.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> — contains a number of other useful examples related to <code>&lt;input type="file"&gt;</code> and the <a href="/en-US/docs/Web/API/File">File API</a>.</li>
+</ul>
diff --git a/files/ru/web/html/element/input/image/index.html b/files/ru/web/html/element/input/image/index.html
new file mode 100644
index 0000000000..08b69b943a
--- /dev/null
+++ b/files/ru/web/html/element/input/image/index.html
@@ -0,0 +1,205 @@
+---
+title: <input type="image">
+slug: Web/HTML/Element/Input/image
+translation_of: Web/HTML/Element/input/image
+---
+<p><code>&lt;input type="image"&gt; - это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Разрешенное содержимое</th>
+   <td>Нету, это пустой элемент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Необязательный закрывающийся тег</th>
+   <td>Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешенные родительские элементы</th>
+   <td>Любой элемент, которому доступен фразообразующий контент (<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс </th>
+   <td>{{domxref("HTMLInputElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этому элементу доступны глобальные атрибуты (<a href="/en-US/docs/HTML/Global_attributes">global attributes</a>).</p>
+
+<p>{{htmlattrdef("type")}}</p>
+
+<dl>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+</dl>
+
+<dl>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form is appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the <strong>type</strong> attribute is <code>image</code> type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element as an image map.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute defines the width of the image displayed for the button.</dd>
+ <dt>
+ <h2 id="Примеры">Примеры</h2>
+ </dt>
+</dl>
+
+<h3 id="simple_input_image_example" name="simple_input_image_example">Поле в виде логотипа Firefox </h3>
+
+<pre class="brush: html">&lt;input type="image" name="image" src="https://mdn.mozillademos.org/files/2917/fxlogo.png" width="50"&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{ EmbedLiveSample('simple_input_image_example') }}</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2 или ранее</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>type=image</td>
+   <td>1.0</td>
+   <td>Gecko 2.0 only sends x and y coordinates when clicked, not longer the name/value of the element</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>type</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td style="white-space: nowrap;">type=image</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<dl>
+ <dt>
+ <h2 id="Смотри_также">Смотри также</h2>
+ </dt>
+</dl>
diff --git a/files/ru/web/html/element/input/index.html b/files/ru/web/html/element/input/index.html
new file mode 100644
index 0000000000..7899ede12e
--- /dev/null
+++ b/files/ru/web/html/element/input/index.html
@@ -0,0 +1,311 @@
+---
+title: <input>
+slug: Web/HTML/Element/Input
+translation_of: Web/HTML/Element/input
+---
+<h2 id="Описание">Описание</h2>
+
+<p><strong>Элемент</strong> <strong>HTML <code>&lt;input&gt;</code></strong> используется для создания интерактивных элементов управления в веб-формах для получения данных от пользователя; в зависимости от устройства и {{Glossary("user agent")}}, доступен широкий выбор типов входных данных и виджетов управления. Из-за огромного количества возможных сочетаний типов ввода и атрибутов это один из самых мощных и сложных элементов HTML.</p>
+
+<ul class="htmlelt">
+ <li><dfn><a href="/en-US/docs/HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listed, submittable, resettable, form-associated element, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.<br>
+  If the {{htmlattrxref("type", "input")}} has not the <code>hidden</code> value, labellable element, palpable content.</li>
+ <li><dfn>Permitted content</dfn> None, it is an {{Glossary("empty element")}}.</li>
+ <li><dfn>Tag omission</dfn> Must have a start tag and must not have an end tag.</li>
+ <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
+ <li><dfn>DOM interface</dfn> {{domxref("HTMLInputElement")}}</li>
+</ul>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент содержит <a href="/en-US/docs/HTML/Global_attributes">глобальные атрибуты</a>.</p>
+
+<ul>
+ <li>Расширение файла, начинающееся с символа точки (U+002E). Наприм., '.jpg, .png, .doc)</li>
+ <li>Валидный тип MIME без расширения</li>
+ <li><code>audio/*</code> для аудиофайлов {{HTMLVersionInline("5")}}</li>
+ <li><code>video/*</code> для видеофайлов {{HTMLVersionInline("5")}}</li>
+ <li><code>image/*</code> для файлов с изображениями {{HTMLVersionInline("5")}}</li>
+</ul>
+
+<dl>
+ <dt>{{htmlattrdef("type")}}</dt>
+ <dd>Тип элемента для отображения. Если этот атрибут не указан, по умолчанию используется <code>text</code>. Возможными значениями являются:
+ <ul>
+  <li><code>button</code>: Кнопка без предопределенного поведения.</li>
+  <li><code>checkbox</code>: Флажок («чекбокс»). Следует использовать атрибут <strong>value </strong>для определения значения, которое будет отдано этим элементом. Используйте атрибут <strong>checked</strong>, чтобы указать, должен ли флажок быть выставлен. Можно также использовать атрибут <strong>indeterminate</strong>, чтобы указать, что флажок находится в неопределённом состоянии (на большинстве платформ при этом рисуется горизонтальная линия поперёк флажка).</li>
+  <li><code>color</code>: {{HTMLVersionInline("5")}} Элемент управления цветом. Пользовательский интерфейс выбора цвета не имеет никаких других функций, кроме принятия простых цветов в виде текста (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">больше информации</a>).</li>
+  <li><code>date</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты (год, месяц и день, без времени).</li>
+  <li><code>datetime</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени (час, минута, секунда и доля секунды) в соответствии с часовым поясом UTC.</li>
+  <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты и времени без часового пояса.</li>
+  <li><code>email</code>: {{HTMLVersionInline("5")}} Поле для редактирования адреса электронной почты. Перед отправкой проверяется, что входное значение содержит либо пустую строку, либо один действительный адрес электронной почты. Соответствуют CSS псевдо-классам {{cssxref(":valid")}} and {{cssxref(":invalid")}}.</li>
+  <li><code>file</code>: Элемент управления, который позволяет пользователю выбрать файл. Используйте атрибут <strong>accept</strong>, чтобы определить типы файлов, которые могут быть выбраны.</li>
+  <li><code>hidden</code>: Элемент управления, которые не отображается, но чье значение отправлено на сервер.</li>
+  <li><code>image</code>: Кнопка вставки изображения. Вы должны использовать атрибут <strong>src</strong>, чтобы определить путь к изображению и атрибут <strong>alt</strong> - для определения альтернативного текста. Вы можете использовать атрибуты <strong>height</strong> и <strong>width</strong>, чтобы определить размер вставки изображения в пикселях.</li>
+  <li><code>month</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода месяца и года без часового пояса.</li>
+  <li><code>number</code>: {{HTMLVersionInline("5")}} Элемент управления ввода числа(тип <strong>float</strong>).</li>
+  <li><code>password</code>: Однострочное текстовое поле, чье значение скрыто символом "звездочка". Используйте атрибуты <strong>minlength</strong> и <strong>maxlength</strong>, чтобы указать минимальную и максимальную длину значения, которое может быть введено.
+   <div class="blockIndicator note">Любые формы, в которых присутствует важная информация(например, пароль), должны быть обработаны через HTTPS; в настоящий момент Firefox реализует составной механизм предупреждения, направленные против небезопасных форм для входа в систему - смотрите <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>.</div>
+  </li>
+  <li><code>radio</code>: Кнопка-переключатель, позволяет выбрать одно значение из множественного выбора.</li>
+  <li><code>range</code>: {{HTMLVersionInline("5")}}Элемент управления для ввода числа, точное значение которого не имеет значения. Этот тип управления использует следующие значения по умолчанию, если соответствующие атрибуты не указаны:
+   <ul>
+    <li><code>min</code>: 0</li>
+    <li><code>max</code>: 100</li>
+    <li><code>value</code>: <code>min</code> + (<code>max</code>-<code>min</code>)/2, or <code>min</code> if <code>max</code> is less than <code>min</code></li>
+    <li><code>step</code>: 1</li>
+   </ul>
+  </li>
+  <li><code>reset</code>: Кнопка сброса содержимого формы в состояние по умолчанию.</li>
+  <li><code>search</code>: {{HTMLVersionInline("5")}}Однострочное текстовое поле для ввода строк поиска; разрывы строк автоматически удаляются из входного значения.</li>
+  <li><code>submit</code>: Кнопка для отправления формы.</li>
+  <li><code>tel</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода номера телефона; разрывы строк автоматически удаляются из входного значения, но никакой другой синтаксис не применяется. Можно использовать такие атрибуты как <strong>pattern</strong> и <strong>maxlength</strong>, чтобы ограничить вводимое значение.<br>
+   Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости..</li>
+  <li><code>text</code>: Однострочное текстовое поле. Переносы строк автоматически удаляются из входного значения.</li>
+  <li><code>time</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода значения времени без часового пояса.</li>
+  <li><code>url</code>: {{HTMLVersionInline("5")}} Поле для редактирования URI. Введенное значение должно содержать либо пустую строку, либо допустимый абсолютный URL. В противном случае значение не будет принято. Переводы строк, лидирующие и завершающие пробельные символы будут автоматически удалены из введенного значения. Можно использовать такие атрибуты как <strong>pattern</strong> или <strong>maxlength</strong>, чтобы ограничить вводимые значения. Псевдоклассы CSS {{cssxref(":valid")}} and {{cssxref(":invalid")}} применяются при необходимости.</li>
+  <li><code>week</code>: {{HTMLVersionInline("5")}} Элемент управления для ввода даты, содержащей число неделя-год и номер недели без часового пояса.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("accept")}}</dt>
+ <dd>В случае, если значением атрибута <strong>type</strong> является <code>file</code>, данный атрибут определяет типы файлов, которые сервер может принять. В противном случае файл игнорируется. Значение должно быть списком уникальных спецификаторов типов содержания, разделенным запятыми:</dd>
+ <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>Одиночный символ, который пользователь может нажать, чтобы переключить фокус на элемент управления.</dd>
+ <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
+ <dd>Определяет "действие-подсказку", которая используется для определения того, как будет обозначаться клавиша enter на мобильных устройствах с виртуальной клавиатурой. Поддерживаемые значения: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, и <code>send</code>; они автоматически сопоставляются с необходимой строкой (являются чувствительными к регистру).</dd>
+ <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот атрибут указывает, разрешено ли автоматическое заполнение поля браузером. Разрешено по умолчанию, даже если не указано. Данный атрибут игнорируется, если атрибут <strong>type</strong> равен <code>hidden, password,</code> <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> кнопка (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Возможные значения:
+ <ul>
+  <li><code>off</code>: Пользователь должен каждый раз полностью вводить значение в поле или документ предусматривает свой собственный метод автозаполнения; браузер не делает автоматического заполнения записи.</li>
+  <li><code>on</code>: Браузер автоматически заканчивает значение поля, основываясь на значениях, которые вводились пользователем ранее.</li>
+ </ul>
+
+ <p>Если не атрибут <strong>autocomplete</strong> не указан в <code>&lt;input&gt;</code>, тогда браузер использует атрибут <strong>autocomplete</strong> формы, которая является родительской для данной формы. The form owner is either the <code>form</code> element that this <code>&lt;input&gt;</code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p>
+ </dd>
+ <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the <strong>autofocus</strong> attribute, which is a Boolean. It cannot be applied if the <strong>type</strong> attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</dd>
+ <dt>{{htmlattrdef("autosave")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute should be defined as a unique value. If the value of the type attribute is <code>search</code>, previous search term values will persist in the dropdown across page load.</dd>
+ <dt>{{htmlattrdef("checked")}}</dt>
+ <dd>When the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>, the presence of this Boolean attribute indicates that the control is selected by default; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>This Boolean attribute indicates that the form control is not available for interaction. In particular, the <code>click</code> event <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#enabling-and-disabling-form-controls">will not be dispatched</a> on disabled controls. Also, a disabled control's value isn't submitted with the form.</dd>
+ <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The form element that the input element is associated with (its <em>form owner</em>). The value of the attribute must be an <strong>id</strong> of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <code>&lt;input&gt;</code> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <code>&lt;input&gt;</code> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.</dd>
+ <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:
+ <ul>
+  <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li>
+  <li><code>multipart/form-data</code>: Use this value if you are using an {{HTMLElement("input")}} element with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li>
+  <li><code>text/plain</code></li>
+ </ul>
+
+ <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:
+ <ul>
+  <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li>
+  <li><code>get</code>: The data from the form are appended to the <strong>form</strong> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li>
+ </ul>
+
+ <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p>
+ </dd>
+ <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd>
+ <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings:
+ <ul>
+  <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li>
+  <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li>
+  <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+  <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as <code>_self</code>.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the height of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the browser for which keyboard to display. This attribute applies when the value of the <strong>type</strong> attribute is text, password, email, or url. Possible values are:
+ <ul>
+  <li><code>verbatim</code>: Alphanumeric, non-prose content such as usernames and passwords.</li>
+  <li><code>latin</code>: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.</li>
+  <li><code>latin-name</code>: As <em>latin</em>, but for human names.</li>
+  <li><code>latin-prose</code>: As <em>latin</em>, but with more aggressive typing aids. For human-to-human communication such as instant messaging for email.</li>
+  <li><code>full-width-latin</code>: As <em>latin-prose</em>, but for the user's secondary languages.</li>
+  <li><code>kana</code>: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li>
+  <li><code>numeric</code>: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes, e.g. credit card numbers. For actual numbers, prefer using &lt;input type="number"&gt;</li>
+  <li><code>tel</code>: Telephone input, including asterisk and pound key. Use &lt;input type="tel"&gt; if possible instead.</li>
+  <li><code>email</code>: Email input. Use &lt;input type="email"&gt; if possible instead.</li>
+  <li><code>url</code>: URL input. Use &lt;input type="url"&gt; if possible instead.</li>
+ </ul>
+ </dd>
+ <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>В атрибуте указывает <code>id</code> элемента {{HTMLElement("datalist")}}, в котором находится список предопределенных значений для заполнения. Браузер отображает только те варианты, которые соответствуют введенным символами. Этот атрибут игнорируется, когда атрибут <strong>type</strong> принимает значения <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, или <strong>type</strong> в качестве кнопки.</dd>
+ <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The maximum (numeric or date-time) value for this item, which must not be less than its minimum (<strong>min</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("maxlength")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored. It can exceed the value of the <strong>size</strong> attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior; that is, the user can enter an unlimited number of characters. The constraint is evaluated only when the value of the attribute has been changed.</dd>
+ <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (<strong>max</strong> attribute) value.</dd>
+ <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>text</code>, <code>email</code>,<code> search</code>, <code>password</code>, <code>tel</code>, or <code>url</code>, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.</dd>
+ <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Этот Boolean атрибут указывает, может ли пользователь вводить несколько значений. Этот атрибут применяется, если для атрибута type задано значение <code>email</code> или <code>file</code>; в противном случае он игнорируется. </dd>
+ <dt>{{htmlattrdef("name")}}</dt>
+ <dd>The name of the control, which is submitted with the form data.</dd>
+ <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the <strong>title</strong> attribute to describe the pattern to help the user. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.</dd>
+ <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the <strong>type</strong> attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.
+ <div class="note"><strong>Note:</strong> Do not use the <code>placeholder</code> attribute instead of a {{HTMLElement("label")}} element. Their purposes are different: the {{HTMLElement("label")}} attribute describes the role of the form element; that is, it indicates what kind of information is expected, the <code>placeholder</code> attribute is a hint about the format the content should take. There are cases in which the <code>placeholder</code> attribute is never displayed to the user, so the form must be understandable without it.</div>
+ </dd>
+ <dt>{{htmlattrdef("readonly")}}</dt>
+ <dd>This Boolean attribute indicates that the user cannot modify the value of the control.
+ <p>{{HTMLVersionInline("5")}} This attribute is ignored if the value of the <strong>type</strong> attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</p>
+ </dd>
+ <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the <strong>type</strong> attribute is <code>hidden</code>, <code>image</code>, or a button type (<code>submit</code>, <code>reset</code>, or <code>button</code>). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.</dd>
+ <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd>
+ <dt>{{htmlattrdef("size")}}</dt>
+ <dd>The initial size of the control. This value is in pixels unless the value of the <strong>type</strong> attribute is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Starting in HTML5, this attribute applies only when the <strong>type</strong> attribute is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored. In addition, the size must be greater than zero. If you don't specify a size, a default value of 20 is used.</dd>
+ <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd>
+ <dt>{{htmlattrdef("src")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.</dd>
+ <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>Works with the <strong>min</strong> and <strong>max</strong> attributes to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this attribute is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</dd>
+ <dt>{{htmlattrdef("tabindex")}} element-specific in {{HTMLVersionInline(4)}}, global in {{HTMLVersionInline("5")}}</dt>
+ <dd>The position of the element in the tabbing navigation order for the current document.</dd>
+ <dt>{{htmlattrdef("usemap")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline", "HTML5")}}</dt>
+ <dd>The name of a {{HTMLElement("map")}} element to as an image map.</dd>
+ <dt>{{htmlattrdef("value")}}</dt>
+ <dd>The initial value of the control. This attribute is optional except when the value of the <strong>type</strong> attribute is <code>radio</code> or <code>checkbox</code>.<br>
+ Note that when reloading the page, Gecko and IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">will ignore the value specified in the HTML source</a>, if the value was changed before the reload.</dd>
+ <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt>
+ <dd>If the value of the <strong>type</strong> attribute is <code>image</code>, this attribute defines the width of the image displayed for the button.</dd>
+ <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt>
+ <dd>This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.</dd>
+</dl>
+
+<h2 id="Notes">Notes</h2>
+
+<h3 id="File_inputs">File inputs</h3>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("2.0")}}, calling the <code>click()</code> method on an {{HTMLElement("input")}} element of type "file" opens the file picker and lets the user select files. See <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> for an example and more details.</p>
+</div>
+
+<p>You can't set the value of a file picker from a script; doing something like the following has no effect:</p>
+
+<pre class="brush: js">var e = getElementById("someFileInputElement");
+e.value = "foo";
+</pre>
+
+<h3 id="Error_messages">Error messages</h3>
+
+<p>If you want Firefox to present a custom error message when a field fails to validate, you can use the <code>x-moz-errormessage</code> attribute to do so:</p>
+
+<pre class="brush: html">&lt;input type="email" x-moz-errormessage="Please specify a valid email address."&gt;
+</pre>
+
+<p>Note, however, that this is not standard and will not have an effect on other browsers.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="A_simple_input_box">A simple input box</h3>
+
+<pre class="brush: html">&lt;!-- A basic input --&gt;
+&lt;input type="text" name="input" value="Type here"&gt;
+</pre>
+
+<p><input></p>
+
+<h3 id="A_common_use-case_scenario">A common use-case scenario</h3>
+
+<pre class="brush: html">&lt;!-- A common form that includes input tags --&gt;
+&lt;form action="getform.php" method="get"&gt;
+    First name: &lt;input type="text" name="first_name" /&gt;&lt;br /&gt;
+     Last name: &lt;input type="text" name="last_name" /&gt;&lt;br /&gt;
+        E-mail: &lt;input type="email" name="user_email" /&gt;&lt;br /&gt;
+&lt;input type="submit" value="Submit" /&gt;
+&lt;/form&gt;
+</pre>
+
+<h3 id="Using_mozactionhint_on_Firefox_mobile">Using mozactionhint on Firefox mobile</h3>
+
+<p>You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:</p>
+
+<pre class="brush: html">&lt;input type="text" mozactionhint="next" name="sometext" /&gt;
+</pre>
+
+<p>The result is:</p>
+
+<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p>
+
+<h2 id="Specifications" name="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{Compat("html.elements.input")}}</p>
+
+<p>[1] Распознаётся, но UI отсутствует.</p>
+
+<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p>
+
+<p>[3] В Safari <code>autocapitalize="words"</code> переводит в верхний регистр каждый второй символ слова.</p>
+
+<p>[4] <code>datetime</code> был удалён из спецификации и браузеров в пользу <code>datetime-local</code>.</p>
+
+<p>[5] См {{bug(1355389)}}</p>
+
+<p>[6] Ещё не имплементировано. Наблюдать: {{bug("888320")}} и <a href="https://wiki.mozilla.org/TPE_DOM/Date_time_input_types">TPE DOM/Date time input types</a>.</p>
+
+<h3 id="Gecko_notes">Gecko notes</h3>
+
+<p>Starting in Gecko 9.0 {{geckoRelease("9.0")}}, Firefox for Android lets users capture images using their camera and upload them, without having to leave the browser. Web developers can implement this feature by simply specifying setting the <code>accept</code> attribute's value to "image/*" on their <code>file</code> input, like this:</p>
+
+<p><code>&lt;input type="file" accept="image/*"&gt;</code></p>
+
+<p>Firefox for Android sets a default {{ cssxref("background-image") }} gradient on all <code>type="text"</code>, <code>type="file"</code>, <code>type="button"</code>, and <code>type="submit"</code> inputs. This can be disabled using <code>background-image: none</code>.</p>
+
+<p>Firefox for Android also sets a default {{ cssxref("border") }} on all <code>&lt;input type="file"&gt;</code> elements.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
+ <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li>
+</ul>
+
+<p>{{HTMLRef}}</p>
diff --git a/files/ru/web/html/element/input/number/index.html b/files/ru/web/html/element/input/number/index.html
new file mode 100644
index 0000000000..93f1fb2525
--- /dev/null
+++ b/files/ru/web/html/element/input/number/index.html
@@ -0,0 +1,420 @@
+---
+title: <input type="number">
+slug: Web/HTML/Element/Input/number
+translation_of: Web/HTML/Element/input/number
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>number</code></strong> используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения.</span> Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
+
+
+
+<p>В браузерах, которые не поддерживают тип <code>number</code>, тип <code>number</code> приводится к <code>text</code>.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{jsxref("Number")}} representing a number, or empty</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} and {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>{{jsxref("Number")}}, представляющий значение введенного числа. Вы можете установить значение по умолчанию, вставив значение в атрибут {{htmlattrxref("value", "input")}}, например:</p>
+
+<pre class="brush: html notranslate">&lt;input id="number" type="number" value="42"&gt;</pre>
+
+<p>{{EmbedLiveSample('Value', 600, 40)}}</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes commonly supported by all {{HTMLElement("input")}} types, inputs of type <code>number</code> support these attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>The maximum value to accept for this input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>The minimum value to accept for this input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An example value to display inside the field when it's empty</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute controlling whether or not the value is read-only</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>A stepping interval to use when using up and down arrows to adjust the value, as well as for validation</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>The maximum value to accept for this input. If the {{htmlattrxref("value", "input")}} entered into the element exceeds this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p>
+
+<p>This value must be greater than or equal to the value of the <code>min</code> attribute.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>The minimum value to accept for this input. If the {{htmlattrxref("value", "input")}} of the element is less than this, the element fails <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p>
+
+<p>This value must be less than or equal to the value of the <code>max</code> attribute.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<div id="step-include">
+<p>Атрибут <code>step</code> – это число, которое определяет точность, с которой задаётся значение, или специальное значение <code>any</code>, описанное ниже. Только значения, кратные шагу (<code>{{anch("min")}}</code>, если задано, иначе {{htmlattrxref("value", "input")}}, или подходящее стандартное значение, если ни одно из двух не задано) будут корректными.</p>
+
+<p>Строковое значение <code>any</code> означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как <code>{{anch("min")}}</code> и <code>{{anch("max")}}</code>).</p>
+
+<div class="note">
+<p><strong>Примечание:</strong> Когда значение, введённое пользователем, не подходит под заданное значение шага, {{Glossary("user agent")}} может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.</p>
+</div>
+</div>
+
+<p>Стандартное значение шага для поля ввода <code>number</code> – это <code>1</code>, что позволяет вводить только целые числа, <em>если</em> только не задать значение шага нецелым числом.</p>
+
+<h2 id="Using_number_inputs">Using number inputs</h2>
+
+<p><code>&lt;input type="number"&gt;</code> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper <code>type</code> value, <code>number</code>, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see {{bug(1398528)}}.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site <em>must not</em> use simple client-side validation for any security purposes. You <em>must</em> verify on the server side any transaction in which the provided value may have any security implications of any kind.</p>
+</div>
+
+<p>Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="A_simple_number_input">A simple number input</h3>
+
+<p>In its most basic form, a number input can be implemented like this:</p>
+
+<pre class="brush: html notranslate">&lt;label for="ticketNum"&gt;Number of tickets you would like to buy:&lt;/label&gt;
+&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+
+<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p>
+
+<p>A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the {{htmlattrxref("required", "input")}} attribute is used, the input is no longer considered valid when empty.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Any number is an acceptable value, as long as it is a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">valid floating point number</a> (i.e. not <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p>
+</div>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take <code>value</code>. It is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have an <code>number</code> input with the placeholder <code>"Multiple of 10"</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="Multiple of 10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p>
+
+<h3 id="Controlling_step_size">Controlling step size</h3>
+
+<p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a {{htmlattrxref("step", "input")}} attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of 10:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10"&gt;</pre>
+
+<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p>
+
+<p>In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.</p>
+
+<h3 id="Specifying_minimum_and_maximum_values">Specifying minimum and maximum values</h3>
+
+<p>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="multiple of 10" step="10" min="0" max="100"&gt;</pre>
+
+<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p>
+
+<p>In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.</p>
+
+<h3 id="Allowing_decimal_values">Allowing decimal values</h3>
+
+<p>One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p>
+
+<p>See that this example allows any value between 0.0 and 10.0, with decimals to two places. "9.52" is valid, but "9.521" is not, for example.</p>
+
+<h3 id="Controlling_input_size">Controlling input size</h3>
+
+<p>{{HTMLElement("input")}} elements of type <code>number</code> don't support form sizing attributes such as {{htmlattrxref("size", "input")}}. You'll have to resort to <a href="/en-US/docs/Web/CSS">CSS</a> to change the size of these controls.</p>
+
+<p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p>
+
+<pre class="brush: html notranslate">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+
+<p>Then we add some CSS to narrow the width of the element with the ID <code>number</code>:</p>
+
+<pre class="brush: css notranslate">#number {
+  width: 3em;
+}</pre>
+
+<p>The result looks like this:</p>
+
+<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p>
+
+<h3 id="Offering_suggested_values">Offering suggested values</h3>
+
+<p>You can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute, which contains as its value the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p>
+
+<pre class="brush: html notranslate">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
+&lt;span class="validity"&gt;&lt;/span&gt;
+
+&lt;datalist id="defaultNumbers"&gt;
+  &lt;option value="10045678"&gt;
+  &lt;option value="103421"&gt;
+  &lt;option value="11111111"&gt;
+  &lt;option value="12345678"&gt;
+  &lt;option value="12999922"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<div class="note">
+<p>Use of the {{htmlattrxref("list", "input")}} attribute with <code>number</code> inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.</p>
+</div>
+
+<h2 id="Validation">Validation</h2>
+
+<p>We have already mentioned a number of validation features of <code>number</code> inputs, but let's review them now:</p>
+
+<ul>
+ <li><code>&lt;input type="number"&gt;</code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li>
+ <li>You can use the {{htmlattrxref("required", "input")}} attribute to make an empty entry invalid, i.e. the input has to be filled in.</li>
+ <li>You can use the {{htmlattrxref("step", "input")}} attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).</li>
+ <li>You can use the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes to constrain valid values to lower and upper bounds.</li>
+</ul>
+
+<p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="balloons"&gt;Number of balloons to order (multiples of 10):&lt;/label&gt;
+    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;input type="submit"&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+
+<p>Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p>
+
+<p>The CSS applied to this example is as follows:</p>
+
+<pre class="brush: css notranslate">div {
+  margin-bottom: 10px;
+}
+
+input:invalid+span:after {
+  content: '✖';
+  padding-left: 5px;
+}
+
+input:valid+span:after {
+  content: '✓';
+  padding-left: 5px;
+}</pre>
+
+<p>Here we use the {{cssxref(":invalid")}} and {{cssxref(":valid")}} pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent {{htmlelement("span")}} element, indicating if the current value is valid. We put it on a separate <code>&lt;span&gt;</code> element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on <a href="/en-US/docs/Web/HTML/Element/input/date#Validation"><code>&lt;input type="date"&gt;</code> validation</a>).</p>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side 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 bypass your HTML 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).</p>
+</div>
+
+<h3 id="Pattern_validation">Pattern validation</h3>
+
+<p><code>&lt;input type="number"&gt;</code> elements do not support use of the {{htmlattrxref("pattern", "input")}} attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the {{htmlattrxref("min", "input")}} and {{htmlattrxref("max", "input")}} attributes, as explained above.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>We've already covered the fact that by default, the increment is 1, and you can use the {{htmlattrxref("step", "input")}} attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p>
+
+<p>{{EmbedLiveSample("Examples", 600, 100)}}</p>
+
+<p>The HTML looks like this:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+    &lt;div class="metersInputGroup"&gt;
+        &lt;label for="meters"&gt;Enter your height — meters:&lt;/label&gt;
+        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div class="feetInputGroup" style="display: none;"&gt;
+        &lt;span&gt;Enter your height — &lt;/span&gt;
+        &lt;label for="feet"&gt;feet:&lt;/label&gt;
+        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+        &lt;label for="inches"&gt;inches:&lt;/label&gt;
+        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
+        &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;input type="button" class="meters" value="Enter height in feet and inches"&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+        &lt;input type="submit" value="Submit form"&gt;
+    &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.</p>
+
+<p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code> so that meters is the default entry type.</p>
+
+<p>Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:</p>
+
+<pre class="brush: css notranslate">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;
+}</pre>
+
+<p>And finally, the JavaScript:</p>
+
+<pre class="brush: js notranslate">var metersInputGroup = document.querySelector('.metersInputGroup');
+var feetInputGroup = document.querySelector('.feetInputGroup');
+var metersInput = document.querySelector('#meters');
+var feetInput = document.querySelector('#feet');
+var inchesInput = document.querySelector('#inches');
+var switchBtn = document.querySelector('input[type="button"]');
+
+switchBtn.addEventListener('click', function() {
+  if(switchBtn.getAttribute('class') === 'meters') {
+    switchBtn.setAttribute('class', 'feet');
+    switchBtn.value = 'Enter height in meters';
+
+    metersInputGroup.style.display = 'none';
+    feetInputGroup.style.display = 'block';
+
+    feetInput.setAttribute('required', '');
+    inchesInput.setAttribute('required', '');
+    metersInput.removeAttribute('required');
+
+    metersInput.value = '';
+  } else {
+    switchBtn.setAttribute('class', 'meters');
+    switchBtn.value = 'Enter height in feet and inches';
+
+    metersInputGroup.style.display = 'block';
+    feetInputGroup.style.display = 'none';
+
+    feetInput.removeAttribute('required');
+    inchesInput.removeAttribute('required');
+    metersInput.setAttribute('required', '');
+
+    feetInput.value = '';
+    inchesInput.value = '';
+  }
+});</pre>
+
+<p>After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.</p>
+
+<div class="note">
+<p>Note that when the user clicks the button, we remove the <code>required</code> attribute(s) from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-number")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li>
+ <li>{{HTMLElement("input")}}</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
+</ul>
diff --git a/files/ru/web/html/element/input/password/index.html b/files/ru/web/html/element/input/password/index.html
new file mode 100644
index 0000000000..eb87000912
--- /dev/null
+++ b/files/ru/web/html/element/input/password/index.html
@@ -0,0 +1,614 @@
+---
+title: <input type="password">
+slug: Web/HTML/Element/Input/password
+tags:
+  - Element
+  - HTML
+  - Веб
+  - Пароль
+  - Формы
+translation_of: Web/HTML/Element/input/password
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы типа <strong><code>"password"</code></strong> предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка ("*") или точка ("•"). Этот символ будет меняться в зависимости от {{Glossary("user agent")}} и {{Glossary("OS")}}.</span></p>
+
+<p>Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и легкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.</p>
+
+<div class="note">
+<p>Любые формы, содержащие конфиденциальную информацию, такую ​​как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему - см. <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Insecure_passwords">Небезопасные пароли</a>. Другие браузеры также реализуют аналогичные механизмы.</p>
+</div>
+
+<div id="Basic_example">
+<pre class="brush: html">&lt;input id="userPassword" type="password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}} представляет пароль или пустую строку</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Общие поддерживаемые атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, and {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, и {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Значения">Значения</h2>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}} , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку (<code>""</code>). Если указано свойство {{htmlattrxref("required")}}, то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.</p>
+
+<p>Если указан атрибут {{htmlattrxref("pattern", "input")}}, содержимое элемента управления <code>"password"</code> считается действительным только в том случае, если значение проходит проверку; см. {{anch("Validation")}} для получения дополнительной информации.</p>
+
+<div class="note">
+<p>Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля <code>"password"</code>. При вставке пароля, возвращаемые символы удаляются из значения.</p>
+</div>
+
+<h2 id="Использование_полей_ввода_пароля">Использование полей ввода пароля</h2>
+
+<p>Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введенный контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.</p>
+
+<h3 id="Простое_поле_ввода_пароля">Простое поле ввода пароля</h3>
+
+<p>Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента {{HTMLElement("label")}}.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password"&gt;</pre>
+
+<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p>
+
+<h3 id="Поддержка_автозаполнения">Поддержка автозаполнения</h3>
+
+<p>Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут {{htmlattrxref("autocomplete", "input")}}. Для паролей должно быть одно из следующих значений:</p>
+
+<dl>
+ <dt><code>"on"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование <code>"current-password"</code> или <code>"new-password"</code>.</dd>
+ <dt><code>"off"</code></dt>
+ <dd>Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля.</dd>
+ <dt><code>"current-password"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем <code>"on"</code>, так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый.</dd>
+ <dt><code>"new-password"</code></dt>
+ <dd>Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».</dd>
+</dl>
+
+<div id="Autocomplete_sample1">
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password" autocomplete="current-password"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p>
+
+<h3 id="Обязательное_заполнение_пароля">Обязательное заполнение пароля</h3>
+
+<p>Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут {{htmlattrxref("required", "input")}}.</p>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль:&lt;/label&gt;
+&lt;input id="userPassword" type="password" required&gt;</pre>
+
+<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p>
+
+<h3 id="Указание_режима_ввода">Указание режима ввода</h3>
+
+<p>Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут {{htmlattrxref("inputmode", "input")}} для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;ПИН:&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p>
+
+<h3 id="Настройка_длины_пароля">Настройка длины пароля</h3>
+
+<p>Как обычно, вы можете использовать атрибуты {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}}, чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут {{htmlattrxref("size", "input")}} используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.</p>
+
+<pre class="brush: html">&lt;label for="pin"&gt;ПИН:&lt;/label&gt;
+&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
+       maxlength="8" size="8"&gt;</pre>
+
+<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p>
+
+<h3 id="Выделение_текста">Выделение текста</h3>
+
+<p>Как и другие элементы управления текстовой записью, вы можете использовать метод {{domxref("HTMLInputElement.select", "select()")}} для выбора всего текста в поле пароля.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;label for="userPassword"&gt;Пароль&lt;/label&gt;
+&lt;input id="userPassword" type="password" size="12"&gt;
+&lt;button id="selectAll"&gt;Выделить все&lt;/button&gt;
+</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) {
+  document.getElementById("userPassword").select();
+}</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p>
+
+<p>Вы также можете использовать {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} и {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}}, чтобы получить (или установить), какой диапазон символов в элементе управления, и {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}}, чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.</p>
+
+<h2 id="Валидация">Валидация</h2>
+
+<p>Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут {{htmlattrxref("pattern", "input")}}, чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.</p>
+
+<p>В этом примере допустимы только значения, состоящие как минимум из четырех и не более восьми шестнадцатеричных цифр.</p>
+
+<div id="Validation_sample1">
+<pre class="brush: html">&lt;label for="hexId"&gt;Hex ID:&lt;/label&gt;
+&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
+       title="Enter an ID consisting of 4-8 hexadecimal digits"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p>
+
+<dl>
+ <dt>{{htmlattrdef("disabled")}}</dt>
+ <dd>
+ <p>Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.</p>
+ </dd>
+</dl>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Запрос_номера_социального_страхования">Запрос номера социального страхования</h3>
+
+<p>В этом примере принимается только ввод, который соответствует формату <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">действительного номера социального страхования Соединенных Штатов</a>. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.</p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;label for="ssn"&gt;SSN:&lt;/label&gt;
+&lt;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"&gt;
+&lt;br&gt;
+&lt;label for="ssn"&gt;Value:&lt;/label&gt;
+&lt;span id="current"&gt;&lt;/span&gt;</pre>
+
+<p>Здесь используется {{htmlattrxref("pattern", "input")}} , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире ("-") или ничем.</p>
+
+<p>В {{htmlattrxref("inputmode", "input")}} установлено значение <code>"number"</code>, чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов {{htmlattrxref("minlength", "input")}} и {{htmlattrxref("maxlength", "input")}} установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут {{htmlattrxref("required", "input")}} используется для указания того, что этот элемент управления должен иметь значение. Наконец, {{htmlattrxref("autocomplete", "input")}} установлен <code>"off"</code>, чтобы избежать попыток установить пароли менеджеров паролей.</p>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js">var ssn = document.getElementById("ssn");
+var current = document.getElementById("current");
+
+ssn.oninput = function(event) {
+  current.innerHTML = ssn.value;
+}</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p>
+
+<h2 id="Спецификация">Спецификация</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Начальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>1.0</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>17.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>5</td>
+   <td>9.6</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}<sup>[4]</sup></td>
+   <td>6</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>9.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>10.62</td>
+   <td>5.2</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>40.0</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>5.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>10.0</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>11.00</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>readonly</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>6<sup>[2] </sup></td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>5.0<br>
+    10<sup>[3]</sup></td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>10</td>
+   <td>9.6</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoDesktop("1.7")}}</td>
+   <td>2</td>
+   <td>1.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Crossed out lock in address bar to indicate insecure login page</td>
+   <td>Implementing something similar</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("52")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome mobile</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>accesskey</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autocomplete</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>autofocus</td>
+   <td>3.2</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>disabled</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>form</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formaction</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formenctype</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formmethod</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>formnovalidate</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>formtarget</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>10.62</td>
+   <td>5.0</td>
+  </tr>
+  <tr>
+   <td>inputmode</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>maxlength</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>minlength</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>27.0</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>name</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>pattern</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>placeholder</td>
+   <td>2.3</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>11.10</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>required</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>size</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Crossed out lock in address bar to indicate insecure login page</td>
+   <td>Implementing something similar</td>
+   <td>{{CompatGeckoMobile("51")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Message displayed next to password field to indicate insecure login page, plus autofill disabled</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile("52")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
+
+<p>[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.</p>
+
+<p>[2] Отсутствует для <code>type="checkbox"</code> и <code>type="radio"</code>.</p>
+
+<p>[3] Поддерживается для элемента {{HTMLElement("select")}}.</p>
+
+<p>[4] Firefox, в отличие от других браузеров, по умолчанию <a href="http://stackoverflow.com/q/5985839/432681">pсохраняет состояние динамического отключения и (если применимо) динамическую проверку</a> из <code>&lt;input&gt;</code> для загрузки страницы. Установка значения атрибута {{htmlattrxref("autocomplete","input")}} в <code>off</code> отключает эту функцию; это работает, даже если атрибут {{htmlattrxref("autocomplete","input")}} обычно не применяется к <code>&lt;input&gt;</code> в силу его {{htmlattrxref("type","input")}}. Смотри {{bug(654072)}}.</p>
diff --git a/files/ru/web/html/element/input/radio/index.html b/files/ru/web/html/element/input/radio/index.html
new file mode 100644
index 0000000000..dd2c1e384e
--- /dev/null
+++ b/files/ru/web/html/element/input/radio/index.html
@@ -0,0 +1,377 @@
+---
+title: <input type="radio">
+slug: Web/HTML/Element/Input/radio
+tags:
+  - HTML
+  - Input
+  - Reference
+  - form
+  - radio button
+  - Варианты
+  - Группа радиокнопок
+  - Радиокнопка
+  - Справка
+  - Ссылки
+translation_of: Web/HTML/Element/input/radio
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">Атрибут<strong> type</strong> тега <code>&lt;input&gt;</code> со значением <strong><code>radio</code></strong> обычно используется для создания группы радиокнопок (переключателей), описывающих набор взаимосвязанных параметров.</span> Одновременно пользователь может выбрать лишь одну радиокнопку из предложенных. Радиокнопки обычно отображаются как небольшие кружки, которые заполняются или подсвечиваются при наведении.</p>
+
+<div id="Basic_example">
+<pre class="brush: html notranslate">&lt;input type="radio" id="radioButton"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Basic_example', 600, 30) }}</p>
+
+<p>Исходный код к данному интерактивному примеру находиться на GitHub репозитории. Если вы желаете внести свой вклад в проект интерактивных примеров, то склонируйте удаленный репозиторий <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>и отправьте нам запрос на включение сделанных вами изменений «pull request».</p>
+
+<p>Радиокнопки называются так потому, что выглядят и функционируют в схожей манере с кнопками старомодных радиоприёмников, подобных представленному ниже. </p>
+
+<p><img alt="Shows what radio buttons looked like in the olden days." src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="Photo of an old-time radio"></p>
+</div>
+
+<div class="note">
+<p><strong>Примечание</strong>: <a href="/en-US/docs/Web/HTML/Element/input/checkbox">Чекбоксы</a> похожи на радиокнопки, но с одним важным отличием: радиокнопки предназначены для выбора одного значения из предложенных, в то время как чекбоксы позволяют "включать" и "выключать"  значения. Если существует несколько элементов управления, то с помощью радиокнопок пользователь сможет выбрать лишь один из них, а чекбоксы позволят выбрать несколько значений одновременно.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("Строка DOM")}} отображающая значение радиокнопки</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Универсальные атрибуты</strong></td>
+   <td>{{htmlattrxref("checked", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Атрибуты IDL</strong></td>
+   <td><code>checked</code> и <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибут_value">Атрибут value </h2>
+
+<p>Атрибут <code>value</code> - это {{domxref("строка DOM")}}, содержащая значение радиокнопки. Это значение никогда не показывается пользователю его веб-браузером. Атрибут value используется для того, чтобы точно определить какая из радиокнопок была выбрана пользователем.</p>
+
+<h3 id="Создание_группы_радиокнопок">Создание группы радиокнопок</h3>
+
+<p>Группа радиокнопок определяется путём присвоения каждой радиокнопке в данной группе одного и того же значения атрибута ({{htmlattrxref("name", "input")}}). Выбор любой радиокнопки в этой группе автоматически отменяет выбор другой радиокнопки в той же группе. </p>
+
+<p>Вы можете создать любое количество групп радиокнопок, если каждой из этих групп будет присвоено своё уникальное значение атрибута <code>name</code>.</p>
+
+<p>Например, если в Вашей форме необходимо запросить  предпочитаемый способ контакта с пользователем, то Вы можете создать три радиокнопки с <strong>name= <code>"contact"</code> , </strong>но с разными<strong> value = </strong><code>"email"</code>, <strong>value =</strong><code>"phone"</code> и <strong>value =</strong>  <code>"mail"</code> соответственно. Пользователь не видит атрибуты <code>name</code>  и <code>value</code> (если только Вы не добавляете код для их отображения).</p>
+
+<p>HTML будет выглядеть следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>Здесь Вы видите три радиокнопки, каждая из которых имеет атрибут <code>name</code>  со значением <code>"contact"</code> и уникальный атрибут <code>value</code>, который однозначно идентифицирует эту радиокнопку в данной группе. Каждой радиокнопке присвоен уникальный {{domxref("Element.id", "id")}},  связанный с тегом {{HTMLElement("label")}} через атрибут {{htmlattrxref("for", "label")}}  для установления связи между конкретной меткой и конкретной радиокнопкой. </p>
+
+<p>Вы можете опробовать этот код здесь: </p>
+
+<p>{{ EmbedLiveSample('Defining_a_radio_group', 600, 130) }}</p>
+
+<h3 id="Представление_данных_группы_радиокнопок">Представление данных группы радиокнопок</h3>
+
+<p>Когда представленная выше форма отправляется на сервер с информацией о выбранной радиокнопке,  то её данные  включают запись в виде <strong>"contact=name".</strong> Например, если пользователь кликает на радиокнопку "Phone", а затем отправляет форму на сервер, данные формы будут включать в себя строку <code>"contact=phone"</code>.</p>
+
+<p>Если Вы пренебрежёте атрибутом <code>value</code> в  Вашем HTML, то отправленные данные просто присвоят данной группе значение <code>"on"</code>.  То есть, если пользователь кликнет на радиокнопку "Phone" и отправит форму, итоговые данные отобразятся как  <code>"contact=on"</code> и будут абсолютно бесполезны. Поэтому никогда не забывайте указывать атрибут <code>value</code>!</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если в отправленной форме не была выбрана ни одна радиокнопка, то группа радиокнопок вообще не будет включать в себя никакие данные, так как отсутствуют значения для отправки.</p>
+</div>
+
+<p>Поскольку отправлять пустую форму в большинстве случаев не имеет никакого смысла, то разумно оставлять одну радиокнопку активированной по умолчанию с помощью атрибута <code>"checked"</code>. Смотрите здесь {{anch("Selecting a radio button by default")}}.</p>
+
+<p>Давайте добавим немного кода в наш пример для того, чтобы изучить данные, полученные из этой формы. HTML изменяется путём добавления блока {{HTMLElement("pre")}} для вывода данных формы. </p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+           name="contact" value="email"&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice2"
+           name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+    &lt;input type="radio" id="contactChoice3"
+           name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;
+&lt;pre id="log"&gt;
+&lt;/pre&gt;
+</pre>
+
+<p>Затем добавим немного <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Установим слушателя для события {{event("submit")}}, которая будет отправляться при клике пользователя на кнопку "Отправить":</p>
+
+<pre class="brush: js notranslate">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);</pre>
+
+<p>Опробуйте этот пример и убедитесь, что для группы радиокнопок  <code>"contact"</code>  будет только один результат.</p>
+
+<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p>
+
+<h2 id="Использование_радиокнопок">Использование радиокнопок</h2>
+
+<p>Мы уже осветили основные моменты работы с радиокнопками выше. Давайте рассмотрим другие распространенные  функции и методы, связанные с использованием радиокнопок, о которых Вам нужно знать.</p>
+
+<h3 id="Выбор_радиокнопки_по_умолчанию">Выбор радиокнопки по умолчанию</h3>
+
+<p>Чтобы установить радиокнопку как выбранную по умолчанию, Вам необходимо подключить атрибут <code>checked</code>, как показано ниже в немного изменённой версии предыдущего примера.</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;p&gt;Please select your preferred contact method:&lt;/p&gt;
+  &lt;div&gt;
+    &lt;input type="radio" id="contactChoice1"
+     name="contact" value="email" checked&gt;
+    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice2"
+     name="contact" value="phone"&gt;
+    &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+    &lt;input type="radio" id="contactChoice3"
+     name="contact" value="mail"&gt;
+    &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button type="submit"&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>{{ EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130) }}</p>
+
+<p>В данном случае первая радиокнопка будет выбрана по умолчанию.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Если Вы устанавливаете атрибут <code>checked</code> более чем на одну кнопку, то стоит иметь в виду, что каждый последующий атрибут <code>checked</code> отменяет предыдущий, то  есть как отмеченная будет выбрана последняя радиокнопка с атрибутом <code>checked</code>. Это происходит потому, что в каждой группе радиокнопок одновременно может быть выбрана только одна кнопка, и браузер автоматически отменяет другие выбранные до этого радиокнопки.</p>
+</div>
+
+<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons">Providing a bigger hit area for your radio buttons</h3>
+
+<p>В примерах, представленных выше, Вы могли заметить, что можно выбрать радиокнопку, кликнув как на соединённый с ней элемент  {{htmlelement("label")}}, так и на саму кнопку. Это действительно полезная функция HTML-форм, которая облегчает пользователям выбор нужной опции, особенно на устройствах с небольшим экраном, таких как смартфоны.  Помимо специальных возможностей, это другая веская причина для правильного использования элементов  <code>&lt;label&gt;</code>  в Ваших формах.</p>
+
+<h2 id="Валидация_формы">Валидация формы</h2>
+
+<p>Радиокнопки не участвуют в проверке ограничений, так как у них нет реальных значений для ограничения.</p>
+
+<h2 id="Установка_стилей_радиокнопок">Установка стилей радиокнопок</h2>
+
+<p>Следующий пример отображает немного более проработанную версию примера, который мы использовали на протяжении всей статьи,  с некоторыми дополнительными стилями и с лучшей семантикой, установленной с помощью специализированных элементов.</p>
+
+<p>HTML будет выглядеть следующим образом:</p>
+
+<pre class="brush: html notranslate">&lt;form&gt;
+  &lt;fieldset&gt;
+    &lt;legend&gt;Please select your preferred contact method:&lt;/legend&gt;
+    &lt;div&gt;
+      &lt;input type="radio" id="contactChoice1"
+       name="contact" value="email" checked&gt;
+      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice2"
+       name="contact" value="phone"&gt;
+      &lt;label for="contactChoice2"&gt;Phone&lt;/label&gt;
+
+      &lt;input type="radio" id="contactChoice3"
+       name="contact" value="mail"&gt;
+      &lt;label for="contactChoice3"&gt;Mail&lt;/label&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="submit"&gt;Submit&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/fieldset&gt;
+&lt;/form&gt;</pre>
+
+<p>Здесь не так много нового, кроме дополнения в виде элементов {{htmlelement("fieldset")}} и {{htmlelement("legend")}}, которые позволяют сгруппировать элементы форм между собой функционально и семантически.</p>
+
+<p>CSS будет выглядеть так:</p>
+
+<pre class="brush: css notranslate">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;
+}</pre>
+
+<p>Самым примечательным здесь является использование свойства {{cssxref("appearance")}} с использованием префиксов некоторых браузеров. По умолчанию радиокнопки (и чекбоксы) уже имеют собственные стили в каждой операционной системе. Придав свойству <code>appearance</code> значение <code>none</code>, Вы можете отменить все "родные" настройки стилей операционной системы и создать свои собственные. Здесь мы использовали свойства {{cssxref("border")}} и  {{cssxref("border-radius")}}, а также свойство {{cssxref("transition")}} для создания хорошо анимированного выбора радиокнопок. Заметьте также, что псевдокласс {{cssxref(":checked")}} используется для указания стилей внешнего вида кнопок при их выборе.</p>
+
+<p>Стоит иметь в виду, что свойство  <code>appearance</code> неплохо работает для создания простых стилей, но имеет тенденцию вести себя несколько непоследовательно в некоторых браузерах и полностью не работает в Internet Explorer. Тщательно проверяйте как работает Ваш сайт в каждом браузере! </p>
+
+<p>{{ EmbedLiveSample('Styling_radio_inputs', 600, 120) }}</p>
+
+<p>Обратите внимание, что при клике на радиокнопку, на предыдущей выбранной кнопке появляется мягкий эффект угасания. Кроме того, стиль и окраска легенды и кнопки "Submit" имеет сильный контраст с остальным текстом. Возможно, это не совсем тот эффект, который Вы хотели бы видеть в своём реальном веб-приложении, но этот пример хорошо отображает возможности CSS.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th></th>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("2.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface that implements it.</li>
+ <li>{{interface("RadioNodeList")}}: the interface that describes a list of radio buttons</li>
+</ul>
diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html
new file mode 100644
index 0000000000..b46af66650
--- /dev/null
+++ b/files/ru/web/html/element/input/range/index.html
@@ -0,0 +1,480 @@
+---
+title: <input type="range">
+slug: Web/HTML/Element/Input/range
+tags:
+  - контроллер
+  - слайдер
+translation_of: Web/HTML/Element/input/range
+---
+<div>{{HTMLRef("Input_types")}}</div>
+
+<p><span class="seoSummary">Элементы {{HTMLElement("input")}} с типом <strong><code>range</code></strong> позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как {{HTMLElement('input/number', 'number')}}.</span> Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div>
+
+<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправте нам пул реквест.</p>
+
+<p>Если используемый браузер не поддерживает тип <code>range</code>, он будет отображаться как input<code>{{HTMLElement('input/text', 'text')}}.</code></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>{{domxref("DOMString")}}, содержащий строковое представление выбранного числового значения; используйте {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} чтобы получить значение {{jsxref("Number")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>События</strong></td>
+   <td>{{event("change")}} и {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Поддерживаемые общие атрибуты</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, and {{htmlattrxref("step", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL атрибуты</strong></td>
+   <td><code>list</code>, <code>value</code>, и <code>valueAsNumber</code></td>
+  </tr>
+  <tr>
+   <td><strong>Методы</strong></td>
+   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} и {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Валидация">Валидация</h3>
+
+<p>Для этого поля нет доступного патерна валидации, но следующая валидация реализованны следующие проверки</p>
+
+<ul>
+ <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li>
+ <li>Значение не может быть меньше чем {{htmlattrxref("min", "input")}}. По умолчанию: 0.</li>
+ <li> Значение не может быть больше чем {{htmlattrxref("max", "input")}}. По умолчанию: 100.</li>
+ <li>Значение должно кратно {{htmlattrxref("step", "input")}}. По умолчанию: 1.</li>
+</ul>
+
+<h3 id="sect1"></h3>
+
+<p>Атрибут {{htmlattrxref("value", "input")}} содержит {{domxref("DOMString")}}, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (<code>""</code>). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута <code>min</code>. Алгоритм определения значения по умолчанию:</p>
+
+<pre class="brush: js notranslate">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+
+<p>Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведет к установлению значения равного атрибуту max.</p>
+
+<h2 id="Дополнительные_атрибуты">Дополнительные атрибуты</h2>
+
+<p>В дополнение к атрибутам, общим для всех элементов {{HTMLElement("input")}}, range инпуты предлагают следующие атрибуты:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>id элемента &lt;datalist&gt;, который сожержит предопределенные значение (не обязательно)</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("max")}}</code></td>
+   <td>Максимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("min")}}</code></td>
+   <td>Минимальное допустимое значение</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("step")}}</code></td>
+   <td>Шаговый, используемый для пользовательского интерфейса и для проверки</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<p>Смотрите <a href="https://wiki.developer.mozilla.org/ru/docs/Web/HTML/Element/Input/range$edit#A_range_control_with_hash_marks">управление диапазоном с помощью решетки</a> ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.</p>
+
+<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+
+<p>Это значение должно быть больше или равно значению атрибута  <code>min</code>.</p>
+
+<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+
+<p>Наименьшее значение в диапазоне допустимых значений. Если {{htmlattrxref("value", "input")}}, введенный в элемент, меньше этого значения, то элемент не проходит  <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">проверку ограничения</a>. Если значение атрибута <code>min</code> не является числом, то элемент не имеет максимального значения.</p>
+
+<p>Это значение должно быть меньше или равно значению атрибута <code>max</code>.</p>
+
+<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+
+<p>По умолчанию шаг для инпута с типом <code>range</code> равен 1, допустим ввод только целых чисел, <em>если </em> база шага не является целым; например, если вы установили <code>min</code> на -10 и <code>value</code> на 1.5, то <code>step</code>  1 позволит только такие значения как 1.5, 2.5, 3.5,... в положительном направлении и -0.5, -1.5, -2.5,... в отрицательном направлении.</p>
+
+<h3 id="Не_стандартные_атрибуты">Не стандартные атрибуты</h3>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("orient")}}</code></td>
+   <td>Устанавливает ориентацию слайдера. <strong>Firefox only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
+ <dd id="orient-include">Похоже на  -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элемены, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значет что слайдер быдет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случаее употребления.</p>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Пока тип <code>number</code> позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определенное значение. Инпут с типом <code>range</code> позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать - каково выбранное конкретное числовое значение.</p>
+
+<p>Несколько примеров основный ситуаций, в которых инпуты с range используются:</p>
+
+<ul>
+ <li>Аудио-контроллеры громкости и баланса, или контроллеры фильтра.</li>
+ <li>Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.</li>
+ <li>Контроллеры игровой настройки, такие как  сложность, дальность видимости, размер мира и т.д.</li>
+ <li>Длина пароля для сгенерированных паролей менеджера паролей.</li>
+</ul>
+
+<p>Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает "установить громкости наполовину максимума" вместо "установить громкость на 0.5".</p>
+
+<h3 id="Указание_минимума_и_максимума">Указание минимума и максимума</h3>
+
+<p>По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с легкостью указать другие границы, изменив значения атрибутов {{htmlattrxref("min", "input")}} и/или {{htmlattrxref("max", "input")}}. Они могут быть принимать любые значения с плавающей точкой.</p>
+
+<p>Например, указать диапазон значений между -10 и 10, вы можете, используя:</p>
+
+<pre class="brush: html notranslate">&lt;input type="range" min="-10" max="10"&gt;</pre>
+
+<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>
+
+<h3 id="Настройка_детализации_значения">Настройка детализации значения</h3>
+
+<p>По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут {{htmlattrxref("step")}} контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение <code>step</code> на 0.01:</p>
+
+<div id="Granularity_sample1">
+<pre class="brush: html notranslate">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
+</div>
+
+<p>Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение <code>any</code> для атрибута {{htmlattrxref("step", "input")}}:</p>
+
+<div id="Granularity_sample2">
+<pre class="brush: html notranslate">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+
+<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>
+
+<p>Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.</p>
+</div>
+
+<h3 id="Добавление_хэш-меток_и_лейблов">Добавление хэш-меток и лейблов</h3>
+
+<p>Спецификация HTML дает браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут {{htmlattrxref("list", "input")}} и элемент {{HTMLElement("datalist")}}, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.</p>
+
+<h4 id="Макеты_контроллера_диапазона">Макеты контроллера диапазона</h4>
+
+<p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p>
+
+<h5 id="Недекорированный_контроллер_даипазона">Недекорированный контроллер даипазона</h5>
+
+<p>Этот результат вы получите, если не укажите атрибут {{htmlattrxref("list", "input")}}, или браузер не будет его поддерживать.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range"&gt;</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками">Контроллер диапазона с хэш-метками</h5>
+
+<p>Контроллер диапазона, использующий атрибут <code>list</code>, указывающий ID {{HTMLElement("datalist")}}, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента {{HTMLElement("option")}} с его набором {{htmlattrxref("value", "option")}} значений диапазона, при котором должна быть нарисована метка.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h5 id="Контроллер_диапазона_с_хэш-метками_и_лейблами">Контроллер диапазона с хэш-метками и лейблами</h5>
+
+<p>Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут {{htmlattrxref("label", "option")}} элементам {{HTMLElement("option")}}, соответствующим значениям, на которых вы бы хотели видеть лейблы.</p>
+
+<table class="fullwidth standard-table">
+ <tbody>
+  <tr>
+   <th>HTML</th>
+   <th>Screenshot</th>
+  </tr>
+  <tr>
+   <td>
+    <pre class="brush: html notranslate">
+&lt;input type="range" list="tickmarks"&gt;
+
+&lt;datalist id="tickmarks"&gt;
+  &lt;option value="0" label="0%"&gt;
+  &lt;option value="10"&gt;
+  &lt;option value="20"&gt;
+  &lt;option value="30"&gt;
+  &lt;option value="40"&gt;
+  &lt;option value="50" label="50%"&gt;
+  &lt;option value="60"&gt;
+  &lt;option value="70"&gt;
+  &lt;option value="80"&gt;
+  &lt;option value="90"&gt;
+  &lt;option value="100" label="100%"&gt;
+&lt;/datalist&gt;
+</pre>
+   </td>
+   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью  CSS, так как его свойство {{cssxref("display")}} по умолчанию -  <code>none</code>, тем самым скрывая лейблы.</p>
+</div>
+
+<h3 id="Изменение_ориентации">Изменение ориентации</h3>
+
+<p>По умолчанию, если браузер отображает инпут диапозона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализованно, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ниодин из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p>
+
+<p>В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки {{cssxref('appearance')}}  для <code>slider-vertical</code>, использование нестандартной ориентации <code>orient</code> в Firefox,или изменение text direction для Internet Explorer и Edge</p>
+
+<p>Рассмотрим контроллер диапазона:</p>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>
+
+<p>Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).</p>
+
+<h3 id="Standards">Standards</h3>
+
+<p>Следуюя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="notranslate">#volume {
+  height: 150px;
+  width: 50px;
+}</pre>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="notranslate">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>
+
+<p>К сожалению, большенство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p>
+
+<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3>
+
+<p>Но вы, все же, можете сделать вертикльный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворото элемента на 90 градусов. Посмотрим:</p>
+
+<div id="Orientation_sample3">
+<h4 id="HTML_2">HTML</h4>
+
+<p>В HTML нужно добавить обертку вокруг {{HTMLElement("input")}}  - {{HTMLElement("div")}}, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):</p>
+
+<pre class="brush: html notranslate">&lt;div class="slider-wrapper"&gt;
+  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<p>Теперь нам нужно немного CSS. Во-первых, это CSS для самой обертки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повернутый слайдер в зарезервированном пространстве, не создавая беспорядка.</p>
+
+<pre class="brush: css notranslate">.slider-wrapper {
+  display: inline-block;
+  width: 20px;
+  height: 150px;
+  padding: 0;
+}
+</pre>
+
+<p>Затем информация о стиле элемента <code>&lt;input&gt;</code> в зарезервированном пространстве:</p>
+
+<pre class="brush: css notranslate">.slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}</pre>
+
+<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p>
+
+<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
+
+<h3 id="appearance_property">appearance property</h3>
+
+<p>Свойство {{cssxref('appearance')}} имеет нестандартное значение <code>slider-vertical</code> , которое делает слайдер вертикальным.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_3">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range:</p>
+
+<pre class="notranslate">input[type="range"] {
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p>
+
+<h3 id="orient_attribute">orient attribute</h3>
+
+<p>В Firefox, реализованно нестандартное свойство <code>orient</code>.</p>
+
+<h4 id="HTML_4">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением <code>vertical</code>:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p>
+
+<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3>
+
+<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эфектов </p>
+
+<h4 id="HTML_5">HTML</h4>
+
+<p>Используем тот же HTML что и в предыдущем примере:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1"&gt;
+</pre>
+
+<h4 id="CSS_4">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+}</pre>
+
+<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p>
+
+<h3 id="Все_вместе">Все вместе</h3>
+
+<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем обьединить все вместе чтоб добится кроссбраузерности решения:</p>
+
+<h4 id="HTML_6">HTML</h4>
+
+<p>Оставим <code>orient</code> атрибут  со значением <code>vertical</code> для Firefox:</p>
+
+<pre class="notranslate">&lt;input type="range" min="0" max="11" value="7" step="1" orient="vertical"&gt;
+</pre>
+
+<h4 id="CSS_5">CSS</h4>
+
+<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и обавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p>
+
+<pre class="notranslate">input[type="range"] {
+  writing-mode: bt-lr;
+  -webkit-appearance: slider-vertical;
+}</pre>
+
+<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p>
+</div>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Первое определение</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-range")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} и интерфейс {{domxref("HTMLInputElement")}}, на котором он основан</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
+ <li>{{domxref('validityState.rangeOverflow')}} и{{domxref('validityState.rangeUnderflow')}}</li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
+ <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/search/index.html b/files/ru/web/html/element/input/search/index.html
new file mode 100644
index 0000000000..a4307a573b
--- /dev/null
+++ b/files/ru/web/html/element/input/search/index.html
@@ -0,0 +1,467 @@
+---
+title: <input type="search">
+slug: Web/HTML/Element/Input/search
+translation_of: Web/HTML/Element/input/search
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элементы с типом <code><strong>search</strong></code> это текстовые поля разработанные для ввода пользователем поисковых запросов. Функциональность идентична элементам с типом <code><a href="/en-US/docs/Web/HTML/Element/input/text">text</a></code>, но может отличаться стилизация за счет {{Glossary("user agent")}}, а также наличием специального <strong>не стандартизированного</strong> события </span>{{domxref("HTMLElement/search_event", "onsearch")}}.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing the value contained in the search field.</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{domxref("HTMLElement/change_event", "change")}} and {{domxref("HTMLElement/input_event", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>The {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} representing the value contained in the search field. You can retrieve this using the {{domxref("HTMLInputElement.value")}} property in JavaScript.</p>
+
+<pre class="brush: js">searchTerms = mySearch.value;
+</pre>
+
+<p>If no validation constraints are in place for the input (see {{anch("Validation")}} for more details), the value can be any text string or an empty string (<code>""</code>).</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, search field inputs support the following attributes:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("list")}}</code></td>
+   <td>The id of the &lt;datalist&gt; element that contains the optional pre-defined autocomplete options</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>The maximum number of characters the input should accept</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>The minimum number of characters long the input can be and still be considered valid</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>A regular expression the input's contents must match in order to be valid</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An exemplar value to display in the input field whenever it is empty</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute indicating whether or not the contents of the input should be read-only</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>A number indicating how many characters wide the input field should be</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("spellcheck")}}</code></td>
+   <td>Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used</td>
+  </tr>
+ </tbody>
+</table>
+
+<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+
+<p>The maximum number of characters (as UTF-16 code units) the user can enter into the search field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the search field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+
+<p>The minimum number of characters (as UTF-16 code units) the user can enter into the search field. This must be a non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the search input has no minimum length.</p>
+
+<p>The search field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>See the section {{anch("Specifying a pattern")}} for details and an example.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>
+
+<h2 id="Non-standard_attributes">Non-standard attributes</h2>
+
+<p>The following non-standard attributes are available to search input fields. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("incremental")}}</code></td>
+   <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("results")}}</code></td>
+   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>
+
+<div id="incremental-include">
+<p>The Boolean attribute <code>incremental</code> is a WebKit and Blink extension (so supported by Safari, Opera, Chrome, etc.) which, if present, tells the {{Glossary("user agent")}} to process the input as a live search. As the user edits the value of the field, the user agent sends {{event("search")}} events to the {{domxref("HTMLInputElement")}} object representing the search box. This allows your code to update the search results in real time as the user edits the search.</p>
+
+<p>If <code>incremental</code> is not specified, the {{event("search")}} event is only sent when the user explicitly initiates a search (such as by pressing the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field).</p>
+
+<p>The <code>search</code> event is rate-limited so that it is not sent more more frequently than an implementation-defined interval.</p>
+</div>
+
+<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>
+
+<div id="results-include">
+<p>The <code>results</code> attribute—supported only by Safari—is a numeric value that lets you override the maximum number of entries to be displayed in the {{HTMLElement("input")}} element's natively-provided drop-down menu of previous search queries.</p>
+
+<p>The value must be a non-negative decimal number. If not provided, or an invalid value is given, the browser's default maximum number of entries is used.</p>
+</div>
+
+<h2 id="Using_search_inputs">Using search inputs</h2>
+
+<p><code>&lt;input&gt;</code> elements of type <code>search</code> are very similar to those of type <code>text</code>, except that they are specifically intended for handling search terms. They are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).</p>
+
+<h3 id="Basic_example">Basic example</h3>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>This renders like so:</p>
+
+<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p>
+
+<p><code>q</code> is the most common <code>name</code> given to search inputs, although it's not mandatory. When submitted, the data name/value pair sent to the server will be <code>q=searchterm</code>.</p>
+
+<div class="note">
+<p>You must remember to set a {{htmlattrxref("name", "input")}} for your input, otherwise nothing will be submitted.</p>
+</div>
+
+<h3 id="Differences_between_search_and_text_types">Differences between search and text types</h3>
+
+<p>The main basic differences come in the way browsers handle them. The first thing to note is that some browsers show a cross icon that can be clicked on to remove the search term instantly if desired. The following screenshot comes from Chrome:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p>
+
+<p>In addition, modern browsers also tend to automatically store search terms previously entered across domains, which then come up as autocomplete options when subsequent searches are performed in search inputs on that domain. This helps users who tend to do searches on the same or similar search queries over time. This screenshot is from Firefox:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">At this point, let's look at some useful techniques you can apply to your search forms.</p>
+
+<h3 id="Setting_placeholders">Setting placeholders</h3>
+
+<p>You can provide a useful placeholder inside your search input that could give a hint on what to do using the {{htmlattrxref("placeholder","input")}} attribute. Look at the following example:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You can see how the placeholder is rendered below:</p>
+
+<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p>
+
+<h3 id="Search_form_labels_and_accessibility">Search form labels and accessibility</h3>
+
+<p>One problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass icon or similar), as the purpose of a search form is normally fairly obvious for sighted users due to placement (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">this example shows a typical pattern</a>).</p>
+
+<p>This could, however, cause confusion for screenreader users, since they will not have any verbal indication of what the search input is. One way around this that won't impact on your visual design is to use <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> features:</p>
+
+<ul>
+ <li>A <code>role</code> attribute of value <code>search</code> on the <code>&lt;form&gt;</code> element will cause screenreaders to announce that the form is a search form.</li>
+ <li>If that isn't enough, you can use an <code>aria-label</code> attribute on the {{HTMLElement("input")}} itself. This should be a descriptive text label that will be read out by the screenreader; it's used as a non-visual equivalent to <code>&lt;label&gt;</code>.</li>
+</ul>
+
+<p>Let's have a look at an example:</p>
+
+<pre class="brush: html">&lt;form role="search"&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+     placeholder="Search the site..."
+     aria-label="Search through site content"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>You can see how this is rendered below:</p>
+
+<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p>
+
+<p>There is no visual difference from the previous example, but screenreader users have way more information available to them.</p>
+
+<div class="note">
+<p><strong>Note</strong>: See <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> for more information about such accessibility features.</p>
+</div>
+
+<h3 id="Physical_input_element_size">Physical input element size</h3>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the search box is 30 characters wide:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." size="30"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The result is this wider input box:</p>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h2 id="Validation">Validation</h2>
+
+<p><code>&lt;input&gt;</code> elements of type <code>search</code> have the same validation features available to them as regular <code>text</code> inputs. It is less likely that you'd want to use validation features in general for search boxes. In many cases, users should just be allowed to search for anything, but there are a few cases to consider, such as searches against data of a known format.</p>
+
+<div class="note">
+<p><strong>Note</strong>: HTML form validation is <em>not</em> 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 (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p>
+</div>
+
+<h3 id="A_note_on_styling">A note on styling</h3>
+
+<p>There are useful pseudo-classes available for styling valid/invalid form elements: {{cssxref(":valid")}} and {{cssxref(":invalid")}}. In this section, we'll use the following CSS, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values.</p>
+
+<pre class="brush: css">input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+
+<p>The technique also requires a {{htmlelement("span")}} element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.</p>
+
+<h3 id="Making_input_required">Making input required</h3>
+
+<p>You can use the {{htmlattrxref("required", "input")}} attribute as an easy way of making entering a value required before form submission is allowed:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="Search the site..." required&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p>
+
+<p>In addition, if you try to submit the form with no search term entered into it, the browser will show a message. The following example is from Firefox:</p>
+
+<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Different messages will be shown when you try to submit the form with different types of invalid data contained inside the inputs; see the below examples.</p>
+
+<h3 id="Input_value_length">Input value length</h3>
+
+<p>You can specify a minimum length, in characters, for the entered value using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered value.</p>
+
+<p>The example below requires that the entered value be 4–8 characters in length.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for user&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="User IDs are 4–8 characters in length" required
+    size="30" minlength="4" maxlength="8"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p>
+
+<p>If you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). If you try to go beyond 8 characters in length, the browser won't let you.</p>
+
+<h3 id="Specifying_a_pattern">Specifying a pattern</h3>
+
+<p>You can use the {{htmlattrxref("pattern", "input")}} attribute to specify a regular expression that the inputted value must follow to be considered valid (see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Validating against a regular expression</a> for a simple crash course).</p>
+
+<p>Let's look at an example. Say we wanted to provide a product ID search form, and the IDs were all codes of two letters followed by four numbers. The following example covers it:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="mySearch"&gt;Search for product by ID:&lt;/label&gt;
+    &lt;input type="search" id="mySearch" name="q"
+    placeholder="two letters followed by four numbers" required
+    size="30" pattern="[A-z]{2}[0-9]{4}"&gt;
+    &lt;button&gt;Search&lt;/button&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">input {
+  margin-right: 10px;
+}
+
+input:invalid ~ span:after {
+    content: '✖';
+    padding-left: 5px;
+    position: absolute;
+}
+
+input:valid ~ span:after {
+    content: '✓';
+    padding-left: 5px;
+    position: absolute;
+}</pre>
+</div>
+
+<p>This renders like so:</p>
+
+<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>You can see a good example of a search form used in context at our <a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>).</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-search")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
+ <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li>
+ <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+ <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li>
+</ul>
diff --git a/files/ru/web/html/element/input/tel/index.html b/files/ru/web/html/element/input/tel/index.html
new file mode 100644
index 0000000000..e13cf8729e
--- /dev/null
+++ b/files/ru/web/html/element/input/tel/index.html
@@ -0,0 +1,523 @@
+---
+title: <input type="tel">
+slug: Web/HTML/Element/Input/tel
+translation_of: Web/HTML/Element/input/tel
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary">{{HTMLElement("input")}} элемент типа <code><strong>tel</strong></code> используется чтобы разрешить пользователю вводить и редактировать номер телефона. В отличии от<code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> , введеное значение не проверяется автоматически по определенном формату, перед тем как форма может быть отправлена , потому что форматы телефонных номеров сильно различаются по всему миру</span></p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>
+
+
+
+<p>Despite the fact that inputs of type <code>tel</code> are functionally identical to standard <code>text</code> inputs, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers. Using a specific input type for telephone numbers also makes adding custom validation and handling of phone numbers more convenient.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Browsers that don't support type <code>tel</code> fall back to being a standard {{HTMLElement("input/text", "text")}} input.</p>
+</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <td><strong>{{anch("Value")}}</strong></td>
+   <td>A {{domxref("DOMString")}} representing a telephone number, or empty</td>
+  </tr>
+  <tr>
+   <td><strong>Events</strong></td>
+   <td>{{event("change")}} and {{event("input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>Supported Common Attributes</strong></td>
+   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, and {{htmlattrxref("size", "input")}}</td>
+  </tr>
+  <tr>
+   <td><strong>IDL attributes</strong></td>
+   <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td>
+  </tr>
+  <tr>
+   <td><strong>Methods</strong></td>
+   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Value">Value</h2>
+
+<p>The {{HTMLElement("input")}} element's {{htmlattrxref("value", "input")}} attribute contains a {{domxref("DOMString")}} that either represents a telephone number or is an empty string (<code>""</code>).</p>
+
+<h2 id="Additional_attributes">Additional attributes</h2>
+
+<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("maxlength")}}</code></td>
+   <td>The maximum length, in UTF-16 characters, to accept as a valid input</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("minlength")}}</code></td>
+   <td>The minimum length that is considered valid for the field's contents</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("pattern")}}</code></td>
+   <td>A regular expression the entered value must match to pass constraint validation</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("placeholder")}}</code></td>
+   <td>An example value to display inside the field when it has no value</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("readonly")}}</code></td>
+   <td>A Boolean attribute which, if present, indicates that the field's contents should not be user-editable</td>
+  </tr>
+  <tr>
+   <td><code>{{anch("size")}}</code></td>
+   <td>The number of characters wide the input field should be onscreen</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+
+<p>The maximum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an integer value 0 or higher. If no <code>maxlength</code> is specified, or an invalid value is specified, the telephone number field has no maximum length. This value must also be greater than or equal to the value of <code>minlength</code>.</p>
+
+<p>The input will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is greater than <code>maxlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+
+<p>The minimum number of characters (as UTF-16 code units) the user can enter into the telephone number field. This must be an non-negative integer value smaller than or equal to the value specified by <code>maxlength</code>. If no <code>minlength</code> is specified, or an invalid value is specified, the telephone number input has no minimum length.</p>
+
+<p>The telephone number field will fail <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> if the length of the text entered into the field is fewer than <code>minlength</code> UTF-16 code units long.</p>
+
+<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+
+<p>See {{anch("Pattern validation")}} below for details and an example.</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+
+<h2 id="Non-standard_attributes">Non-standard attributes</h2>
+
+<p>The following non-standard attributes are available to telephone number input fields. As a general rule, you should avoid using them unless it can't be helped.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Attribute</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>{{anch("autocorrect")}}</code></td>
+   <td>Whether or not to allow autocorrect while editing this input field. <strong>Safari only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>{{anch("mozactionhint")}}</code></td>
+   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+
+<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+
+<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+
+<h2 id="Using_tel_inputs">Using tel inputs</h2>
+
+<p>Telephone numbers are a very commonly collected type of data on the web. When creating any kind of registration or e-commerce site, for example, you will likely need to ask the user for a telephone number, whether for business purposes or for emergency contact purposes. Given how commonly-entered phone numbers are, it's unfortunate that a "one size fits all" solution for validating phone numbers is not practical.</p>
+
+<p>Fortunately, you can consider the requirements of your own site and implement an appropriate level of validation yourself. See {{anch("Validation")}}, below, for details.</p>
+
+<h3 id="Custom_keyboards">Custom keyboards</h3>
+
+<p>One of the main advantages of <code>&lt;input type="tel"&gt;</code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p>
+
+<table class="standard-table">
+ <caption>Examples of custom keyboards on mobile devices.</caption>
+ <thead>
+  <tr>
+   <th scope="col">Firefox for Android</th>
+   <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td>
+   <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="A_simple_tel_input">A simple tel input</h3>
+
+<p>In its most basic form, a tel input can be implemented like this:</p>
+
+<pre class="brush: html">&lt;label for="telNo"&gt;Phone number:&lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>
+
+<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p>
+
+<p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p>
+
+<h3 id="Placeholders">Placeholders</h3>
+
+<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p>
+
+<p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       placeholder="123-4567-8901"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p>
+
+<h3 id="Controlling_the_input_size">Controlling the input size</h3>
+
+<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p>
+
+<h4 id="Physical_input_element_size">Physical input element size</h4>
+
+<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       size="20"&gt;</pre>
+
+<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p>
+
+<h4 id="Element_value_length">Element value length</h4>
+
+<p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered telephone number.</p>
+
+<p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p>
+
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14"&gt;</pre>
+
+<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: The above attributes do affect {{anch("Validation")}} — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p>
+</div>
+
+<h3 id="Providing_default_options">Providing default options</h3>
+
+<p>As always, you can provide a default value for an <code>tel</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p>
+
+<div id="Default_value">
+<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
+       value="333-4444-4444"&gt;</pre>
+</div>
+
+<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p>
+
+<h4 id="Offering_suggested_values">Offering suggested values</h4>
+
+<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p>
+
+<pre class="brush: html">&lt;label for="telNo"&gt;Phone number: &lt;/label&gt;
+&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;
+
+&lt;datalist id="defaultTels"&gt;
+  &lt;option value="111-1111-1111"&gt;
+  &lt;option value="122-2222-2222"&gt;
+  &lt;option value="333-3333-3333"&gt;
+  &lt;option value="344-4444-4444"&gt;
+&lt;/datalist&gt;</pre>
+
+<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p>
+
+<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p>
+
+<p>Here's a screenshot of what that might look like:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p>
+
+<h2 id="Validation">Validation</h2>
+
+<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p>
+
+<div class="warning">
+<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for server-side scripts that ensure the entered data is in the proper format before it is allowed into the database.  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 (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p>
+</div>
+
+<h3 id="Making_telephone_numbers_required">Making telephone numbers required</h3>
+
+<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (required): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p>
+
+<pre class="brush: css">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;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+
+<p>The output looks like this:</p>
+
+<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p>
+
+<h3 id="Pattern_validation">Pattern validation</h3>
+
+<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p>
+
+<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="telNo"&gt;Enter a telephone number (in the form xxx-xxx-xxxx): &lt;/label&gt;
+    &lt;input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"&gt;
+    &lt;span class="validity"&gt;&lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<div class="hidden">
+<pre class="brush: css">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;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p>
+
+<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code>&lt;input type="tel"&gt;</code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p>
+
+<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p>
+
+<pre class="brush: html">&lt;form&gt;
+  &lt;div&gt;
+    &lt;label for="country"&gt;Choose your country:&lt;/label&gt;
+    &lt;select id="country" name="country"&gt;
+      &lt;option&gt;UK&lt;/option&gt;
+      &lt;option selected&gt;US&lt;/option&gt;
+      &lt;option&gt;Germany&lt;/option&gt;
+    &lt;/select&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;p&gt;Enter your telephone number: &lt;/p&gt;
+    &lt;span class="areaDiv"&gt;
+      &lt;input id="areaNo" name="areaNo" type="tel" required
+             placeholder="Area code" pattern="[0-9]{3}"
+             aria-label="Area code"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number1Div"&gt;
+      &lt;input id="number1" name="number1" type="tel" required
+             placeholder="First part" pattern="[0-9]{3}"
+             aria-label="First part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+    &lt;span class="number2Div"&gt;
+      &lt;input id="number2" name="number2" type="tel" required
+             placeholder="Second part" pattern="[0-9]{4}"
+             aria-label="Second part of number"&gt;
+      &lt;span class="validity"&gt;&lt;/span&gt;
+    &lt;/span&gt;
+  &lt;/div&gt;
+  &lt;div&gt;
+    &lt;button&gt;Submit&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/form&gt;</pre>
+
+<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code>&lt;select&gt;</code> value is changed, updates the <code>&lt;input&gt;</code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p>
+
+<pre class="brush: js">var selectElem = document.querySelector("select");
+var inputElems = document.querySelectorAll("input");
+
+selectElem.onchange = function() {
+  for(var i = 0; i &lt; inputElems.length; i++) {
+    inputElems[i].value = "";
+  }
+
+  if(selectElem.value === "US") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{3}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  } else if(selectElem.value === "UK") {
+    inputElems[2].parentNode.style.display = "none";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,6}";
+
+    inputElems[1].placeholder = "Local number";
+    inputElems[1].pattern = "[0-9]{4,8}";
+    inputElems[1].setAttribute("aria-label","Local number");
+  } else if(selectElem.value === "Germany") {
+    inputElems[2].parentNode.style.display = "inline";
+
+    inputElems[0].placeholder = "Area code";
+    inputElems[0].pattern = "[0-9]{3,5}";
+
+    inputElems[1].placeholder = "First part";
+    inputElems[1].pattern = "[0-9]{2,4}";
+    inputElems[1].setAttribute("aria-label","First part of number");
+
+    inputElems[2].placeholder = "Second part";
+    inputElems[2].pattern = "[0-9]{4}";
+    inputElems[2].setAttribute("aria-label","Second part of number");
+  }
+}</pre>
+
+<p>The example looks like this:</p>
+
+<p>{{EmbedLiveSample('Examples', 600, 140)}}</p>
+
+<p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p>
+
+<p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</p>
+
+<div class="hidden">
+<pre class="brush: css">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;
+  color: #8b0000;
+}
+
+input:valid+span:after {
+  position: absolute;
+  content: '✓';
+  padding-left: 5px;
+  color: #009000;
+}</pre>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("html.elements.input.input-tel")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms">Forms and accessibility</a></li>
+ <li>{{HTMLElement("input")}}
+  <ul>
+   <li><code><a href="/en-US/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
+   <li><code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
+  </ul>
+ </li>
+</ul>