68932

Форми в HTML-документах. Елементи форм

Лекция

Информатика, кибернетика и программирование

Форма в HTML-документі реалізується тегом-контейнером FORM, в якому задаються всі елементи, що управляють, — поля введення, кнопки і т.д. Якщо елементи, що управляють, вказані поза вмістом тега FORM, то вони не створюють форму, а використовуються для побудови призначеного для користувача...

Украинкский

2014-09-27

109.5 KB

0 чел.

Лекція № 8

Тема: Форми в HTML-документах. Елементи форм.

Теги FORM та INPUT.

План

  1.  Загальні положення
  2.  Елементи форм
  3.  Тег FORM
  4.  Тег INPUT

Загальні положення

Форми призначені для відправки інформації CGI-додатку, тобто нашому сценарію. Розглянемо просту форму введення імені:

<form   action="http://localhost/l.php"   method="GET">

Ім'я:   <input   type=text   name=username><br>

<input   type=submit   value="Відправити"> </form>

Дана форма містить всього два елементи — поле для введення імені і кнопку з написом «Передати». Що ж відбувається, коли користувач вводить ім'я і натискає на кнопку «Передати»? Браузер передасть сценарію l.php параметр user_name. Як значення параметра буде введене користувачем ім'я. Оскільки використовується метод GET, то в рядку адреси ви побачите:

http://localhost/l.php?username=Denis

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

Форма в HTML-документі реалізується тегом-контейнером FORM, в якому задаються всі елементи, що управляють, — поля введення, кнопки і т.д. Якщо елементи, що управляють, вказані поза вмістом тега FORM, то вони не створюють форму, а використовуються для побудови призначеного для користувача інтерфейсу на WEB-сторінці, тобто для того, що привнесло в неї різних кнопок, прапорців, полів введення. Обробка таких елементів проводиться індивідуально в рамках самого HTML-документа за допомогою включених в нього скриптів. А можуть взагалі ніяк не оброблятися. Наприклад, елемент (тег) ТЕХТАRЕА, що управляє, часто використовується для створення вікна із смугою прокрутки усередині документа для виведення великого тексту, який грає другорядну роль. Зазвичай так відображаються тексти ліцензійних угод, тексти великих коментарів або правила користування даним WEB-ресурсом.

Імена елементам форми привласнюються через їх атрибут NAME.

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

У HTML 4.01 визначені наступні типи елементів, що управляють:

- Кнопки — задаються за допомогою елементів BUTTON і INPUT. Розрізняють:

  •  кнопки відправки — при натисненні на них здійснюють відправку форми серверу;
  •  кнопки скидання — при їх натисненні встановлюють керівники елементи в первинні значення;
  •  інші кнопки — кнопки, для яких не вказана дія виконуване за умовчанням при їх натисненні.

- Залежні перемикачі (перемикачі із залежною фіксацією) —задаются елементом INPUT і є перемикачами «вкл/викл». Якщо декілька залежних перемикачів мають однакові імена, то вони є взаимовиключними. Це означає, що якщо одна з них ставиться в положення «вкл», то всі інші автоматично — в положення «викл». Саме це і є перевагою їх використання.

- Незалежні перемикачі (перемикачі з незалежною фіксацією)  — задаються елементом INPUT і є перемикачами «Вкл/викл», але на відміну від залежних, незалежні перемикачі можуть приймати і змінювати своє значення незалежно від решти перемикачів.   Навіть якщо останні мають таке ж ім'я.

- Меню — реалізується за допомогою елементів SELECT, OPTGROUP і OPTION. Меню надають користувачеві список можливих варіантів вибору.

- Введення тексту — реалізується елементами INPUT, якщо вводиться один рядок, і елементами TEXTAREA — якщо декілька рядків. В обох випадках введений текст стає поточним значенням елементу, що управляє.

- Вибір файлів — дозволяє разом з формою відправляти вибрані файли, реалізується HTML-елементом INPUT.

- Приховані елементи, що управляють, — створюються елементом INPUT, що управляє.

Як бачите, дуже багато елементів задаються за допомогою одного і того ж тега INPUT. Цей тег дійсно є універсальним.

Тег FORM - контейнер форм

Як вже мовилося, форма в HTML-документі реалізується тегом-контейнером FORM. Цей тег своїми атрибутами указує адреса сценарію, якому буде послана форма, спосіб пересилки і характеристику даних, що містяться у формі. Початковий і кінцевий теги FORM задають межі форми, тому їх вказівка є обов'язковою. Проте атрибути тега FORM детально розглянути все-таки слідує:

