До розділу

Робота з формами

https://www.w3schools.com/html/html_forms.asp

Тег <form> встановлює форму на веб-сторінці. Форма призначена для обміну даними між користувачем і сервером. Область застосування форм не обмежена відправкою даних на сервер, за допомогою клієнтських скриптів можна отримати доступ до будь-якого елементу форми, змінювати його і застосовувати на власний розсуд. Документ може містити будь-яку кількість форм, але одночасно на сервер може бути відправлена тільки одна форма. З цієї причини дані форм повинні бути незалежні один від одного.

<form action="/formprocess">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Надіслати">
</form>
<p>Якщо натиснути кнопку «Надіслати», дані форми будуть надіслані за url "/formprocess".</p> 

Якщо натиснути кнопку «Надіслати», дані форми будуть надіслані на сторінку під назвою "/formprocess".

Приклад подібної форми можна перевірити тут

Елемент form

Елемент HTML <form> використовується для створення HTML-форми для введення користувачами:

 <form>
 .
 *form elements*
 .
 </form>

Елемент <form> є контейнером для різних типів елементів введення, таких як: текстові поля, прапорці, перемикачі, кнопки надсилання тощо.

Атрибути форми

Target

Атрибут target означує, де відображати відповідь, отриману після надсилання форми. Атрибут target може мати одне з таких значень:

Значення за замовчуванням – _self, що означає, що відповідь відкриється в поточному вікні. Тут надісланий результат відкриється в новій вкладці браузера:

<form action="/action_page.php" target="_blank"> 

Method

Атрибут method означує метод HTTP, який буде використовуватися під час надсилання даних форми. Дані форми можна надіслати як змінні URL-адреси (з method="get") або як пост-транзакцію HTTP (з method="post"). Метод HTTP за замовчуванням під час надсилання даних форми — GET.

<form action="/action_page.php" method="get"> 

<form action="/action_page.php" method="post"> 

Примітки щодо GET:

• Додає дані форми до URL-адреси в парах ім’я/значення
• НІКОЛИ не використовуйте GET для надсилання конфіденційних даних! (надіслані дані форми видно в URL!)
• Довжина URL-адреси обмежена (2048 символів)
• Корисно для надсилання форм, коли користувач хоче додати результат до закладок
• GET добре підходить для незахищених даних, таких як рядки запиту в Google

Примітки щодо POST:

• Додає дані форми в тіло HTTP-запиту (надіслані дані форми не відображаються в URL-адресі)
• POST не має обмежень за розміром і може використовуватися для надсилання великих обсягів даних.
• Надсилання форм за допомогою POST не можна додавати в закладки

Порада: завжди використовуйте POST, якщо дані форми містять конфіденційну або особисту інформацію!

Спеціальні атрибути елементів форми

Деталі

Елемент label

Зверніть увагу на використання елемента <label> у прикладі.

 <form>
     <label for="fname">First name:</label><br>
     <input   type="text" id="fname" name="fname"><br>
     <label for="lname">Last   name:</label><br>
     <input type="text" id="lname" name="lname">
</form> 

Тег <label> означує мітку для багатьох елементів форми. Елемент <label> корисний для користувачів програм зчитування з екрана, оскільки програма зчитування з екрана вголос читатиме мітку, коли користувач фокусується на елементі введення. Елемент <label> також допомагає користувачам, яким важко клацати дуже маленькі області (наприклад, перемикачі або прапорці), тому що коли користувач клацає текст в елементі <label>, він перемикає перемикач/прапорець .

Атрибут for тегу <label> має дорівнювати атрибуту id елемента <input>, щоб зв’язати їх разом.

Деталі

Елемент input

Елемент HTML <input> є найбільш використовуваним елементом форми. Елемент <input> може відображатися різними способами, залежно від атрибута type. Ось кілька прикладів:

Деталі по елементу

Атрибут Name для input

Зауважте, що кожне поле введення повинно мати атрибут name для надсилання. Якщо атрибут name пропущено, значення поля введення не надсилатиметься взагалі. У цьому прикладі не надсилатиметься значення поля введення «First name»:

 <form action="/action_page.php">
 <label for="fname">First   name:</label><br>
 <input type="text" id="fname" value="John"><br><br>
   <input type="submit" value="Submit">
</form> 

Type Text

<input type="text"> означує однорядкове поле для введення тексту.

Приклад форми з полями для введення тексту:

 <form>
     <label for="fname">First name:</label><br>
     <input   type="text" id="fname" name="fname"><br>
     <label for="lname">Last   name:</label><br>
     <input type="text" id="lname" name="lname">
