Форми в HTML

Категорії статей: HTML ; 11.07.2009

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

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

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

Наведу приклад форми

Код
<form action="avto.php" method="post">
...
</form>

В даному випадку дані будуть відправлені скрипту avto.php що знаходиться в тому ж каталозі, що і файл з даною формою, методом POST.
Так само в тегу <form> може бути вказаний атрибут enctype, який задає тип вмісту, використовуваного для відправки даних форми на сервер. По замовчуванню для цього атрибуту використовується значення "application/x-www-form-urlencoded". Якщо у формі передається файл (у формі є елемент INPUT з атрибутом type="file", про це буде написано далі) то необхідно використовувати значення "multipart/form-data".

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

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

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

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

Код
Ваше ім'я: <input type="text" size="20" value="То ти, Стьопа?" maxlength="20" name="name_user">

Отримаємо в браузері:

Ваше ім'я:

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

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

Код
Логін <input type="text" size="10" value="
Стьопа" maxlength="20" name="name_user"><br>
Пароль <input type="password" size="10" value="" maxlength="20" name="name_passw">

Отримаємо в браузері:

Логін
Пароль

Перемикачі

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

Код
Сьопа, забув пароль?<br>
<input type="radio" name="pol" value="M">Забув<br>
<input type="radio" name="pol" value="J">Я не Стьопа

Отримаємо в браузері:

Сьопа, забув пароль?
Забув
Я не Стьопа

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

Код
<form>
Степан, ти обробиш форму чи ні?<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>

Отримаємо в браузері:

Степан, ти обробиш форму чи ні?


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

Прапорці

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

Код
Непрацює клава? Вибери слово ідентифікатор. <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">Компот

Отримаємо в браузері:

Непрацює клава? Вибери слово ідентифікатор.
Живчик
Пиво
Кока-кола
Компот
Для вказівки на вибраний елемент можна використовувати атрибут checked. Точно так як і при використанні перемикачів можна використовувати для "привязки" пояснюючого тексту тег <label>.

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

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

Код
Стопа, це ти! Вибери скрипт. <input type="file" name="img_file">

Отримаємо в браузері:

Стопа, це ти! Вибери скрипт.

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

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

Код
<form>
Тепер запусти скрипт.
<input type="submit" value="Дмухни сюди" name="submit_form">
</form>

Отримаємо в браузері:

Тепер запусти скрипт.

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

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

Код
<form>
Не той скрипт. Скинь налаштування.
<input type="reset" value="">
<br>
<input type="submit" value="Дмухни сюди" name="submit_form">
</form>

Отримаємо в браузері:

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

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

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

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

Отримаємо в браузері:

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

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

Код
<input type="hidden" name="set_form" value="new">


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

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

Отримаємо в браузері:

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

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

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

Код
<form>
Передаю привіт.<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 допускає одночасно вибрати декілька пунктів із списку.

По зовнішнім джерелам

Один комментарий на запись “Форми в HTML”

  1. Майя пишет:

    спасибо за инфу

Залишити коментар

Перепечатка любых материалов © 2013 без разрешения автора запрещена. | 2.58MB | 0.02Sec ad Google