- action — єдиний обов'язковий атрибут. У якісного значення указується URL-адреса запрошуваної CGI-програми, яка оброблятиме дані, що містяться у формі. Допустимо використовувати запис MAILTO:URL, завдяки якому форма буде послана по електронній пошті. Якщо атрибут ACTION все-таки не вказаний, то вміст форми буде відправлений на URL-адресу, з якої завантажувалася дана WEB-сторінка.

- method — визначає метод НТТР, використовуваний для пересилки даних форми від браузера до сервера. Атрибут METHOD може приймати два значення: get або post.

- enctype — необов'язковий атрибут. Указує тип вмісту форми, використовуваний для визначення формату кодування при її пересилці

Тег INPUT і способи його використання

Елемент INPUT є найбільш споживаним тегом, оскільки з його допомогою реалізуються основні функції форми. Він дозволяє створювати усередині форми поля введення рядка тексту, імені файлу, пароля і ін.

Звернете увагу на особливість INPUT — у нього немає кінцевого тега. Атрибути і особливості використання INPUT залежать від способу його використання. Ці способи ми зараз і розглянемо.

Однорядкові поля введення

Найчастіше використовуються поля введення — адже навіть кнопка є полем введення. Ми вже знайомі з полем введення текстової інформації, тому огляд полів введення почнемо саме з текстового поля. Формат тега INPUT для створення поля введення текстового рядка:

<input type=text name=имя_параметра

[value=3Ha4eHMe] [size=pa3Mep] [maxlen=длина] >

Даний тег створює поле введення з максимально допустимою довжиною тексту maxlen і розміром в size знакомісць. Якщо заданий атрибут value, то в полі спочатку відображатиметься вказаний рядок. У квадратних дужках помічені необов'язкові атрибути..

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

Можливо, ви створюєте який-небудь серйозний проект, що вимагає авторизації, тобто перевірки імені користувача і пароля. Звичайно, ім'я користувача можна ввести за допомогою звичайного текстового поля.

А ось як бути з паролем? Адже він не повинен відображатися на екрані? В цьому випадку вам допоможе поле введення пароля:

<input   type=password name=имя_параметра [vа1ие=значение] [size=pa3Mep] [maxlen=длина]>

Принцип роботи даного тега такий самий, як і текстового. Різниця полягає в тому, що інформація, що вводиться, в полі не відображається, а замінюється «зірочками».

Слід мати на увазі, що не рекомендується встановлювати значення vaIue (значення за умовчанням) з міркувань безпеки. Так, у вікні браузера дане значення не відображається, та варто проглянути початковий HTML-код, пароль буде видний «неозброєним оком».

Приховане текстове поле

Для передачі службовій інформації (про яку користувач навіть не повинен підозрювати) використовуються приховані поля. За допомогою таких полів, наприклад, можуть передаватися параметри настройки.

<input   type=hidden name=имя  value=значение >

Такі поля передаються серверу, але на Web-сторінці не відображаються.

Незалежні перемикачі

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

Реалізувати це можна знову ж таки за допомогою тега INPUT. Для цього тільки необхідно як значення атрибуту type вказати checkbox:

<input   type=checkbox пате=имя уа1ие=значение [checked]>

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

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

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

Використання незалежних перемикачів checkbox

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

Залежні перемикачі

Залежний перемикач, так само як і незалежний перемикач, може бути або включений, або вимкнений. При цьому перемикач radio є залежним перемикачем, оскільки на формі може бути тільки один включений перемикач типу radio. Точніше, якщо у формі присутні декілька однойменних залежних перемикачів, то включений з них може бути тільки один. При виборі одного перемикача всі однойменні залежні перемикачі автоматично вимикаються. Як ім'я перемикачів сприймається значення атрибуту name. Може бути тільки один активний перемикач. Розглянемо такий приклад, приведений в лістингу.

Форма із залежними перемикачами

<form action="http://localhost/sex.php"   method="post"> <input type=radio

name=sex

value=male

checked>

Чоловік
<input type=radio

name=sex value=female>

Жінка
<input type=submit

name=go уа1ие=Передать>

</form>

У вікні браузера наша форма виглядатиме таким чином

Перший перемикач (із значенням Male) активний за умовчанням (ми встановили
атрибут
checked). Як тільки користувач натисне кнопку Передати, сценарію
sex.php буде переданий параметр sex (атрибут name
Залежні перемикачі radio
обох перемикачів) з значенням Male. Якщо ж користувач вибере інший варіант (female), сценарію буде передано відповідне значення параметра sex.

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

Останніми елементами управління типа INPUT є кнопки. Кнопка відправки служить для відправки сценарію введених у форму значень. Синтаксис тега INPUT при цьому такий:

<input   type=submit [name=go] vаluе=Передати>

