⚙️
Front-end patterns
  • Введение
  • Шаблоны
    • Эффекты CSS
      • Overlay
      • Анимация display:none
      • Текст
        • Фон текста градиент с анимацией
      • Элементы формы
        • Вертикальное выравнивание placeholder по вертикали
      • Ссылки
        • Градиент как основной цвет
        • Линия под ссылкой ездит слева направо при наведении
      • Скрывать блок .clipped
    • Модальное окно
      • Dialog
    • Элементы формы
      • Select
      • Radio
      • CheckBox
      • Ввод текста (input)
        • Телефон (tel)
        • Почта (email)
      • Кнопка
    • Вкладки/Списки
      • Вкладки или Табы (tabs)
      • Аккордеон (Accordion)
    • Навигация
      • Основная и дополнительная навигация на сайте
        • Анимирование основной навигации
      • Пропустить навигацию
      • Хлебные крошки (Breadcrumbs)
      • Кнопка основной навигации (Бургер)
    • Структуры
      • Контейнер
      • Столбцы
      • Прогресс
      • Горизонтальная прокрутка карточек
      • Цитата
    • Тэги (семантика)
      • Текст
      • Логика
    • Увеличить скорость загрузки страницы
    • Шрифты
  • JS
    • Прокрутка страницы
    • Анимация элементов
  • A11Y
    • Фокус с клавиатуры
    • No sort
  • WordPress
    • Решения и подсказки
    • Плагины
    • Натягиваем сайт
      • Пустая тема
      • Делаем главную (пустую) страницу
      • Подключаем стили и js
      • Заменяем содержимое файлов (header, footer, page)
    • Свой плагин
      • Шаблон
      • Административная часть
      • Пользовательская часть
      • Локализация плагина
  • Ghost
    • Создание своей темы
      • Фалы шаблона
        • Partials
          • footer.hbs
          • header.hbs
          • post_card.hbs
        • index.hbs
        • default.hbs
        • post.hbs
      • Переменные
      • Циклы, условия и функции
  • Visual Studio
  • Gulp
    • Deploy on GitHub
    • Плагин
    • Моя сборка
      • Изображения
  • Регулярные выражения
  • Алгоритмы
    • Поиск
    • Сортировка
    • Поиск в ширину (глубину)
    • Типы данных
  • Конструкторы сайтов
Powered by GitBook
On this page
  • Основные данные
  • Лучшая практика
  • Интерактивный дизайн
  • Управление клавиатурой
  • Screenreader
  • Код
  • Паттерн
  • ARIA

Was this helpful?

  1. Шаблоны
  2. Элементы формы
  3. Ввод текста (input)

Почта (email)

Элемент формы для ввода почтового адреса

PreviousТелефон (tel)NextКнопка

Last updated 3 years ago

Was this helpful?

Основные данные

Лучшая практика

Входное значение должно автоматически проверяется, чтобы убедиться, что оно не пустое или содержит правильно отформатированный адрес электронной почты (или список адресов) перед отправкой формы.

Интерактивный дизайн

Управление клавиатурой

Screenreader

Код

Паттерн

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"

ARIA