Використання форм (HTML-ФОРМИ)

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

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

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

Для відправки форми на сервер використовується кнопка типу 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>

Приклад використання HTML теґа <form> для зворотнього звязку.

<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>

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

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

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

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

HTML5 вводить кілька нових типів введення. Вони можуть бути використані для створення полів вводу, які будуть приймати тільки певний тип даних.

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Щоб скористуватися новими типами, включіть їх в якості значення атрибута type:

<input type="email">

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

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

<input type="checkbox" name="terms" required >

Проблема тут в тому, що майже всі дані будуть виконувати цю вимогу - наприклад, ви можете обійти перевірку залишивши порожнє місце (ми покажемо вам, як запобігти цьому).

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

Ми можемо встановити деякі основні обмеження, такі як максимальна довжина, мінімальні і максимальні значення для числових полів. Щоб обмежити довжину поля введення і textareas, використовуйте атрибут maxlength. Це означатиме, що забороняється введення значення, яке є більшим зазначеного в maxlength. Якщо користувач намагатиметься вставити з буферу рядок більший зазначеного, то форма просто обріже його.

<input type="text" name="name" required  maxlength="15">

Поле <input type=“number”> використовує мах та min атрибути, щоб створити діапазон можливих значень (в нашому прикладі ми зробили мінімальний допустимий вік 18).

<input type="number" name="age" min="18" required>

• Ніжинський державний університет імені Миколи Гоголя
• <form> HTML тег
• Валідація
• Проста валідація форм з HTML5