PHP и HTTP - Работа с HTML форми
Форма в HTML документ се имплементира от контейнерния таг FORM, който дефинира всички контролни елементи – полета за въвеждане, бутони и др. Ако контролните елементи са посочени извън съдържанието на тага FORM, тогава те не създават формуляр, а се използват за изграждане на потребителски интерфейс на уеб страница, тоест за добавяне на различни бутони, квадратчета за отметка, полета за въвеждане към него.
Елементите на формуляра се обработват с помощта на скриптове, но може изобщо да не се обработват.
Елементите на формуляра се наименуват чрез техния атрибут NAME.
Всеки елемент на формуляр може да има начална и крайна стойност, които са символни низове. Първоначалните стойности на елементите не се променят, така че зададените от потребителя стойности могат да бъдат нулирани. Това действие ще зададе всички контроли на формуляра на първоначалните им стойности по подразбиране.
HTML 4.01 дефинира следните типове контроли:
- Бутоните се дефинират с помощта на елементите BUTTON и INPUT. Разграничаване:
» бутони за изпращане - при натискане изпращат формата на сървъра;
» бутони за нулиране - когато щракнете върху тях, контролите приемат първоначалните си стойности;
» други бутони - бутони, които нямат зададено действие по подразбиране, когато бъдат щракнати.
- Зависими превключватели (превключватели със зависимо застопоряване) - задават се от елемент INPUT и са превключватели "on/off". Ако множество зависими превключватели имат едно и също име, тогава те са взаимно изключващи се. Това означава, че ако един от тях е настроен на позиция "включено", тогава всички останали автоматично се настройват на позиция "изключено". Именно това е тяхното предимство.използване.
- Независими превключватели (превключватели с независимо заключване) - задават се от елемента INPUT и са превключватели за включване / изключване, но за разлика от зависимите превключватели, независимите превключватели могат да приемат и променят стойността си независимо от другите превключватели. Дори ако последните имат същото име.
- Меню – реализира се чрез елементи SELECT , OPTGROUP и OPTION. Менютата предоставят на потребителя списък с възможни избори.
- Въвеждане на текст - осъществява се чрез елементи INPUT, ако се въвежда един ред, и чрез елементи TEXTAREA - ако се въвеждат няколко реда. И в двата случая въведеният текст става текущата стойност на контролата.
- Избор на файл - позволява изпращане на избрани файлове заедно с формуляра, реализиран от елемента INPUT HTML.
- Скрити контроли - създадени от контрола INPUT.
Както можете да видите, много елементи са дефинирани с помощта на общия таг INPUT.
Можете да намерите пълната спецификация за HTML4тук.
Таг FORM - контейнер за формуляри
Ето атрибутите на тага FORM:
- APPLICATION/X-WWW-FORM-URLENCODED (използва се по подразбиране);
ТАГ ЗА ВХОД и неговите методи
Елементът INPUT е най-често използваният таг за HTML форма. Този таг изпълнява основните функции на формата. Тя ви позволява да създавате полета за въвеждане на текстов низ, име на файл, парола и т.н. във формуляра.
Обърнете внимание на особеността на INPUT - той няма краен (краен) таг. Атрибутите и използването на INPUT зависят от това как се използва. Нека разгледаме тези методи.
» Едноредови полета за въвеждане
Най-често използваните полета за въвеждане – все пак дори бутонът е поле за въвежданеинформация. Да започнем с полето за въвеждане на текст. Формат на етикет INPUT за създаване на поле за въвеждане на текстов низ:
Този таг създава поле за въвеждане с максимално допустимата дължина на текста maxlen и размер на интервалите между символите. Ако атрибутът стойност е посочен, тогава полето първоначално ще покаже стойността на този атрибут. Незадължителните атрибути са отбелязани в квадратни скоби [] .
Ето пример за поле за въвеждане на един ред:
» Полета за парола
Разбира се, потребителското име може да бъде въведено с помощта на обикновено текстово поле. Но паролата не трябва да се показва на екрана, когато я въведете. Полето за въвеждане на парола ще ни помогне с това:
Ето пример за поле за въвеждане на парола:
» Скрито текстово поле
Скритите полета се използват за прехвърляне на служебна информация (за която потребителят дори не трябва да знае). С помощта на такива полета например могат да се прехвърлят настройки.
Такива полета се предават на сървъра, но не се показват на уеб страницата.
» Независими превключватели
Много често потребител, който попълва формуляр в браузър, трябва да получи възможност да посочи своите предпочитания, като избере определени стойности. В същото време тези стойности са дадени и до тях е поставена малка квадратна кутия, в която можете да поставите или премахнете отметката от квадратчето. В този случай съответно стойността ще бъде избрана или не.
Можете да приложите това отново, като използвате тага INPUT. За да направите това, трябва само да посочите поле за отметка като стойност на атрибута type.
Ако превключвателят е бил активиран при щракване върху бутона за изпращане, тогава параметърът име=стойност ще бъде предаден на скрипта. Ако квадратчето за отметка е дезактивирано, нищо няма да бъде предадено на скрипта - сякаш изобщо не е имало превключвател.
Превключване отактивиран или деактивиран по подразбиране. За да бъде активиран радиобутон по подразбиране, трябва да посочите атрибута checked за него.
Поле за отметка се нарича независимо, защото състоянието му е независимо от състоянието на други полета за отметка. По този начин в един и същи формуляр могат да бъдат избрани едновременно няколко радио бутона.
Ето пример за независими превключватели:
Има и такъв превключвател в HTML, който зависи от други превключватели, той се обсъжда по-долу.
» Превключватели за опции
Зависимият превключвател, като независимият превключвател, може да бъде включен или изключен. Радио бутонът обаче е зависим радио бутон, тъй като може да има само един активиран радио бутон във формуляр. По-точно, ако във формата има няколко зависими превключвателя с едно и също име, тогава само един от тях може да бъде активиран. Когато е избран един превключвател, всички зависими превключватели със същото име се изключват автоматично. Стойността на атрибута name се приема като име на превключвателите. Може да има само един активен превключвател. Пример за изброяване на формуляр с квадратчета за отметка:
Този формуляр ще изглежда така:
Първият радио бутон (със стойност yes ) е активен по подразбиране (задали сме атрибута checked).
След като потребителят щракне върху бутона Изпращане, параметърът за отговор (атрибутът на името и на двата бутона за избор) ще бъде предаден на script.php със стойност да или не (в зависимост от това коя опция е избрал потребителят).
А ето как изглежда текстът на скрипта, който получава данни от разглежданата форма и обработва отговора.
» Бутон за изпращане на формуляр
Бутоните са друг контрол за ВХОД. Бутонsubmit се използва за изпращане на параметрите, въведени във формуляра, към скрипта. Синтаксисът на тага INPUT е както следва:
Атрибутът value указва текста, който ще бъде написан върху бутона за изпращане. Атрибутът name указва името на бутона и не е задължителен. Ако стойността на този атрибут не е посочена, тогава стойностите, въведени във формуляра и това е всичко, ще бъдат предадени на скрипта. Ако атрибутът име за бутона е указан, тогава в допълнение към основните данни на формуляра ще бъде изпратена двойката име=стойност от самия бутон.
» Бутон за нулиране на параметри
В допълнение към бутона за изпращане има и бутон за нулиране, който нулира параметрите на формуляра или по-скоро задава стойностите по подразбиране за всички елементи на формуляра. Желателно е формата да има такъв бутон, особено ако е голяма форма. Наличието на този бутон гарантира, че формулярът ще бъде изчистен, например в случай, че са въведени грешни параметри. Синтаксис на бутона за нулиране:
» Бутон за изпращане със снимка
Вместо бутон за изпращане, можете да използвате изображение, за да изпратите данните. Щракването върху това изображение прави същото като щракването върху бутона за изпращане. Въпреки това, освен това, на скрипта ще бъдат предадени координатите на мястото на кликване върху изображението. Координатите ще бъдат предадени във формата name.x=coor_X, y=coor_Y. Синтаксисът за бутон за изпращане със снимка е:
Многоредови текстови полета. TEXTAREA таг
В HTML многоредовите текстови полета се създават с помощта на тага TEXTAREA. Полето, създадено от този таг, ви позволява да въведете и изпратите не един ред, а няколко реда наведнъж. Синтаксисът на тага TEXTAREA е:
Няколко стойности по отношение на използването на атрибути: желателно е все пак да посочите незадължителните параметри cols и rows. Първият от тях определя броя на знаците в реда, а вторият - броят на редовете в областта. Атрибутът wrap дефинира типаобвиване на текст, как ще изглежда текстът в полето за въвеждане:
- Виртуален - вдясно от текстовото поле се показва лента за превъртане. Текстът, който въвеждате, изглежда разбит на редове и се вмъква знак за нов ред, когато натиснете клавиша ENTER;
- Физически - този тип зависи от вида на браузъра и изглежда различно;
- Няма - текстът се появява в полето, докато потребителят го въвежда. Ако текстът не е намален до един ред, се появява хоризонтална лента за превъртане.
Трябва да се отбележи, че най-удобният тип е Virtual. Ето пример за многоредово текстово поле, използващо атрибута wrap=Virtual:
Списъци за избор. SELECT етикет
» Списъци с един избор
Доста често има нужда да се представят някои данни под формата на списък и да се предвиди възможност за избор от този списък. В HTML списъците се реализират с помощта на тага SELECT. Списъкът за избор ви позволява да изберете една опция от много. Пример за списък с един избор:
А ето и практическото му изпълнение:
Атрибутът name указва името на параметъра, който ще бъде предаден на скрипта. Ако атрибутът size е 1, тогава списъкът ще бъде "оборудван" с лента за превъртане. Стойността по подразбиране, избрана в списъка, може да бъде указана с помощта на избрания атрибут на съответния таг за опция. В показания пример денят от седмицата по подразбиране е сряда. Атрибутът стойност не е задължителен. Ако не е посочено, тогава ще бъде предаден низ, затворен в тага за опция.
» Списъци с множество възможности за избор
Можете също да създадете множество списъци за избор, като използвате тага SELECT. В такива списъци можете да изберете не една, а няколко опции наведнъж. За да създадете списък с множествена селекция е необходим таг SELECTпосочете множествения атрибут. Ето един практически пример за такъв списък:
Качете файлове на сървъра
Тагът INPUT ви позволява да приложите друга функция на формулярите, а именно да създадете поле за избор на файл за изпращането му до сървъра. Синтаксисът е следният:
Подробности относно качването на файлове на сървъра ( Upload ) можете да намеритетук.