Формы HTML

• Создаются при помощи тега <form></form> и наполняются различными элементами форм.

Элементы формы

• <label>
  • Определяет подпись к элементу пользовательского интерфейса (например, к полю ввода).
  • Позволяет пользователю выбрать/активировать связанный элемент формы кликом по тексту подписи.
  • Варианты создания связи:
    1. Обернуть элемент:

       <label>Заполни меня: <input type="text"></label>

    2. Использовать атрибуты for и id: Значение атрибута for у <label> должно совпадать со значением атрибута id связанного элемента формы.

       <label for="second_field">А потом меня: </label>
       <input type="text" id="second_field">

• <input>
  • Основной тег для создания полей ввода. Тип поля определяется атрибутом type.
  • Атрибут type:
    • text:
      • Определяет однострочное текстовое поле.
      • Подходит для ввода ФИО, адреса и любых текстовых данных, не требующих скрытия или специальной валидации формата.
    • password:
      • Определяет однострочное текстовое поле для ввода пароля.
      • Введенные символы скрываются (отображаются точками или звездочками).
    • email:
      • Определяет поле для ввода адреса электронной почты.
      • Браузер может выполнять базовую валидацию формата введенного значения.
    • tel:
      • Определяет поле для ввода номера телефона.
      • Можно указать формат с помощью атрибута pattern (требует знания регулярных выражений).
      • Пример: <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    • number:
      • Определяет поле для ввода числа. Не позволяет вводить буквы.
      • Можно установить ограничения с помощью атрибутов min, max и step.
    • range:
      • Определяет контроль для выбора числового значения в заданном диапазоне (обычно слайдер).
      • Подходит, когда точное значение не критично.
      • Атрибуты: min, max, step (по умолчанию диапазон от 0 до 100).

〰〰〰 𓆝 𓆟 𓆞 𓆝 𓆟 𓆝 𓆟 𓆞 〰〰〰