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

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

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

<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>

Хорошая статья про валидацию форм

Обязательно к прочтению. Здесь описаны все правила и работа с input

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