</form> 

Type Radio Buttons

Тип <input type="radio"> означує перемикач. Перемикачі дозволяють користувачеві вибрати ОДИН із обмеженої кількості варіантів.

<p>Choose your favorite Web language:</p>
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form> 

Наведений код матиме викгляд:

Choose your favorite Web language:

Type Checkboxes

Тип <input type="checkbox"> визначає прапорці. Прапорці дозволяють користувачеві вибрати НУЛЬ або БІЛЬШЕ варіантів з обмеженої кількості варіантів. Форма з прапорцями:

 <form>
 <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
   <label for="vehicle1"> I have a bike</label><br>
 <input   type="checkbox" id="vehicle2" name="vehicle2" value="Car">
 <label for="vehicle2">   I have a car</label><br>
 <input type="checkbox"   id="vehicle3" name="vehicle3"   value="Boat">
 <label for="vehicle3"> I have a boat</label>
 </form> 

Type Submit Button

Тип <input type="submit"> визначає кнопку для надсилання даних форми обробнику форми. Обробник форми зазвичай є файлом на сервері зі сценарієм для обробки вхідних даних. Обробник форми вказується в атрибуті action форми. Форма з кнопкою відправки:

 <form action="/action_page.php">
 <label for="fname">First   name:</label><br>
 <input type="text" id="fname" name="fname"   value="John"><br>
 <label for="lname">Last name:</label><br>
   <input type="text" id="lname" name="lname" value="Doe"><br><br>
   <input type="submit" value="Submit">
</form> 

Type Number

<input type="number"> означує числове поле введення. Ви також можете встановити обмеження на те, які цифри приймаються. У наступному прикладі показано числове поле введення, куди можна ввести значення від 1 до 5:

 <form>
 <label for="quantity">Quantity (between 1 and   5):</label>
 <input type="number" id="quantity" name="quantity"   min="1" max="5">
</form> 

Спеціальні атрибути input

Ось список деяких поширених обмежень щодо введення:

У наступному прикладі показано числове поле введення, куди можна ввести значення від 0 до 100 із кроком 10. Значення за замовчуванням — 30:

<form>
    <label for="quantity">Quantity:</label>
    <input   type="number" id="quantity" name="quantity" min="0" max="100" step="10"   value="30">
</form> 

Елемент select

Елемент <select> означує розкривний список:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> 

Volvo Saab Fiat Audi

Елемент <option> означує параметр, який можна вибрати. За замовчуванням вибрано перший пункт у розкривному списку. Щоб визначити попередньо вибрану опцію, додайте до неї атрибут selected:

 <option value="fiat" selected>Fiat</option> 

Використовуйте атрибут size, щоб вказати кількість видимих значень:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> 

Volvo Saab Fiat Audi

Використовуйте атрибут multiple, щоб дозволити користувачеві вибрати більше одного значення:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> 

Volvo Saab Fiat Audi

Деталі

Елемент textarea

Елемент <textarea> означує багаторядкове поле введення (текстова область). Атрибут rows визначає видиму кількість рядків у текстовій області. Атрибут cols визначає видиму ширину текстової області.

<textarea name="message" rows="10" cols="30">
	The cat was playing in the garden.
</textarea>

You can also define the size of the text area by using CSS:

<textarea name="message"   style="width:200px; height:200px;">
	The cat was playing in the garden.
</textarea> 

Деталі

Елемент button

Елемент <button> означує кнопку, яку можна натиснути:

<button type="button"  onclick="alert('Hello World!')">Click Me!</button>

Click Me!

Примітка: завжди вказуйте атрибут type для елемента кнопки. Різні браузери можуть використовувати різні типи за замовчуванням для елемента кнопки.

Деталі

Елементи fieldset і legend

Елемент <fieldset> використовується для групування пов’язаних даних у формі. Елемент <legend> означує заголовок для елемента <fieldset>.

<form action="/action_page.php">
    <fieldset>
        <legend>Personalia:</legend>
        <label for="fname">First   name:</label><br>
        <input type="text" id="fname" name="fname"   value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
    </fieldset>
</form>  

Деталі filedset

Деталі legend

Елемент datalist

Елемент <datalist> означує список попередньо означених параметрів для елемента <input>. Під час введення даних користувачі бачитимуть розкривний список із попередньо означеними параметрами. Атрибут list елемента <input> має посилатися на атрибут id елемента <datalist>.

<form action="/action_page.php">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist> 
</form>