68932

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

Лекция

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

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

Украинкский

2014-09-27

109.5 KB

1 чел.

Лекція № 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=малюнок>


 

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

32876. СРЕДНЕВЕКОВАЯ ФИЛОСОФИЯ. ОТЦЫ ЦЕРКВИ. ВАСИЛИЙ ВЕЛИКИЙ, ГРИГОРИЙ БОГОСЛОВ, ИОАНН ЗЛАТОУСТ, ФОМА АКВИНСКИЙ, ГРИГОРИЙ ПАЛАМА. РЕАЛИЗМ И НОМИНАЛИЗМ 45.65 KB
  которое признавало Бога в качестве высшего существующего начала а весь окружающий мир Его творения. 50 Можно выделить следующие основные черты средневековой теологической философии: теоцентризм главной причиной всего сущего высшей реальностью основным предметом философских исследований являлся Бог; изучению самого по себе космоса природы явлений окружающего мира уделялось мало внимания так как они считались творением Бога; господствовали догматы истины не нуждающиеся в доказательствах о творении всего Богом и откровении...
32877. Географическая среда в развитие общества. Географическое направление в обществоведении 41.93 KB
  Географическая среда в развитие общества. В более узком смысле – это часть материи за исключением общества т. Географическая среда имеет историческую обусловленность и расширяется с развитием общества. Географическая среда является важным фактором развития общества: Она влияет на разделение труда на размещение отраслей производства что изучается экономической географией; Она влияет на темпы развития общества может быть боле или менее благоприятной; Она опосредованно влияет на характер политических систем что изучается...
32878. Материальное производство. Труд. Производительные силы. Технологический способ труда. Технократическое направление в обществоведении 41.14 KB
  Технологический способ труда. Лишь для земледельческого труда делалось некоторое исключение. Средневековую цивилизацию многие историки культуры трактуют как цивилизацию труда. ознаменовался новым сдвигом в социальном статусе и образе труда.
32879. Производственные отношения. Социальная закономерность. Фатализм и волюнтаризм 30.27 KB
  Производственные отношения. Производственные отношения совокупность материальных и экономических отношений между людьми в процессе общественного производства и движения общественного продукта от производства до потребления. Производственные отношения являются необходимой стороной общественного производства. В процессе труда складываются отношения обусловленные потребностями технологии и организации производства например отношения между рабочими различных специальностей между организаторами и исполнителями связанные с...
32880. Общественно-экономическая формация и цивилизация 38.11 KB
  Общественноэкономическая формация в марксизме стадия общественной эволюции характеризующаяся определённой ступенью развития производительных сил общества и соответствующим этой ступени историческим типом экономических производственных отношений которые зависят от неё и определяются ею. Не существует формационных ступеней развития производительных сил которым не соответствовали бы обусловленные ими типы производственных отношений. Как ступени исторического развития человечества следующие за варварством. Как уровень ступень...
32881. Социальная структура. Классы и классовая борьба. Интеллигенция 42.81 KB
  Устойчивые связи между любыми элементами общества устойчивые взаимозависимости корреляции; 2. В широком смысле под социальной структурой понимается строение общества в целом совокупность устойчивых связей между его основными функциональными сферами экономикой политикой культурой и др. В узком смысле под социальной структурой общества понимается деление общества на различные социальные группы системы устойчивых связей между ними а также внутренняя структура различных социальных общностей. В европейской философии XVIIXVIII...
32882. Государство. Монархия и республика. Право 45.02 KB
  Государство. Государство ядром полит. Государство – это соц. Теории происхождения государство: 1.
32883. Общественное сознание и его структура. Ценности, нравственность, искусство 39.97 KB
  Общественное сознание и его структура. Общественное сознание воззрения людей в их совокупности на явления природы и социальную реальность выраженные в созданных обществом естественном или искусственном языке творениях духовной культуры социальных нормах и взглядах соц. Сознание людей может отставать от общественного бытия и не соответствовать ему. 3 Общественное сознание активно воздействует на всю жизнь общества.
32884. Революция и реформа. Смена лидеров в истории 45.35 KB
  Революция и реформа. Революция радикальное коренное глубокое качественное изменение скачок в развитии общества природы или познания сопряжённое с открытым разрывом с предыдущим состоянием. Социальная революция качественный скачок в развитии общества который сопровождается переходом государственной власти в руки революционного класса или классов и глубокими изменениями во всех сферах общественной жизни. В марксистской традиции введено разделение на буржуазные революции Приводят к замене феодализма капитализмом в экономике не до...