diff --git a/html/minlength-maxlength/demos/default-input-type-number/index.html b/html/minlength-maxlength/demos/default-input-type-number/index.html
new file mode 100644
index 0000000000..0d3db78465
--- /dev/null
+++ b/html/minlength-maxlength/demos/default-input-type-number/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Поле по умолчанию с типом number — Атрибуты minlength и maxlength — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    label {
+      display: inline-block;
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    input {
+      width: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #FF8630;
+      outline: none;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        display: block;
+      }
+
+      label {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+
+      input {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <label for="items">Выберите количество (максимум 999):</label>
+    <input
+      type="number"
+      min="1"
+      max="999"
+      maxlength="3"
+      id="items"
+    >
+  </div>
+</body>
+</html>
diff --git a/html/minlength-maxlength/demos/fixed-input-type-number/index.html b/html/minlength-maxlength/demos/fixed-input-type-number/index.html
new file mode 100644
index 0000000000..9ad22ed786
--- /dev/null
+++ b/html/minlength-maxlength/demos/fixed-input-type-number/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Работающее поле с типом number — Атрибуты minlength и maxlength — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    label {
+      display: inline-block;
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    input {
+      width: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #FF8630;
+      outline: none;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        display: block;
+      }
+
+      label {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+
+      input {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <label for="items">Выберите количество (максимум 999):</label>
+    <input
+      type="number"
+      id="items"
+      pattern="\d+"
+      min="1"
+      max="999"
+      onKeyPress="if(this.value.length === 3 ) return false"
+    >
+  </div>
+</body>
+</html>
diff --git a/html/minlength-maxlength/demos/input-example/index.html b/html/minlength-maxlength/demos/input-example/index.html
deleted file mode 100644
index 67e9752597..0000000000
--- a/html/minlength-maxlength/demos/input-example/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-  <title>Форма с отключённой валидацией — novalidate — Дока</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
-  <style>
-    body {
-      background-color: #18191c;
-      color: #ffffff;
-      font-family: "Roboto", sans-serif;
-      margin: 0;
-      padding: 5%;
-    }
-
-    input {
-      border: 2px solid currentcolor;
-    }
-
-    input:invalid {
-      border: 2px dashed red;
-    }
-
-    input:invalid:focus {
-      background-image: linear-gradient(pink, lightgreen);
-    }
-  </style>
-</head>
-<body>
-    <label for="password">Введите пароль (от 8 до 16 символов):</label>
-    <input
-        type="password"
-        id="password"
-        name="password"
-        required
-        minlength="8"
-        maxlength="16"
-    >
-</body>
-</html>
diff --git a/html/minlength-maxlength/demos/input-invalid-styles/index.html b/html/minlength-maxlength/demos/input-invalid-styles/index.html
new file mode 100644
index 0000000000..04c5233b11
--- /dev/null
+++ b/html/minlength-maxlength/demos/input-invalid-styles/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Поле со стилями для invalid — Атрибуты minlength и maxlength — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    label {
+      display: inline-block;
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    input {
+      width: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #FF8630;
+      outline: none;
+    }
+
+    input:invalid {
+      border-color: #2E9AFF;
+      background-color: rgb(46, 154, 255, 0.1);
+      outline: none;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        display: block;
+      }
+
+      label {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+
+      input {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <label for="password">Введите пароль (от 8 до 16 символов):</label>
+    <input
+      type="password"
+      id="password"
+      name="password"
+      minlength="8"
+      maxlength="16"
+      required
+    >
+  </div>
+</body>
+</html>
diff --git a/html/minlength-maxlength/demos/input-userinvalid-styles/index.html b/html/minlength-maxlength/demos/input-userinvalid-styles/index.html
new file mode 100644
index 0000000000..3a8bacbb5d
--- /dev/null
+++ b/html/minlength-maxlength/demos/input-userinvalid-styles/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Поле со стилями для user-invalid — Атрибуты minlength и maxlength — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    label {
+      display: inline-block;
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    input {
+      width: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #FF8630;
+      outline: none;
+    }
+
+    input:user-invalid {
+      border-color: #2E9AFF;
+      background-color: rgb(46, 154, 255, 0.1);
+      outline: none;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        display: block;
+      }
+
+      label {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+
+      input {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <label for="password">Введите пароль (от 8 до 16 символов):</label>
+    <input
+      type="password"
+      id="password"
+      name="password"
+      minlength="8"
+      maxlength="16"
+      required
+    >
+  </div>
+</body>
+</html>
diff --git a/html/minlength-maxlength/demos/input/index.html b/html/minlength-maxlength/demos/input/index.html
new file mode 100644
index 0000000000..f64b10c352
--- /dev/null
+++ b/html/minlength-maxlength/demos/input/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Поле для пароля с ограничениями по количеству символов — Атрибуты minlength и maxlength — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+    }
+
+    label {
+      display: inline-block;
+      margin-right: 55px;
+      font-size: 1.5rem;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    input {
+      width: 300px;
+      border: 1px solid #FFFFFF;
+      border-radius: 6px;
+      padding: 10px 15px;
+      background-color: transparent;
+      color: #FFFFFF;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    input:focus {
+      border-color: #FF8630;
+      outline: none;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      div {
+        display: block;
+      }
+
+      label {
+        margin-left: 0;
+        margin-bottom: 10px;
+      }
+
+      input {
+        width: 100%;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <label for="password">Введите пароль (от 8 до 16 символов):</label>
+    <input
+      type="password"
+      id="password"
+      name="password"
+      minlength="8"
+      maxlength="16"
+      required
+    >
+  </div>
+</body>
+</html>
diff --git a/html/minlength-maxlength/index.md b/html/minlength-maxlength/index.md
index 44f471acde..3d5e91f41d 100644
--- a/html/minlength-maxlength/index.md
+++ b/html/minlength-maxlength/index.md
@@ -1,52 +1,136 @@
 ---
 title: "Атрибуты `minlength` и `maxlength`"
-description: "Атрибуты `minlength` и `maxlength` устанавливают полям ввода минимальное и максимальное количество символов."
+description: "Как задать минимальное и максимальное количество символов, которое принимает поле?"
 authors:
   - zeddybig
+  - tatianafokina
+contributors:
+  - skorobaeus
 keywords:
   - валидация
+  - validation
 related:
   - html/input
   - html/textarea
   - html/required
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Атрибуты `minlength` и `maxlength` позволяют устанавливать минимальное и максимальное количество символов в полях ввода [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/).
+Атрибуты `minlength` и `maxlength` устанавливают минимальное и максимальное количество символов, которые можно ввести в поля [`<input>`](/html/input/) или [`<textarea>`](/html/textarea/).
 
-## Как пишется
+## Пример
+
+В этом примере в `<input>` можно ввести минимум 4 символа и максимум 8, а в `<textarea>` — минимум 50 и максимум 1000.
 
 ```html
 <input minlength="4" maxlength="8">
+
 <textarea minlength="50" maxlength="1000">
 ```
 
-## Пример
-
-Создадим поле для ввода пароля и ограничим количество допустимых символов:
+Теперь создадим поле с паролем и ограничим количество допустимых символов:
 
 ```html
-<label for="password">Введите пароль (от 8 до 16 символов):</label>
+<label for="password">
+  Введите пароль (от 8 до 16 символов):
+</label>
 
 <input
   type="password"
   id="password"
   name="password"
-  required
   minlength="8"
   maxlength="16"
+  required
+>
+```
+
+<iframe title="Поле для пароля с ограничениями по количеству символов" src="demos/input/" height="220"></iframe>
+
+## Как пишется
+
+Значения для `minlength` и `maxlength` — целые числа от 0 и выше. К примеру, `0`, `14` или `1000`. Если не указать значение или задать его неверно, у поля не будет ограничений по длине. Также значение `maxlength` не может быть меньше значения `minlength`. Поле всегда будет заполнено неправильно, если максимальное значение меньше минимального.
+
+Браузеры используют кодировку UTF-16 для расчёта длины поля. Это значит, что длина равна количеству символов в случае букв, чисел и знаков. Например, если задали `minlength="3"`, то поле с введёнными `abc` и `123` соответствуют минимальному ограничению по символам.
+
+`minlength` и `maxlength` часто используют вместе с другим атрибутом [`required`](/html/required/), который делает поле обязательным.
+
+### Валидация
+
+В JavaScript есть специальный интерфейс `ValidityState`, который даёт доступ к проверке полей. С помощью свойств `tooLong` и `tooShort` можно проверять длину поля с атрибутами `minlength` и `maxlength`. Оба свойства возвращают `true`, если пользователь ввёл слишком много или слишком мало символов, и `false`, когда введённые данные правильной длины. Форму лучше валидировать после нажатия на кнопку для отправки данных.
+
+### Странности с `<input type="number">`
+
+Когда задаёте ограничения по длине полю с типом `number`, атрибуты `minlength` и `maxlength` не ограничивают минимальное и максимальное количество символов, которое можно ввести с клавиатуры.
+
+Попробуйте ввести в этой демке больше, чем 3 цифры.
+
+```html
+<label for="items">
+  Выберите количество (максимум 999):
+</label>
+<input
+  type="number"
+  min="1"
+  max="999"
+  maxlength="3"
+  id="items"
+>
+```
+
+<iframe title="Поле по умолчанию с типом number" src="demos/default-input-type-number/" height="220"></iframe>
+
+Чтобы обойти странность, используйте JavaScript или регулярные выражения. К примеру, в это поле можем ввести только 3 символа благодаря обработке события `onKeyPress`. Когда попытаетесь ввести больше символов, скрипт просто не даст это сделать.
+
+```html
+<label for="items">
+  Выберите количество (максимум 999):
+</label>
+<input
+  type="number"
+  id="items"
+  pattern="\d+"
+  min="1"
+  max="999"
+  onKeyPress="if(this.value.length === 3) return false"
 >
 ```
 
+<iframe title="Работающее поле с типом number" src="demos/fixed-input-type-number/" height="220"></iframe>
+
+### Стилизация
+
+Поля с неправильными данными можно стилизовать через псевдоклассы [`:invalid`](/css/invalid-valid/) или `:user-invalid` для всех полей или [`:out-of-range`](/css/in-range-out-of-range/) для полей с `type="number"`.
+
+<aside>
+
+👩‍🎨 Добавляйте к неправильно заполненным полям не только цветную обводку и заливку, но и иконку, а также текстовое описание ошибки.
 
-<iframe title="Поле ввода пароля с ограничениями по количеству символов" src="demos/input-example" height="150"></iframe>
+</aside>
 
-## Как понять
+К полю, стилизованному через `:invalid`, стили применятся в пустом состоянии и в состоянии, когда в него ввели неправильное количество символов.
 
-Атрибуты `minlength` и `maxlength` устанавливают минимальное и максимальное количество символов в полях ввода `<input>` или `<textarea>`. Значением атрибутов должно быть целое число от 0 и выше. Если значение атрибутов не указано, или указано неправильно, ограничений по длине у поля не будет.
+```css
+input:invalid {
+  border-color: #2E9AFF;
+  background-color: rgb(46, 154, 255, 0.1);
+  outline: none;
+}
+```
+
+<iframe title="Поле со стилями для invalid" src="demos/input-invalid-styles/" height="220"></iframe>
+
+Стили из `:user-invalid` применятся к полю только тогда, когда пользователь ввёл неверное количество символов и при этом начал взаимодействовать с другими элементами на странице.
+
+```css
+input:user-invalid {
+  border-color: #2E9AFF;
+  background-color: rgb(46 154 255 / 0.1);
+  outline: none;
+}
+```
 
-При добавлении полю обоих атрибутов, значение `minlength` всегда должно быть меньше значения `maxlength`. Если за этим не уследить, то поле всегда будет невалидным.
+<iframe title="Поле со стилями для user-invalid" src="demos/input-userinvalid-styles/" height="220"></iframe>