Атрибут value визначає текст, який буде написаний на кнопці відправки. Атрибут name визначає ім'я кнопки і є необов'язковим. Якщо значення цього атрибуту не указувати, то скрипту будуть передані введені у форму значення і все. Якщо ж атрибут name для кнопки буде вказаний, то додатково до даним форми буде відправлена пара имя=значение від самої кнопки. Я раджу обов'язково указувати цей атрибут — він нам дуже пригодится при програмуванні на PHP.

Подивитися, як виглядає кнопка відправки, можна на мал. 6.1.

Кнопка скидання

Окрім кнопки submit є еше кнопка reset, яка скидає форму — встановлює для всіх елементів форми значення за умовчанням. Бажано, щоб на вашій формі була така кнопка, особливо, якщо це велика форма. Наявність даної кнопки полегшує очищення форми, якщо були введені неправильні параметри.

<input   type=reset value=C6poc>

Кнопка відправки з індивідуальним малюнком

Замість кнопки submit можна використовувати малюнок для відправки даних. При клацанні на цьому малюнку відбудеться те ж, що і при натисненні на кнопку submit. Проте, окрім цього, сценарію будуть передані координати місця твору клацання на малюнку. Координати будуть передані у форматі: имя.х=коор_Х, имя.у=коор_У.

<input   type=image name=имя src=малюнок>


 

А также другие работы, которые могут Вас заинтересовать

11573. Измерение коэффициента вязкости жидкости методом Стокса 146.5 KB
  Лабораторная работа № 5 Измерение коэффициента вязкости жидкости методом Стокса Оборудование: Стеклянные цилиндрические сосуды с исследуемой жидкостью мелкие шарики измерительный микроскоп аналитические весы пикнометр секундомер масштабная линейка. ...
11574. Изучение температурной зависимости коэффициента вязкости жидкости с помощью капиллярного вискозиметра 101 KB
  Лабораторная работа № 6 Изучение температурной зависимости коэффициента вязкости жидкости с помощью капиллярного вискозиметра Оборудование: капиллярный вискозиметр аспиратор стеклянный термостатирующий сосуд электродвигатель с мешалкой термометр электро
11575. Определение коэффициента поверхностного натяжения жидкости методом отрыва кольца 94.5 KB
  Лабораторная работа № 7 Определение коэффициента поверхностного натяжения жидкости методом отрыва кольца Оборудование: лабораторные весы тонкое алюминиевое кольцо на трифилярной подвеске станина с вертикально перемещаемым столиком и часовым индикатором пере...
11576. Изучение шифраторов, дешифраторов и преобразователей кодов 211.32 KB
  Изучение шифраторов дешифраторов и преобразователей кодов Цель работы. Изучить назначение принципы построения и структуры шифраторов дешифраторов и преобразователей кодов. 1 Краткие сведения из теории Дешифратором декодером называется устройство рас...
11577. Минимизация функций алгебры логики и построение дискретных схем с использованием логического конвертера программы электронная лаборатория 224.91 KB
  Минимизация функций алгебры логики и построение дискретных схем с использованием логического конвертера программы электронная лаборатория Цель работы. Научиться минимизировать функции алгебры логики ФАЛ получать совершенную дизъюнктивную нормальную форму С
11578. Создание модели данных с помощью Allfusion ERwin Data Modeler 93.57 KB
  Лабораторная работа 4 по дисциплине: Проектирование и архитектура программного проектирования На тему: Создание модели данных с помощью Allfusion ERwin Data Modeler Цель работы: Знакомство с CASEсистемой Allfusion ERWin Data Modeler изучение основных принципов построения логической
11579. Создание логической модели данных с помощью Allfusion ERwin Data Modeler 106.68 KB
  Лабораторная работа 5 по дисциплине: Проектирование и архитектура программного проектирования На тему: Создание логической модели данных с помощью Allfusion ERwin Data Modeler Цель работы: Развитие логической модели. Ход работы: Как было указано выше связи определяют
11580. Создание физической модели данных с помощью Allfusion ERwin Data Modeler 122.49 KB
  Лабораторная работа 6 по дисциплине: Проектирование и архитектура программного проектирования На тему: Создание физической модели данных с помощью Allfusion ERwin Data Modeler Цель работы: Создание физической модели. Ход работы: Различают два уровня физической модели: ...
11581. Проект участка на базе станков с ЧПУ по изготовлению деталей колёсного тягача 2.08 MB
  Тема: Проект участка на базе станков с ЧПУ по изготовлению деталей колёсного тягача. Содержание. Аннотация. Введение. Характеристика объектов производства. Технологический раздел. Определение типа производства. Анализ технологичности дета