This page has been robot translated, sorry for typos if any. Original content here.

вставка мультимедіа

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

Щоб зрадити Вашому сайту елементи інтерактивності треба застосовувати форми. Зворотній зв'язок з відвідувачами - це найважливіша область у розвитку та ефективності вашого сайту. Форми можна умовно розділити на чотири категорії:

  1. Для опитування відвідувачів. Дає можливість відповідати на заздалегідь підготовлені питання з варіантами відповідей на них або вільними текстовими полями, які заповнюються ними самостійно. З їх допомогою Ви в реальному часі отримаєте потрібну Вам інформацію.
  2. Форма для відгуків. Сюди можна віднести наприклад популярну "гостьову книгу". Вона дає можливість відвідувачам висловлювати свою думку, писати про свої проблеми та питання, вносити пропозиції і зауваження або приносити подяки.
  3. Для збору даних. Служать в основному елементом при реєстрації користувача сайту. Має вигляд звичайної анкети.
  4. Різні поля введення (пошук, введення пароля і т. Д).

Всі дані зазначені в формі обробляються і передаються за допомогою сценаріїв, написаний на мовах програмування Perl (розширення файлу .cgi) і PHP (з розширенням .php).

Для розміщення форми на веб-сторінці застосовується тег <FORM> з атрибутами:

  • ACTION - активує застосовуваний до форми файл сценарію.
  • NAME - ідентифікує форму.
  • METHOD - метод передачі даних форми. Значення: "post" (відправка на e-mail) і get (на домен).

Але всього цього не буде достатньо, щоб на сторінці з'явилася форма. Потрібна додаткова інформація в HTML-коді, яка б описувала різні елементи форми. Ними можуть бути різні поля для введення, кнопки, перемикачі та ін. Будемо розглядати їх по порядку.

поля введення

Призначені для введення невеликого тексту або символів (введення пароля). Вони являють собою виділені рамкою ділянки сторінки, по висоті обмежені розміром шрифту і поруч написаним інформаційним додатком. З технічної точки зору це здійснюється наступним чином. Береться універсальний при складанні форм тег <INPUT>, до якого потім присвоюються атрибути:

  • TYPE - вказує на тип інформації, що вводиться. Значення: text (текст), password (зірочки) і hidder (інформація не буде показана).
  • NAME - привласнює ім'я полю.
  • SIZE - довжина поля. (Значення вказується в кількості символів)
  • MAXLENGHT - обмеження на кількість символів.
  • VALUE - використовується в тих випадках, коли потрібно заповнити поля для введення будь-якою інформацією на момент завантаження сторінки.

Примітка: Інформаційне додаток до поля можна записувати в коді, як до, так і після тега <INPUT>. Приклад створення поля для введення пароля:

<INPUT TYPE = "text" NAME = "login" SIZE = "12" VALUE = "ваш логін"> Логін

Пароль <INPUT TYPE = "password" NAME = "pass" SIZE = "25" MAXLENGHT = "24" VALUE "Максимум 24 символи">

Після складання даного коду Ви побачите в браузері форму, але не знайдете в ній звичних кнопок. Мова про них піде далі.

текстові поля

Такі поля відрізняються від полів введення тим, що в них можна вводити необмежено текст. Тому вони забезпечені смугою прокрутки. Для розміщення текстових полів на сторінці в мові HTML призначений тег <TEXTAREA>, якому можуть бути присвоєні такі атрибути:

  • COLS - ширина вікна (у кількості символів).
  • ROWS - висота вікна (у кількості символів).
  • NAME - інформація для ідентифікації.
  • VALUE - інформація у вікні на момент завантаження.

Поля для передачі файлів

Служать для відправки будь-якого файлу разом з даними введених в форму. Для того, щоб це здійснити потрібно створити саму форму за допомогою тега <INPUT> і атрибута TYPE зі значенням "file". Потім виробляємо активацію файлу сценарію за допомогою атрибута ACTION і все готово.

кнопки

Кнопки в основному призначені для відправки даних, записаних в форму, або для скидання інформації в формі. У першому випадку в атрибуті TYPE тега <INPUT> вказується значення submit, у другому - reset. Для відображення кнопок на сторінці потрібно до тегу <INPUT> ще додати вже Вам добре знайомі атрибути VALUE І NAME. У формах також застосовуються і інші більш складні і "наворочені" кнопки, які працюють вже безпосередньо зі сценаріями JavaScript.

Перемикачі та прапорці

У цій області вони знаходять застосування для опитування відвідувачів сайту, за допомогою вибору заздалегідь підготовлених варіантів. При приміщенні перемикачів на сторінку, застосовується все ті ж тег <INPUT> і атррібут TYPE, значення у якого будуть:

  • radio - позначення перемикача в мові HTML.
  • name - ідентифікатор перемикача. (Для всіх перемикачів однієї групи повинні бути обов'язково присвоєні однакові значення).
  • value - ідентифікатор перемикача, який був обраний відвідувачем. (Значення для кожного перемикача в одній групі повинні бути вказані різні значення.
  • selected cheked - показує, який перемикач буде включений в момент завантаження.

Прапорці, за принципом дії відрізняються від перемикачів тим, що за допомогою них можна виділити як один елемент зі списку, так і всі або не одного. В атрибуті TYPE вони позначаються значенням checkbox. Крім вищевказаного атрибута в тезі <INPUT> атрибути NAME і CHECKED. У першому призначають ім'я елемента. Другий ставиться за бажанням, він буде визначати, який з елементів буде мають позначки за замовчуванням.

Списки і

Такі списки часто зустрічаються не тільки на веб-сторінках, але і в різних інших комп'ютерних програмах, де із запропонованого списку потрібно вибрати щось одне. Наприклад назва шрифту в текстовому редакторі.

Складаються списки, що розкриваються в HTML-коді наступним чином. У контейнер <SELECT> додаються контейнери <OPTION>, де кожен контейнер <OPTION> буде одним елементом зі списку. При цьому до Тегу <SELECT> присвоюються знайомі Вам атрибути NAM E і SIZE, а до Тегу <OPTION> - VALUE і SELECTED (вибір елемента списку за замовчуванням).

Всі перераховані вище форми на практиці знаходять застосування в основному спільно зі сценаріями JavaScript, про який браузеру потрібно повідомити в контейнері <HEAD>.

Якщо застосування форм здійснюється комплексом, то при їх компонуванні на сторінці найзручніше використовувати табличний метод.