====== Використання форм (HTML-ФОРМИ) ======
Форма HTML являє собою документ, створений з використанням елементів HTML. Призначенням форми є збір інформації від користувачів. Після того як користувач заповнить форму і запускає процес її обробки, інформація
з неї потрапляє в програму, що працює на сервері. Інша програма під назвою Common Gateway Interface (CGI) обробляє її. Таким чином користувач може інтерактивно взаємодіяти з сервером Web через Internet.

Форми так само зручні і для розробників сайту при розробці CMS (система управління вмістом (англ. Content Management System)), яка дозволяє підтримувати головну властивість сайту - актуальність
===== Створення простої форми =====

Теги ''<form>'' і ''</ form>'' задають початок і кінець форми. Починаючий форму тег ''<form>'' містить два атрибути: ''action'' і ''method'' . Атрибут action містить адресу URL сценарію, який має бути викликаний для обробки форми. Атрибут method вказує браузеру, який вид ''HTTP'' запиту необхідно використовувати для відправки форми;
можливі значення ''POST'' і ''GET''.

<callout type="info" icon="true">Головна відмінність методів POST і GET полягає у способі передачі інформації. У методі GET параметри передаються через адресний рядок, тобто по суті в HTTP-заголовку запиту, в той час як у методі POST параметри передаються через тіло HTTP-запиту і ніяк не відбиваються на вигляді рядка.</callout>

Для відправки форми на сервер використовується кнопка типу ''submit'', також форму можна відправити натиснувши клавішу ''Enter'' в межах форми. Якщо кнопка типу ''submit'' відсутній, клавіша ''Enter'' імітує її використання.

Коли форма відправляється на сервер для обробки даних вказаним обробником, що знаходиться по адресі, заданим атрибутом action елементу <form> Дані відправляються у вигляді пари «ім'я=значення», де ім'я визначається атрибутом name ( Задати імʼя можна наступним елементам ''input'', ''textarea'', ''button'' чи ''select'', а значення буде, тим, що користувач ввів в поле форми.

Для тега form можна використовувати псевдо-класи CSS '':validі'', '':invalid''.

Функція html-форми - обмін даними між користувачем та сервером або звязку між користувачем і адміністратором.

Теґ ''<form>'' може містити один або більше з наступних елементів форми:
  * ''<input>''
  * ''<textarea>''
  * ''<button>''
  * ''<select>''
  * ''<option>''
  * ''<optgroup>''
  * ''<fieldset>''
  * ''<label>''

<callout type="primary" icon="true">Якщо форму вкласти в іншу форму, то будуть виконані умови та відправлені дані зовнішньої форми.</callout>

<callout type="info" icon="true">На одній сторінці допускається використання будь-якої кількості форм, але необхідно пам'ятати, що у разі надсилання даних будуть відправлені дані тільки однієї форми.</callout>

Приклад використання HTML теґа <form> для зворотнього звязку.
<grid>
<col xs="12" md="6">
<code html>
<p>Приклад форми для входу</p>
<hr>
<form>
  <lable>І'мя:</lable><br>
  <input type="text" name="login"><br>
  
  <lable>Email:</lable><br>
  <input type="email" name=""><br>
  
  <lable>Ваш сайт:</lable><br>
  <input type="url"><br>
  
  <lable>Ваше повідомлення:</lable><br>
  <textarea></textarea>
  <br>
  
  <input type="submit" value="Увійти">
</form>
</code>
</col>
<col xs="12" md="6">
{{ :subjects:basic:informatika:web:form_ex.png?nolink }}
</col>
</grid>

<grid>
<col xs="12" md="6">
**Різниця між HTML 4.01 та HTML5**

У HTML5 додано два нових атрибута: ''autocomplete'' та ''novalidate'', і видалено атрибут ''accept''.
</col>
<col xs="12" md="6">
</col>
**Різниця між XHTML та HTML**
У XHTML, атрибут ''name'' не рекомендується до використання. Замість цього використовуйте загальний атрибут ''id''.
</grid>

===== Валідація =====
Валідація (англ. Validation) — проєкт підтвердження відповідності (обгрунтованості) або надання законної сили;
набір процедур або дій, спрямованих на підтвердження за допомогою об'єктивних свідчень, математичних методів і вимірювань, наведення доказів, що вимоги до процесу, проєкту або системи виконано і цей процес, проєкт або система відповідають заданим параметрам.

**Валідація в програмуванні** — процес, що дозволяє визначити, наскільки точно з позицій потенційного користувача певна модель представляє задані сутності реального світу.

Коли ви збираєте інформацію від людей, через форму, ви застосовуєте якісь перевірки. Недотримання цих вимог може призвести до втрати клієнтів, небажаних даних в вашій базі даних або навіть слабких місць в системі безпеки вашого сайту. Історично, створення перевірок було болісним процесом. На стороні сервера, процес полегшується завдяки фреймворкам, які обробляють все за вас, але на стороні клієнта, ви, як правило, користуєтесь JavaScript-бібліотеками, які доволі складно інтегрувати.

На щастя, HTML5 дає нам ряд можливостей, завдяки яким можна виконувати більшість перевірок. Форми в HTML5 тепер мають вбудовану підтримку для перевірки за допомогою використання спеціальних атрибутів і нових типів введення, і надають вам широкий контроль над CSS-стилями.

==== Спеціалізовані типи вводу ====
HTML5 вводить кілька нових типів введення. Вони можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних.
  * color
  * date
  * datetime
  * datetime-local
  * email
  * month
  * number
  * range
  * search
  * tel
  * time
  * url
  * week

Щоб скористуватися новими типами, включіть їх в якості значення атрибута ''type'':
<code html><input type="email"></code>

Якщо браузер не підтримує цей тип вводу, це поле буде вести себе, як звичайне поле для введення тексту. Також корисно знати, що деякі поля (наприклад, ''email'' і ''tel'') викликають відкриття спеціалізованої клавіатури у мобільних пристроїв.

==== Обов'язкові Поля ====
Просто додавши "необхідний атрибут до <input>, <select>, </select><textarea>, ви повідомляєте браузеру, які значення повинні бути в цій області. Це як червона зірочка (*), яку ми бачимо в більшості реєстраційних форм.

<code html><input type="checkbox" name="terms" required ></code>
Проблема тут в тому, що майже всі дані будуть виконувати цю вимогу - наприклад, ви можете обійти перевірку залишивши порожнє місце (ми покажемо вам, як запобігти цьому).

Коли ви встанлюєте потрібний атрибут для електронної пошти або поля url, браузер очікує певний шаблон, якому потрібно слідувати, але все це є доволі відносним, адреса пошти "a@aa" буде вважатися дійсною (читайте далі, щоб побачити, як обійти це).

==== Обмеження ====
Ми можемо встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут ''maxlength''. Це означатиме, що забороняється введення значення, яке є більшим зазначеного в ''maxlength''. Якщо користувач намагатиметься вставити з буферу рядок більший зазначеного, то форма просто обріже його.
<code html><input type="text" name="name" required  maxlength="15"></code>

Поле ''<input type="number">'' використовує ''мах'' та ''min'' атрибути, щоб створити діапазон можливих значень (в нашому прикладі ми зробили мінімальний допустимий вік 18).
<code html><input type="number" name="age" min="18" required></code>

===== Джерела =====
  * [[http://www.ndu.edu.ua/index.php/ua/|Ніжинський державний університет імені Миколи Гоголя]]
  * [[https://css.in.ua/html/tag/form|<form> HTML тег]]
  * [[wp>Валідація]]
  * [[https://codeguida.com/post/196|Проста валідація форм з HTML5]]