Формы в HTML

1. Знакомство с формами

Формы в HTML — это важный инструмент для взаимодействия пользователей с веб-страницами. Они позволяют собирать информацию от пользователей, будь то текст, выбор из списка, файлы или другие данные, которые затем можно отправить на сервер для обработки. В HTML формы создаются с помощью множества элементов, каждый из которых предназначен для определенного типа ввода данных. Основным элементом форм является <form>, который включает другие элементы, такие как <input>, <textarea>, <button>, <select> и другие.

Основные элементы форм

Элементы форм позволяют создавать поля ввода, кнопки, выпадающие списки и другие элементы интерфейса, с помощью которых пользователь может вводить данные. Основные теги, используемые в формах:

• <form> — основной контейнер для всех элементов формы. Он определяет, куда и как отправляются данные.
• <input> — универсальный элемент для создания полей ввода разного типа (текст, пароль, радио-кнопки, чекбоксы и т.д.).
• <label> — элемент, связанный с полем ввода, позволяет обозначить его назначение.
• <textarea> — поле для ввода многострочного текста.
• <button> — кнопка для отправки формы или выполнения других действий.
• <select> и <option> — выпадающий список, в котором пользователь может выбрать один или несколько вариантов.

Пример простой формы

      
    <form action="/submit" method="post">
      <label for="name">Имя:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Электронная почта:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Отправить</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Отправить</button>
</form>

• action в <form> определяет URL, на который отправляются данные формы.
• method указывает метод отправки данных: post или get.

HTML <input>

Тег <input> — один из наиболее универсальных элементов формы в HTML. Он поддерживает разные типы ввода, каждый из которых подходит для определенного типа данных.

Синтаксис тега <input>:

<input type="тип" name="имя_поля" id="идентификатор" value="значение">

<input type="тип" name="имя_поля" id="идентификатор" value="значение">

Атрибуты, используемые в <input>:

• type — тип ввода (например, текст, пароль, email и т.д.).
• name — имя поля, по которому сервер идентифицирует данные.
• id — уникальный идентификатор, используется для связи с <label>.
• value — значение, которое отображается в поле по умолчанию (например, текст по умолчанию в текстовом поле).

Основные типы <input>

• Текстовое поле type="text" — для ввода небольшого объема текста, например, имени или фамилии.
  HTML

        
          <label for="username">Имя пользователя:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">Имя пользователя:</label>
          <input type="text" id="username" name="username">
        
      
• Пароль type="password" — для ввода пароля. Введенные символы отображаются как точки или звездочки.
  HTML

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

  HTML

        
          <label for="password">Пароль:</label>
  <input type="password" id="password" name="password">
        
      
• Email type="email" — для ввода email-адреса. Это поле проверяет правильность формата ввода.
  HTML

        
          <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email">
        
      
• Номер type="number" — для ввода числовых значений. Поле позволяет ввести только числа.
  HTML

        
          <label for="age">Возраст:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      

  HTML

        
          <label for="age">Возраст:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      
• Кнопка отправки type="submit" — отправляет данные формы на сервер. Эта кнопка обычно расположена в конце формы.
  HTML

        
          <input type="submit" value="Отправить">
        
      

  HTML

        
          <input type="submit" value="Отправить">
        
      

Другие полезные атрибуты <input>

• placeholder — отображает текст-подсказку в поле ввода, который исчезает, когда пользователь начинает ввод текста.
  HTML

        
          <input type="text" placeholder="Введите ваше имя">
  

• required — делает поле обязательным для заполнения. Если пользователь попытается отправить форму, не заполнив это поле, браузер выдаст предупреждение.
  HTML

            
              <input type="email" name="email" required>
      

• min и max — задают минимальное и максимальное значение для полей type="number", type="date", и других числовых или временных типов.
  HTML

        
          <input type="number" name="age" min="18" max="65">
  

• maxlength — ограничивает количество символов, которые можно ввести в текстовое поле.
  HTML

        
          <input type="text" name="username" maxlength="20">
  

3. Пример формы

Соберем все рассмотренные элементы и атрибуты в одну форму:

      <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Регистрационная форма</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" placeholder="Введите ваше имя" required>

    <label for="email">Электронная почта:</label>
    <input type="email" id="email" name="email" placeholder="Введите email" required>

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

    <label>Пол:</label>
    <label><input type="radio" name="gender" value="male"> Мужской</label>
    <label><input type="radio" name="gender" value="female"> Женский</label>

    <label for="subscribe">Подписаться на новости</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">Зарегистрироваться</button>
  </form>
</body>
</html>

      <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="UTF-8">
      <title>Регистрационная форма</title>
    </head>
    <body>
      <form action="/submit" method="post">
        <label for="name">Имя:</label>
        <input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
    
        <label for="email">Электронная почта:</label>
        <input type="email" id="email" name="email" placeholder="Введите email" required>
    
        <label for="password">Пароль:</label>
        <input type="password" id="password" name="password" required>
    
        <label>Пол:</label>
        <label><input type="radio" name="gender" value="male"> Мужской</label>
        <label><input type="radio" name="gender" value="female"> Женский</label>
    
        <label for="subscribe">Подписаться на новости</label>
        <input type="checkbox" id="subscribe" name="subscribe">
    
        <button type="submit">Зарегистрироваться</button>
      </form>
    </body>
    </html>