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=малюнок>


 

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

73736. Историческое становление образа науки, Позитивизм и неопозитивизм 55.5 KB
  Предметом лекции являются учения где есть попытка построить целостный образ науки как самостоятельного явления культуры и особого вида познания. он выделяет в особый тип обобщенное и ориентированное на закономерность знания – это первые признаки науки. Итак отличительные черты науки – обобщение ориентация на причины и закономерности трансляция знаний и внеутилитарность; этот образ закрепился практически до Нового времени.
73738. Статически определимые стержневые системы 216 KB
  Примем ряд допущений в отношении расчетной схемы фермы: – все шарниры являются идеальными отсутствуют силы трения; –оси стержней проходят через геометрические центры шарниров; – внешняя нагрузка приложена исключительно в узлах. В силу введенных допущений в стержнях фермы возникают только нормальные усилия. По характеру очертания внешнего контура...
73740. Социально-экономические и правовые основы государственного регулирования несостоятельности (банкротств) в России 33.19 KB
  Особое внимание в Уставе уделялось статусу торгового предприятия должника. Конечная цель данного правового института соразмерное удовлетворение требований кредиторов несостоятельного должника и освобождение последнего от долгов с предоставлением возможности снова приступить к коммерческой деятельности. Нормы дореволюционного конкурсного права характеризуются высокой степенью разработанности с точки зрения интересов как должника так и кредиторов. Несостоятельность банкротство признанная арбитражным судом неспособность должника в полном...
73742. Актуальные проблемы истории философии 185 KB
  Философия зародилась примерно 2500 лет назад в странах древнего мира — Индии, Китае, Египте. Совершенства и классических форм она достигла позднее, в Древней Греции и Риме.
73743. Западная философия ХХ века: диалог о человеке и человечестве 136 KB
  Если классическая философия Запада характеризовалась общностью понимания целей и задач философии, то в современной философии, на первый план выходят различия, зачастую анализ отдельных философских проблем оформляется в самостоятельные направления.
73744. ПРЕСТУПЛЕНИЯ ПРОТИВ ЖИЗНИ И ЗДОРОВЬЯ ЧЕЛОВЕКА 201 KB
  Убийство при отягчающих обстоятельствах относящихся к объективным признакам преступления пункты 16 ч. Убийство при отягчающих обстоятельствах относящихся к субъективным признакам преступления пункты 714 16 ч. Убийство матерью новорожденного ребенка. Убийство совершенное в состоянии аффекта.