<form>

Тег <form> добавляет на страницу форму, которую пользователь может заполнить. Например, ввести своё имя, фамилию или почту. Данные формы отправляются на сервер.

        
          
          <form action="" method="get">  <p>    <label for="name">Введите имя:</label>    <input type="text" name="name" id="name" required>  </p>  <p>    <label for="email">Введите email:</label>    <input type="email" name="email" id="email" required>  </p>  <button type="submit">Отправить</button></form>
          <form action="" method="get">
  <p>
    <label for="name">Введите имя:</label>
    <input type="text" name="name" id="name" required>
  </p>
  <p>
    <label for="email">Введите email:</label>
    <input type="email" name="email" id="email" required>
  </p>
  <button type="submit">Отправить</button>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Сайты используют формы, чтобы получить какую-то информацию от пользователя. Это может быть форма заказа в онлайн-магазине или форма обратной связи. Пользователь заполняет поля или выбирает нужную опцию в списке, а после отправки формы эти данные можно обработать.

Стилизовать <form> можно с помощью CSS.

На странице можно сделать сколько угодно форм. Но одновременно пользователь сможет отправить только одну заполненную форму.

action — здесь указывается ссылка на скрипт, который обработает форму. Это может быть полная URL-ссылка, а может быть относительная, типа html/sendform. Если не указать атрибут action, то страница будет просто обновляться каждый раз, когда отправляется форма.

method — может определять, каким способом будут отправлены на сервер данные, которые ввёл пользователь. Есть два варианта:

• get — ответы пользователя дописываются в URL в формате «параметр=значение», например «email=name@yandex.ru». Выглядит это так: site.com/form?name=Max&email=name@yandex.ru. То есть параметр — это то, что вы спрашиваете у пользователя, а значение — его ответ. Пары «параметр=значение» разделяются знаком &. Вариант method="get" используется по умолчанию, но у него есть ограничение: URL не должен получиться длиннее, чем 3000 символов.
• post — данные из формы пакуются в тело формы и отправляются на сервер. В этом случае нет ограничений по объёму данных, поэтому этот способ подойдёт для заполнения базы данных или отправки файлов.

Ещё у атрибута method может быть третье значение — dialog. Если <form> находится внутри <dialog>, то поля формы не очищаются, а сама форма не делает запроса на сервер. Вместо этого, закрывается диалоговое окно. В статье «Работа с формами» можно узнать, как отправить данные на сервер с помощью JavaScript.

name — уникальное имя формы. Пользователь его не увидит, зато скрипты смогут найти нужную форму. Например, по этому имени, можно получить доступ к форме из коллекции document.forms.

autocomplete — включает или выключает автозаполнение для формы. Браузер может подставить данные, которые пользователь сохранил ранее, например, пароль, номер банковской карты или адрес. Если у пользователя в настройках браузера отключена функция автозаполнения, то этот атрибут уже ни на что не повлияет. Атрибут autocomplete можно задать и для конкретных элементов. Есть два значения:

• on — значение по умолчанию. Включает автозаполнение для этой формы.
• off — выключает автозаполнение. Например, если форма собирает уникальные данные типа капчи («Введите слово с картинки»).

novalidate — у этого атрибута нет значения. Если его добавить, браузер не будет проверять правильность заполнения формы. Например, верно ли введён адрес почты или URL для тегов <input type="email"> и <input type="url"> соответственно. Обычно браузер проверяет, не пропустили ли вы @ или домен. В том числе, проверяется и заполнение обязательных полей.

enctype — определяет, какой вид кодирования будет применён к данным из формы. Этот атрибут обязательно надо ставить, если через форму отправляются файлы, в остальных случаях — не обязательно. Есть три варианта кодирования:

