HTML таг `form`

Пример

Кратък пример как се използва тагът <form>.

<form action="/submit" method="post" class="p-3 border rounded">
  <div class="mb-3">
    <label for="name" class="form-label">Име</label>
    <input type="text" class="form-control" id="name" name="name" required>
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Имейл</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>

  <button type="submit" class="btn btn-primary">Изпрати</button>
</form>

Опитай в редактора

Дефиниция и употреба

Тагът <form> се използва за създаване на HTML формуляри, чрез които потребителят може да въвежда и изпраща данни към сървър (или да ги обработва с JavaScript на клиента). Вътре в него се поставят елементи като <input>, <textarea>, <select>, <button> и други контроли за въвеждане.

Най-важните атрибути са:

action – URL адресът, към който се изпращат данните от формата. Ако се пропусне, данните се изпращат към текущия URL.
method – HTTP методът за изпращане на данните, най-често get или post. get изпраща данните в URL (подходящо за търсене), а post – в тялото на заявката (подходящо за форми с чувствителни или по-големи обеми данни).
enctype – типът кодиране на изпращаните данни (напр. application/x-www-form-urlencoded, multipart/form-data за качване на файлове).
target – указва къде да се зареди резултатът (напр. _self, _blank).

Формата се изпраща обикновено чрез бутон с type="submit" или програмно с JavaScript (form.submit()). Добра практика е да се използват етикети <label> за всяко поле, както и атрибутите name на контролите, защото именно техните стойности се изпращат към сървъра.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути

Атрибут	Описание
`action`	URL адресът, към който се изпращат данните от формата.
`method`	HTTP метод за изпращане на данните: `get`, `post` и др.
`enctype`	Тип кодиране на данните при изпращане (напр. `multipart/form-data` при качване на файлове).
`target`	Къде да се зареди резултатът от изпращането (напр. `_self`, `_blank`).
`autocomplete`	Разрешава или забранява автоматичното попълване на полетата в формата (`on` / `off`).
`novalidate`	Ако е зададен, изключва вградената HTML5 валидация при изпращане.
`name`	Име на формата, използвано в JavaScript или при изпращане.
`rel`	Определя връзката между формата и целевия ресурс (използва се по-рядко).

Тагове

a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fencedframe fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd label legend li link main map mark menu meta meter nav noscript object ol optgroup option output p picture pre progress q rp rt ruby s samp script search section select selectedcontent slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr

HTML таг form