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


 

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

23846. Зарождение Силлабической поэзии и русского театра 29 KB
  Зарождение Силлабической поэзии и русского театраЗарождение Силлабической поэзии в России связано с именами Симеона Полоцкого Сильвестра Медведева Кариона Истомина. Происхождение и образование Симеона Полоцкого наглядно показывают откуда и каким образом проникал в Россию стиль барокко. Наследие Симеона Полоцкого очень велико. Курянин по происхождению служивший подьячим в Приказе тайных дел а потом по настоятельному совету Симеона постригшийся в монахи [5] Сильвестр Медведев после смерти учителя унаследовал его место место придворного...
23847. Творчество Симеона Полоцкого 24 KB
  Творчество Симеона ПолоцкогоОн воспитывал государевых детей одного из них будущего царя Федора Алексеевича он научил сочинять силлабические вирши открыл латинскую школу неподалеку от Кремля в Заиконоспасском монастыре где обучались молодые подьячие Приказа тайных дел собственной канцелярии царя Алексея Михайловича. Симеон Полоцкий также занял или точнее учредил еще одну должность должность придворного поэта дотоле в России неизвестную. Любое событие в царской семье браки именины рождения детей давало Симеону Полоцкому повод...
23849. Предмет, об’єкт і задачі економічного аналізу 57 KB
  Поняття економічного аналізу та його роль в управлінні підприємством. Предмет і об’єкти економічного аналізу. Функції та принципи економічного аналізу. Система показників економічного аналізу. Історія розвитку економічного аналізу та його зв’язок з іншими дисциплінами...
23850. Теоретическая модель цифровой сети связи 83 KB
  Суть сети – соединение разного оборудования. Следовательно, одной из основных проблем является проблема совместимости. Поэтому, в настоящее время, все возможные пути развития сетей отражены в стандартах.
23851. О славянах 61.3 KB
  Владимир был сыном Святослава и всего лишь Ольгиной ключницы.Однако после гибели его более знатных братьев Владимир начинает княжить в Киеве один. Сам Владимир охвачен похотью: помимо четырех жен у него триста наложниц в Вышгородетриста в Белгороде двести в сельце Берестове. Приходят к Владимиру волжские булгарымагометане и предлагают: Тыо князь мудр и разумен но неведомо тебе цельное вероучение.
23852. Житие протопопа Аввакума, им самим написанное 21.96 KB
  Протопоп Аввакум написал житие по благословению инока Епифаниясвоего духовного отца. В это время Аввакума и его сторонников остригли и бросили в темницу. Родился Аввакум в Нижегородской земле.
23853. Житие Сергия Радонежского 21.96 KB
  Преподобный Сергий родился в Тверской земле в годы княжения тверского князя Дмитрия при митрополите Петре. Варфоломей позвал к себе в пустыньку старца игумена Митрофанакоторый постриг его в монашество с наречением имени Сергий. После пострижения Сергий причастился и церковь при этом наполнилась благоуханием. Однажды когда Сергий в церкви пел заутреню стена расступилась и вошёл сам дьявол со множеством бесов.
23854. Житие Феодосия Печерского 23.97 KB
  Мать хотела чтобы Феодосий одевался почище и играл со сверстниками. Услышав о святых местах Феодосий молился Богу о том чтобы посетить их. Феодосий снова стал ежедневно ходить в церковь. Феодосий так разумно отвечал ей о важности этого делачто мать на целый год оставила его в покое.