• application/x-www-form-urlencoded — это значение по умолчанию. Данные будут кодироваться так, что пробелы превратятся в знак +, а символы вроде кириллицы будут представлены в шестнадцатеричном значении. Например, так будет выглядеть имя Степан: %D0%A1%D1%82%D0%B5%D0%BF%D0%B0%D0%BD 🤡
• multipart/form-data — вариант, который надо указать, если через форму отправляются файлы. В этом случае данные не кодируются.
• text/plain — в этом случае пробелы меняются на +, а остальные символы передаются без изменений.

accept-charset — задаёт кодировку, в которой сервер принимает данные из формы. Самая распространённая кодировка — UTF-8. Можно указать один вариант или несколько. Например, accept-charset="UTF-8 Windows-1251". В этом случае названия кодировок нужно разделять пробелами. Здесь можно задать значение по умолчанию: accept-charset="UNKNOWN". Тогда кодировка будет такой, какая используется на странице с формой.

💡 Никогда не используйте method="get", если хочется отправить конфиденциальные данные, потому что их можно будет легко прочитать в запросе, который отправляет форма, и даже в адресной строке браузера.

💡 Вариант method="get" удобен тем, что полученный URL с ответами можно сохранить в закладки. Например, пользователь может заполнить форму и поделиться ссылкой с результатами с кем-нибудь ещё.

Вот простая форма:

        
          
          <!-- Эта форма отправит значение методом GET — мы получим URL с ответом -->  <form action="" method="get">    <label>      Имя первого гостя:      <input type="text" name="name">    </label>    <button type="submit">Сохранить</button>  </form><!-- Эта форма отправит данные методом POST --><form action="" method="post">  <label for="post-name">    Имя второго гостя:    <input id="post-name" type="text" name="name">  </label>  <button type="submit">Сохранить</button></form><!-- Форма с радиокнопками --><form action="" method="post">  <fieldset>    <legend>Выберите прожарку</legend>    <label>      <input type="radio" name="level">      Rare    </label>    <label>      <input type="radio" name="level"checked>      Medium    </label>    <label>      <input type="radio" name="level">      Well Done    </label>  </fieldset></form>
          <!-- Эта форма отправит значение методом GET — мы получим URL с ответом -->
  <form action="" method="get">
    <label>
      Имя первого гостя:
      <input type="text" name="name">
    </label>
    <button type="submit">Сохранить</button>
  </form>

<!-- Эта форма отправит данные методом POST -->
<form action="" method="post">
  <label for="post-name">
    Имя второго гостя:
    <input id="post-name" type="text" name="name">
  </label>
  <button type="submit">Сохранить</button>
</form>

<!-- Форма с радиокнопками -->
<form action="" method="post">
  <fieldset>
    <legend>Выберите прожарку</legend>
    <label>
      <input type="radio" name="level">
      Rare
    </label>
    <label>
      <input type="radio" name="level"checked>
      Medium
    </label>
    <label>
      <input type="radio" name="level">
      Well Done
    </label>
  </fieldset>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Попробуем отправить данные, которые введёт пользователь, на почту. Для этого вместо URL-ссылки мы пропишем action="mailto:html@yandex.ru". Ключевое слово mailto: позволяет отправить что угодно на электронную почту. Не забудьте добавить атрибут enctype="text/plain" тегу <form>, чтобы письмо отображалось корректно:

        
          
          <form action="mailto:html@yandex.ru" enctype="text/plain">  <label>    Ваше имя    <input type="text" name="name" required>  </label>  <label>    Что вы хотите заказать?    <input type="text" name="order" required>  </label>  <button type="submit">Сделать заказ</button></form>
          <form action="mailto:html@yandex.ru" enctype="text/plain">
  <label>
    Ваше имя
    <input type="text" name="name" required>
  </label>
  <label>
    Что вы хотите заказать?
    <input type="text" name="order" required>
  </label>
  <button type="submit">Сделать заказ</button>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <form>  <label>Имя: <input type="text" name="firstName"></label>  <button type="submit">Отправить</button></form>
          <form>
  <label>Имя: <input type="text" name="firstName"></label>
  <button type="submit">Отправить</button>
</form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать