35.Форми в мові html.

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

Форми – призначені для пересилання даних від віддаленого користувача до веб-сервера. З їх допомого можна організовувати діалог між користувачем і сервером.

Для тега <form> бажановказувати наступні атрибути:

action - цей атрибут визначає URL-адрес скрипта, який отримає дані з цієї форми. Наприклад, action="avto.php". Якщо вказати "порожню" адресу (тобто action=""), то браузер відправить дані форми цьому ж файлу, в якому і створена форма.

method - атрибут задає спосіб відправки даних на сервер. При значенні "get" дані будуть додані до URL-адресу скрипту, до якого і відправляються дані. В цьому випадку вони будуть видимі в адресному рядку браузера, що не дуже добре, оскільки їх зможе побачити користувач. Але ще є обмеження на довжину даних що передаються, обумовлені допустимою кількістю символів в адресному рядку браузера. При значенні "post" дані будуть відправлені у вигляді блоку даних, який не буде видимий дял користувача. І в цьому випадку об'ємданих практично нічим не обмежений. Тому дуже часто використовують саме метод "post".

<formaction="avto.php" method="post">

Створюємо текстове поле Самим простим елементом введення даних – є простетекстове поле. Для його створення я використавнаступний код.

<input type="text" name="pole" />

За допомогою атрибута value, ви можете присвоїти полю значення за замовчуванням. Користувачпобачитьцезначення при завантаженні форми, він зможе змінити його або залишити без змін. Цей атрибут зазвичай використовується як підказка для користувача. Наприклад якщо написати  <inputname=”pole” type=”text” value=”Введітьсвоєім’я”>, користувачзрозумієщотуди треба вписатисвоєім’я.

Створюємо текстову область

<textareaname="area" rows="6" cols="25">Цей текст буде значеннямцьогоелементаформи </textarea>

Цей елемент працює таким чином, що будь-який текст що oпиниться в середині конструкції <textarea></textarea>, буде вважатися значеням цього елемента. Створюємо поле для введеня пароля

<input type="password" name="password" />

Створюємоприховане поле Приховане поле може містити такі самі текстові значення як і текстове, але воно не буде відображатися для користувача у його браузері.

<input type="hidden" name="hidden" value="прихованезначення" />

Створюємо елементи вибору

Створюємо флажки

<input type="checkbox" name="сheckbox1" value="один" /> <input type="checkbox" name="сheckbox2" value="два" /> <input type="checkbox" name="сheckbox3" value="три" />

Флажок – це елементвибору типу checkbox. Флажок можемати атрибут value, але на відміну від інших елементів цей атрибут для флажків як правило не використовується. Текст, що знаходиться поруч із флажками, являється звичайним текстом.

Створюємо перемикачі Перемикачі (їхщеназивають «радіокнопками» та «кнопками виборуваріантів») використовуються тоді, коли потрібно щоб користувач вибрав лише один із запропонованих варіантів. В html перемикачі працюють так, що коли виобираєте один з них, то всіінші автоматично вимикаються.

<input type="radio" name="radio" value="101.1" /> <input type="radio" name="radio" value="103.5" /> <input type="radio" name="radio" value="106.1" />

Створюємовипадаючі списки Випадаючі списки створюються за допомогоюдвохрізнихелементів. Головним є елементselect, якийможеміститибезлічелементів

<select name="select" size="1"> <option value="value1">Item1</option><option value="value2">Item2</option> <option value="value3">Item3</option><option value="value4">Item4</option></select>

У елемента select, є атрибут name. А в елементів option є атрибути value. В програму потрапить лише те значення value, елемент якого буде обраний у випадаючому списку. Зауважте, щозначення атрибута value не відображається на сторінці, користувач буде бачитилише той текст, що знаходиться між елементами <option></option>. Створюємо список із множинним вибором В деяких ситуаціях, може бути коисноскористатисяще одним елементом вибору, він називається – список із множинним вибором. Він являється різновидом випадаючого списку, і створюється схожим способом.

<select name="list" size="7" multiple="multiple"><option value="value1">Item1</option> <option value="value2">Item2</option><option value="value3">Item3</option> <option value="value4">Item4</option><option value="value5">Item5</option> <option value="value7">Item6</option> <option value="value7">Item7</option></select>

Додаємо кнопки

Кожна із кнопок створена як варіант елемента input, але завдяки атрибуту type, у всіх цих кнопок різна дія. Код що покладений в основу сторінки демонстрації кнопок, наглядно показуєяким чином можна створювати кнопки всередині форм.

Начало формы

Конец формы

Кнопка із типом button, зазвичай використовується при програмуванні на стороні клієнта. Кнопка reset, повертає сторінку у її початковий стан. Кнопка submit, без усякого сумніву являється дуже важливим елементом програмування на стороні сервера. За допомогою цієї кнопки, забезпечується зв’язокміж формами та вашими програмами. Коли користувач заповнив усі поля форми, він натискає на кнопку Send, яка має тип submit. Після ціє дії, із даних у елементах форми формується пакет даних, який відправляється на обробку серверу.