Элементы форм разных типов

7.1 Текстовое поле

HTML предоставляет множество типов ввода данных для элементов форм, которые дают возможность пользователям вводить данные в различных форматах, таких как текст, электронная почта, даты и многое другое. Рассмотрим подробно различные типы ввода данных и их использование.

Элемент <input type="text"> используется для ввода однострочного текста. Это самый основной и часто используемый тип ввода.

Пример использования:

    
      <label for="name">Имя:</label>
      <input type="text" id="name" name="name">
    
  

Атрибуты

• maxlength: ограничивает максимальное количество символов
• placeholder: текст-заполнитель, который отображается внутри поля ввода, пока пользователь не начнет вводить данные
• required: указывает, что поле обязательно для заполнения

Пример с атрибутами:

    
      <label for="username">Имя пользователя:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="Введите имя пользователя" required>
    
  

7.2 Поля для чисел

Элемент <input type="number"> используется для ввода числовых значений. Он позволяет ограничивать ввод только числами и может включать стрелки для увеличения или уменьшения значения.

Пример использования:

    
      <label for="quantity">Количество:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Атрибуты

• min: устанавливает минимально допустимое значение
• max: устанавливает максимально допустимое значение
• step: определяет шаг изменения значения
• value: устанавливает начальное значение

7.3 Поля для электронной почты

Элемент <input type="email"> предназначен для ввода адресов электронной почты. Он проверяет, соответствует ли введенный текст формату адреса электронной почты.

Пример использования:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Атрибуты

• multiple: позволяет вводить несколько адресов электронной почты, разделенных запятыми
• pattern: устанавливает регулярное выражение для дополнительной проверки введенных данных

Пример с атрибутами:

    
      <label for="emails">Email адреса (разделенные запятыми):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Поля для телефонного номера

Элемент <input type="tel"> используется для ввода телефонных номеров. Он не выполняет проверку формата номера, но позволяет настроить маску ввода через атрибут pattern.

Пример использования:

    
      <label for="phone">Телефон:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Атрибуты

pattern: устанавливает регулярное выражение для проверки формата введенного номера.

Пример с атрибутами:

    
      <label for="phone">Телефон:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Поля для дат

Элемент <input type="date"> используется для ввода даты. В поддерживающих браузерах появляется виджет календаря для удобного выбора даты.

Пример использования:

    
      <label for="birthday">Дата рождения:</label>
      <input type="date" id="birthday" name="birthday">
    
  

Атрибуты

• min: устанавливает минимально допустимую дату
• max: устанавливает максимально допустимую дату

Пример с атрибутами:

    
      <label for="appointment">Дата встречи:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Поля для ввода времени

Элемент <input type="time"> используется для ввода времени. В поддерживающих браузерах появляется виджет выбора времени.

Пример использования:

    
      <label for="meeting_time">Время встречи:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Атрибуты

• min: устанавливает минимально допустимое время
• max: устанавливает максимально допустимое время
• step: определяет шаг изменения времени

Пример с атрибутами:

    
      <label for="alarm">Будильник:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 Поля для ввода URL

Элемент <input type="url"> используется для ввода веб-адресов (URL). Он проверяет, соответствует ли введенный текст формату URL.

Пример использования:

    
      <label for="website">Веб-сайт:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Атрибуты

pattern: устанавливает регулярное выражение для дополнительной проверки введенных данных.

Пример с атрибутами:

    
      <label for="personal_website">Личный веб-сайт:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Поля для ввода паролей

Элемент <input type="password"> используется для ввода паролей. Введенные данные скрываются, заменяясь символами (например, звездочками или точками).

Пример использования:

    
      <label for="password">Пароль:</label>
      <input type="password" id="password" name="password">
    
  

Атрибуты

• maxlength: ограничивает максимальное количество символов
• placeholder: текст-заполнитель
• required: указывает, что поле обязательно для заполнения

Пример с атрибутами:

    
      <label for="new-password">Новый пароль:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Введите пароль" required>
    
  

7.9 Поля для диапазона значений

Элемент <input type="range"> используется для ввода значений в определенном диапазоне. Он отображается в виде ползунка.

Пример использования:

    
      <label for="volume">Громкость:</label>
      <input type="range" id="volume" name="volume">
    
  

Атрибуты

• min: устанавливает минимально допустимое значение
• max: устанавливает максимально допустимое значение
• step: определяет шаг изменения значения
• value: устанавливает начальное значение

Пример с атрибутами:

    
      <label for="brightness">Яркость:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Поля для выбора цвета

Элемент <input type="color"> используется для выбора цвета. В поддерживающих браузерах появляется виджет выбора цвета.

Пример использования:

    
      <label for="favcolor">Выберите ваш любимый цвет:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Атрибуты

• value: устанавливает начальный цвет.

7.11 Поля для поиска

Элемент <input type="search"> используется для ввода поисковых запросов. В большинстве браузеров он имеет встроенные стили и функциональность для очистки введенного текста.

Пример использования:

    
      <label for="search">Поиск:</label>
      <input type="search" id="search" name="search" placeholder="Введите поисковый запрос">
    
  

1

Задача

Модуль 1: Web Core, 5 уровень, 6 лекция

Недоступна

Телефон с маской

Телефон с маской

Открыть

1

Задача

Модуль 1: Web Core, 5 уровень, 6 лекция

Недоступна

Выбор даты

Выбор даты

Открыть