Форми в HTML

Дуже часто необхідно отримати деякі дані від користувача, наприклад, логін, пароль чи E-mail при реєстрації відвідувача на сайті. Для цього використовуються форми HTML, за допомогою яких можна передавати текстові дані та файли. Слідує звернути уваго, що html-форми самі по собі дають можливість тільки вводити дані, а оброблювати їх HTML не вміє (так як це мова розмітки, а не програмування). Для обробки даних використовують частіше всього такі мови: javascript, php, pyton і інші.

Форми створюються за допомогою парного тегу <form> </form>.

Тег <form> використовує наступні атрибути:

name – ім'я   форми. Даний атрибут потрібний в тому випадку коли на сторінці використовують декілька форм.

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

method – атрибут  задає спосіб відправки даних на сервер. Даний атрибут може приймати значення "get" або "post".

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

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

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

<form action="avto.php" method="post">

Елементи форми

</form>

В даному випадку дані будуть відправлені програмі avto.php, яка записана мовою програмування  PHP, що знаходиться в тому ж каталозі, що і сторінка з даною формою. Дані передаються методом POST.

Якщо атрибут method не задано то по замовчуванню браузер використовує метод "get".

еnctype – цей атрибут визначає спосіб кодування даних, які введені в формудля відправки їх на сервер. По замовчуванню для цього атрибуту використовується значення "application/x-www-form-urlencoded". Якщо у формі передається файл, то необхідно використовувати значення "multipart/form-data".

target – цей атрибут  визначає в якому вікні будуть відображатись оброблені дані. Даний атрибут приймає наступні значення:

_blank – відкриває нове вікно браузера і завантажує в нього оброблені дані;

_self – завантажує оброблені дані в поточне вікно.

Якщо даний атрибут відсутній, то дані завантажуються в поточне вікно.

Тег <form> являє собою контейнер та налаштування форми, а елементи для введення даних створюються іншими тегами. І всі теги, що створюють елементи для введення даних, мають бути розташовані в коді HTML між тегами <form> </form>.

Існує декілька типів елементів для введення даних, почнемо з елементів, які можна створити тегом INPUT.

За допомогою непарного тегу <input />  можна створювати декілька типів елементів для введення даних, задаючи відповідне значення атрибуту type.

1.      Поле для введення тексту

Для створення однорядкового текстового поля потрібно використовувати значення атрибуту type="text". Для даного поля  можна задати ширину – атрибутом size, так і за допомогою каскадних таблиць стилів, використовуючи властивість width (також можна застосовувати і інші властивості CSS, наприклад, height). Атрибут name задає ім'я поля, по якому програма обробки на сервері визначить дані введені в це поле. Атрибут value задає початкове значення, яке буде записано в це текстове поле, як зразок. Обмежити кількість символів що вводяться користувачем в це поле можна атрибутом maxlength.

Приклад html-коду:

<form>

Ваше ім'я: <input type="text" size="20" value="То ти, Програміст?" maxlength="20" name="name_user">

 </form>

Ще існують два параметри для текстового поля введення це:

disabled – блокує поле від будь-яких змін;

readonly – робіть поле доступним тільки для читання.

Приклад html-коду:

   <form name="forma1">

    <input type="text" name="text1" size="20" maxlength="50" value="неактивне поле" disabled><br>

    <input type="text" name="text1" size="20" maxlength="50" value="тільки для читання" readonly>

   </form>

2.      Поле для введення пароля

Поле для введення пароля аналогічно полю для введення тексту, лише всі символи, що вводяться, представляється на екрані монітора різними спеціальними символами (наприклад, зірочками - "*"), для маскування введеного тексту від випадкових спостерігачів. Створюється таке поле атрибутом type="password" тега INPUT.

Приклад html-коду:

<form name="forma2">

Логін <input type="text" size="10" value="Програміст" maxlength="20" name="name_user"><br>

Пароль <input type="password" size="10" value="" maxlength="20" name="name_passw">  

</form>

3.      Перемикачі

Групу елементів "перемикачі" задається значенням атрибуту type="radio" тега INPUT. Причому поля однієї групи повинні мати однакове значення атрибуту name. У одній групі перемикачів користувач зможе вибрати лише одну кнопку, тобто перемикачі використовуються, коли треба вибрати одне з декількох значень. І на сервер відправиться значення value вибраної кнопки, а знайти її на сервері можна буде за значенням атрибуту name.

Приклад html-коду:

<form name="forma3">

Прграміст, забув пароль?<br>

<input type="radio" name="pol" value="M">Забув<br>

<input type="radio" name="pol" value="J">Я не програміст

</form>

Вибрати одне поле по замовчуванню, можна використовуючи атрибут checked.

Для "прив'язки" тексту пояснення до поля потрібно використовувати тег <label>, причому в атрибуті for слід вказати ідентифікатор (id) відповідного поля.

Приклад html-коду:

<form name="forma4">

Прграміст, ти обробиш форму чи ні?<br>

<input type="radio" name="test" value="tv"id="test_tv">

<label for="test_tv">Оброблю</label><br>

<input type="radio" name="test" value="int" id="test_int" checked="checked">

<label for="test_int">Можливо </label><br>

<input type="radio" name="test" value="rad" id="test_rad">

