Skip to content

Commit

Permalink
Причёсывает демки про атрибуты novalidate и inputmode (#4990)
Browse files Browse the repository at this point in the history 
* Заменяет картинки, добавляет контрибьютеров

* Начинает причёсывать демку

* Причёсывает демку в `novalidate`

* Доделывает демку `inputmode`

* Улучшает доступность переключателя
  • Loading branch information
@TatianaFokina
TatianaFokina authored Nov 22, 2023
1 parent bffcc48 commit 8569315
Show file tree
Hide file tree
Showing 14 changed files with 391 additions and 160 deletions.
186 changes: 110 additions & 76 deletions html/inputmode/demos/basic/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,123 +6,157 @@
<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">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500&display=swap">
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html {
color-scheme: dark;
font-size: 16px;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 32px;
font-family: 'Roboto', sans-serif;
background-color: #18191c;
background-color: #18191C;
color: #FFFFFF;
font-family: "Roboto", sans-serif;
}

.demo-wrapper {
margin: 0 auto;
width: 560px;
}

form {
.form-field {
display: flex;
flex-wrap: wrap;
margin: 0 -12px;
width: 100%;
align-items: center;
justify-content: space-between;
}

.form-field {
display: inline-flex;
flex-direction: column;
width: calc(50% - 24px);
margin: 0 12px 20px;
.form-field + .form-field {
margin-top: 25px;
}

.form-field__name {
display: inline-block;
margin-bottom: 4px;
font-size: 17px;
color: #b8c0c8;
margin-right: 55px;
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
}

code {
font-family: "Roboto Mono", monospace;
color: inherit;
}

.form-field__input {
width: 100%;
border: 1px solid #a8b4c0;
border-radius: 4px;
padding: 8px;
font-size: 16px;
border: 1px solid #FFFFFF;
border-radius: 6px;
padding: 10px 15px;
background-color: transparent;
color: #FFFFFF;
font-size: 18px;
font-weight: 300;
font-family: inherit;
-webkit-appearance: none;
appearance: none;
}

.form-field__input:focus {
border-color: #FF8630;
outline: none;
}

textarea {
width: 100%;
min-height: 100px;
max-height: 300px;
border: 1px solid #FFFFFF;
border-radius: 6px;
padding: 10px 15px;
background-color: transparent;
color: #FFFFFF;
font-size: 18px;
font-weight: 300;
font-family: inherit;
padding: 8px;
resize: none;
}

@media (max-width: 560px) {
textarea:focus {
border-color: #FF8630;
outline: none;
}

.form-field__input {
width: 350px;
}

textarea {
min-width: 350px;
max-width: 350px;
}

@media (max-width: 768px) {
body {
padding: 24px;
padding: 30px;
}

.demo-wrapper {
margin: 0 auto;
.form-field {
display: block;
}

.form-field__input {
width: 100%;
}

form {
flex-direction: column;
margin: 0;
textarea {
min-width: 100%;
max-width: 100%;
}

.form-field {
width: 100%;
margin: 0 0 20px;
.form-field__name {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="demo-wrapper">
<form>
<label class="form-field">
<span class="form-field__name"><code>inputmode="none"</code></span>
<input type="text" inputmode="none" name="name_input" class="form-field__input">
</label>
<label class="form-field ">
<span class="form-field__name"><code>inputmode="text"</code></span>
<textarea inputmode="text" name="comment_input" placeholder="Оставьте комментарий"></textarea>
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="numeric"</code></span>
<input type="text" inputmode="numeric" name="numeric_input" class="form-field__input">
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="decimal"</code></span>
<input type="text" inputmode="decimal" name="decimal_input" class="form-field__input">
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="tel"</code></span>
<input type="tel" inputmode="tel" name="phone_input" class="form-field__input" pattern="[8]{1} [0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}" placeholder="8 999 999-99-99">
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="email"</code></span>
<input type="email" inputmode="email" name="email_input" class="form-field__input" placeholder="email@example.com">
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="search"</code></span>
<input type="text" inputmode="search" name="search_input" class="form-field__input">
</label>
<label class="form-field">
<span class="form-field__name"><code>inputmode="url"</code></span>
<input type="text" inputmode="url" name="link_input" class="form-field__input">
</label>
</form>
</div>
<form>
<div class="form-field">
<label class="form-field__name" for="none"><code>none</code>:</label>
<input type="text" inputmode="none" name="name_input" class="form-field__input" id="none">
</div>
<div class="form-field">
<label class="form-field__name" for="text"><code>text</code>:</label>
<textarea inputmode="text" name="comment_input" placeholder="Оставьте комментарий" id="text"></textarea>
</div>
<div class="form-field">
<label class="form-field__name" for="numeric"><code>numeric</code>:</label>
<input type="text" inputmode="numeric" name="numeric_input" class="form-field__input" id="numeric">
</div>
<div class="form-field">
<label class="form-field__name" for="decimal"><code>decimal</code>:</label>
<input type="text" inputmode="decimal" name="decimal_input" class="form-field__input" id="decimal">
</div>
<div class="form-field">
<label class="form-field__name" for="tel"><code>tel</code>:</label>
<input type="tel" inputmode="tel" name="phone_input" class="form-field__input" pattern="[8]{1} [0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}" placeholder="8 999 999-99-99" id="tel">
</div>
<div class="form-field">
<label class="form-field__name" for="email"><code>email</code>:</label>
<input type="email" inputmode="email" name="email_input" class="form-field__input" placeholder="email@example.com" id="email">
</div>
<div class="form-field">
<label class="form-field__name" for="search"><code>search</code>:</label>
<input type="text" inputmode="search" name="search_input" class="form-field__input" id="search">
</div>
<div class="form-field">
<label class="form-field__name" for="url"><code>url</code>:</label>
<input type="text" inputmode="url" name="link_input" class="form-field__input" id="url">
</div>
</form>
</body>
</html>
Binary file removed html/inputmode/images/tel_email.jpg
View file
Binary file not shown.
Binary file added html/inputmode/images/tel_email.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed html/inputmode/images/tel_numeric.jpg
View file
Binary file not shown.
Binary file added html/inputmode/images/tel_numeric.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed html/inputmode/images/tel_phone.jpg
View file
Binary file not shown.
Binary file added html/inputmode/images/tel_phone.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed html/inputmode/images/tel_text.jpg
View file
Binary file not shown.
Binary file added html/inputmode/images/tel_text.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed html/inputmode/images/tel_url.jpg
View file
Binary file not shown.
Binary file added html/inputmode/images/tel_url.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 9 additions & 6 deletions html/inputmode/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ title: "Атрибут `inputmode`"
description: "Если нужно ввести только цифры зачем показывать всю клавиатуру? Подсказка для браузера какой набор символов нужен."
authors:
- webdb81
contributors:
- skorobaeus
- tatianafokina
keywords:
- тип клавиатуры
related:
Expand Down Expand Up @@ -44,13 +47,13 @@ tags:

Используется стандартная клавиатура устройства пользователя. Является значением по умолчанию, учитывает локализацию устройства пользователя.

![Пример клавиатуры для ввода текста](images/tel_text.jpg)
![Пример клавиатуры для ввода текста](images/tel_text.png)

### `numeric`

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

![Пример клавиатуры для ввода числовых значений](images/tel_numeric.jpg)
![Пример клавиатуры для ввода числовых значений](images/tel_numeric.png)

В сочетании с атрибутами `pattern`, `minlength` и `maxlength` позволяет настроить поле ввода для разных вариантов использования.

Expand All @@ -62,7 +65,7 @@ tags:

Ввод номера телефона на клавиатуре, которая использует числа от 0 до 9, звёздочку <kbd>*</kbd> и решётку <kbd>#</kbd>.

![Пример клавиатуры для ввода номера телефона](images/tel_phone.jpg)
![Пример клавиатуры для ввода номера телефона](images/tel_phone.png)

При использовании этого значения, для поля ввода рекомендуется указывать тип `tel`:

Expand All @@ -74,7 +77,7 @@ tags:

Клавиатура, оптимизированная для ввода электронной почты. Символы <kbd>@</kbd> и точка <kbd>.</kbd> могут располагаться в более удобном месте. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru).

![Пример клавиатуры для ввода электронной почты](images/tel_email.jpg)
![Пример клавиатуры для ввода электронной почты](images/tel_email.png)

При использовании этого значения, для поля ввода рекомендуется указывать тип `email`:

Expand All @@ -94,11 +97,11 @@ tags:

Используется клавиатура, оптимизированная для ввода ссылок. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru). Символы точки <kbd>.</kbd> и косой черты <kbd>/</kbd> могут располагаться в более удобных местах.

![Пример клавиатуры для ввода ссылок](images/tel_url.jpg)
![Пример клавиатуры для ввода ссылок](images/tel_url.png)

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

<iframe title="Атрибут inputmode" src="demos/basic/" height="420"></iframe>
<iframe title="Атрибут inputmode" src="demos/basic/" height="720"></iframe>

## Подсказки

Expand Down
Loading

0 comments on commit 8569315

Please sign in to comment.