> For the complete documentation index, see [llms.txt](https://danila-korotkov.gitbook.io/front-end-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://danila-korotkov.gitbook.io/front-end-patterns/shablony/elementy-formy/vvod-teksta-input.md).

# Ввод текста (input)

Псевдоклассы: valid и: invalid CSS автоматически применяются в зависимости от ситуации, чтобы визуально обозначить, является ли текущее значение поля допустимым адресом электронной почты или нет.

#### Общий пример ввода для формы, валидацию которой будем проверять вручную

```html
<form novalidate>
               <fieldset>
                  <legend>Онлайн запись</legend>
                  <label for="input-name-menu" id="label-name-menu">Имя</label>
                  <input type="text" id="input-name-menu" aria-labelledby="label-name-menu" placeholder="Имя" maxlength="15" />
                  <span class="error" aria-live="polite"></span>

                  <label for="input-phone-menu" id="label-phone-menu">Телефон</label>
                  <input type="tel" id="input-phone-menu" aria-labelledby="label-phone-menu" placeholder="Телефон" required />
                  <span class="error" aria-live="polite"></span>

                  <small>Нажимая на кнопку, вы принимаете условия пользовательского <a class="appointment-form__link" href="#">соглашения</a>.</small>

                  <button type="button">Отправить</button>
               </fieldset>
            </form>
```

{% hint style="info" %}
Хорошая [статья](https://developer.mozilla.org/ru/docs/Learn/Forms/Form_validation) про валидацию форм
{% endhint %}

{% hint style="warning" %}
Обязательно к [прочтению](https://developer.mozilla.org/ru/docs/Web/HTML/Element/Input). Здесь описаны все правила и работа с input
{% endhint %}

`<input title="some information">` - title позволяет указывать дополнительный текст в подсказку, при появлении стандартного сообщения (об обязательном заполнении например)