<label for="test_rad">

Не оброблю</label>

</form>

При перегляді цього прикладу, Ви побачите, що поле з міткою Можливо буде вже вибрано.

4.      Прапорці

За допомогою прапорців можна організувати список, в якому кожен пункт можна або вибрати, або відмінити вибір. При цьому можна вибрати або декілька пунктів, або всі пункти списку, або жодного. Створюються прапорці атрибутом type="checkbox" елементу INPUT. Також мають бути атрибути name і value. При відправці форми до даних будуть додані поля вибраних прапорців у вигляді значення атрибутів name і value.

Приклад html-коду:

<form name="forma4">

Непрацює клава? Вибери слово ідентифікатор. <br>

<input type="checkbox" name="info_html" value="v1">Живчик<br>

<input type="checkbox" name="info_js"

value="v2" checked="checked">Пиво<br>

<input type="checkbox" name="info_php" value="v3">Кока-кола<br>

<input type="checkbox" name="info_php" value="v3">Компот

</form>

Для вказівки на вибраний елемент можна використовувати атрибут checked. Точно так як і при використанні перемикачів можна використовувати для "привязки" пояснюючого тексту тег <label>.

5.      Поле вибору файлу

Разом з даними форми можна передавати також вміст файлів. Для вибору файлу можна створити поле вибору файлу за допомогою атрибуту type="file" тега INPUT. В цьому випадку відображуватиметься текстове поле, для введення імені файлу і кнопка, при натисненні на яку з'явиться вікно вибору файлу. Після вибору файлу в цьому вікні, його ім'я буде автоматично введено в текстове поле.

Приклад html-коду:

<form name="forma5">

Програміст, це ти! Вибери скрипт. <input type="file" name="img_file">

</form>

6.      Кнопка відправки даних форми

Створити кнопку для відправки даних форми можна за допомогою атрибуту type="submit" тега INPUT. Напис на кнопці можна задати атрибутом value. Також даний елемент може мати атрибут name.

Приклад html-коду:

<form name="forma6">

Тепер відправ дані для обробки.

<input type="submit" value="Жми сюди" name="submit_form">

</form>

7.      Кнопка "резет"

При натисненні на кнопку "резет" всі поля форми набувають вихідних значень (значення по замовчуванню). Створюється кнопка "резет" атрибутом type="reset" тега INPUT. Напис на кнопці можна задати атрибутом value.

Приклад html-коду:

<form name="forma7">

Не той скрипт. Скинь налаштування.

<input type="reset" value="">

<br>

<input type="submit" value="Жми сюди" name="submit_form">

</form>

8.      Кнопка довільного призначення

Подібні кнопки по замовчуванню не призводять до якихось дій. Таким кнопкам потрібно задавати фунціїї на клієнтських мовах програмування, зазвичай для цього використовують JavaScript. Такі кнопки створюються за допомогою атрибуту type="button" тега INPUT. Напис на кнопці задається атрибутом value. Також такі кнопки можуть містити атрибут name.

Приклад html-коду:

<form name="forma8">

<input type="button" value="Спробуй ще." name="control">

</form>

9.      Приховані поля форми

Приховані поля форми не відображуються на екрані монітора, але значення таких полів передаються разом з останніми даними форми серверу. Поля такого типу використовуються для передачі даних між клієнтом і сервером,і ці поля непотрібно бачити користувачеві. Створюються приховані поля форми за допомогою атрибуту type="hidden" тега INPUT.

Приклад html-коду:

<form name="forma9">

<input type="hidden" name="set_form" value="new">

</form>

Наступним тегом для створення елементів введення даних, яке ми розглянемо, буде тег TEXTAREA.

За допомогою тега <textarea> і його обов'язкового закриваючого тега </textarea> можна створити багаторядкове поле для введення тексту. Атрибутом rows можна задати число рядків текстового поля. Атрибутом cols можна задати ширину текстового поля, виражену шириною середнього символу.

Приклад html-коду:

<form name="forma10">

<textarea cols="30" rows="10" name="massiv_text">Передаю привіт всім хто мене знає. Програміст.</textarea>

</form>

Текст, що знаходиться між відкриваючим тегом <textarea> і закриваючим тегом </textarea>, трактуватиметься як вміст текстового поля по замовчуванню.

За допомогою тега SELECT створюються списки, що розкриваються.

Для створення списку, що розкривається, використовується тег <select> з обов'язковим закриваючим тегом </select>. Кожен пункт списку створюється тегом <option> і закриваючим тегом </option>. Значення атрибуту value вибраного пункту списку буде передано на сервер при відправці даних форми.

Приклад html-коду:

<form name="forma11">

Передаю привіт.<br>

<select name="tema" size="1">

<option value="tema_wd">Мамі.</option>

<option value="tema_wp">Друзям.</option>

<option value="tema_rs">Всім</option>

</select>

</form>

Значение атрибуту size в тегу SELECT визначає кількість рядків, що одночасно відображуються, в списку. Якщо значення атрибуту size буде більше 1, то браузер замість списку, що розкривається, відображуватиме прокручуваний список, з елементами управління (при необхідності). Атрибут multiple в тегу SELECT допускає одночасно вибрати декілька пунктів із списку.