Работа с формами в HTML.

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Форма состоит из набора текстовых полей, кнопок, списков и других элементов управления.
Основу любой формы составляет элемент <form>...</form>. Элемент <input> создаёт большинство полей формы. При помощи css-стилей можно изменить размер и тип шрифта, цвет и другие свойства текста, а также добавить границы, цвет фона и фоновое изображение или же ширину поля. Ниже приведён пример текстовой поля <input type="text" placeholder="Введите текст">.

text
На приведённом примере мы видим, что значение type у нас задано, как text. Однако возможны и другие значения, такие как: email, tel, password, number, textarea. А placeholder в свою очередь задаёт подсказывающий текст, который исчезнет, как только будет введён некоторый текст. Теперь разберем каждую из них отдельно.

  • Email - может показывать предупреждение, если введён неверный email. <input type="email">
  • email

  • Телефон - может сработать автозаполнение. <input type="tel">
  • tel

  • Пароль - символы будут отображаться как точки. <input type="password">
  • password

  • Число - используются клавиши вверх/вниз для изменения значения. <input type="number">
  • number

  • Многострочный текст - может быть изменён размер поля. <textarea>....</textarea>
  • textarea

Также существуют так называемые флажки, переключатели, выпадающее меню и множественный выбор из выпадающего меню, которые мы рассмотрим дальше.

  • Флажки - это элементы, которые принимают только два состояния: true, false. Задать данный флажок можно при помощи следующего кода: <input type="checkbox">Запомнить меня. Данные флажки мы можем заменить к примеру напротив пункта "Запомнить меня" во время авторизации, или же во время регистрации, когда соглашаемся с правилами данного ресурса. По умолчанию флажок выключен.
  • checkbox

  • Переключатели представляют из себя список вариантов из которых пользователю будет предложено выбрать нужный вариант. Для работы этого элемента нужно сгруппировать список переключателей вместе при помощи одного и того же значения для атрибута name.
    Укажите Ваш пол:
      <input type="radio" name="pol">Мужской
      <input type="radio" name="pol">Женский
  • radio

  • Выпадающее меню в основном используется для большого количества вариантов, чтобы не занимать слишком много места.
    <select>
      <option>Январь</option>
      <option>Февраль</option>
      <option>Март</option>
      <option>Апрель</option>
      <option>Май</option>
      <option>Июнь</option>
      <option>Июль</option>
      <option>Август</option>
      <option>Сентябрь</option>
      <option>Октябрь</option>
      <option>Ноябрь</option>
      <option>Декабрь</option>
    </select>
  • select

  • Множественный выбор из выпадающего меню представляет из себя обычное выпадающее меню с возможностью выбора нескольких вариантов.
    Какими браузерами вы пользуетесь?
    <select multiple>
      <option>Google Chrome</option>
      <option>Internet Explorer</option>
      <option>Mozilla Firefox</option>
      <option>Opera</option>
      <option>Safari</option>
    </select>
  • select

Мы рассмотрели наиболее используемые элементы форм, однако не стоит забывать, что существуют и другие.