Програмиране в среда Интернет

Меню

Начало
Увод
Съдържание
Въведение в Интернет
HTML
CSS
JavaScript
Perl
Полезни връзки
Речник на термините

 

HTML - ЧЕТВЪРТА ЧАСТ


Форми във WEB документите.Елементи на формите.
Методи за изпращане на информация от форми.
Кодиране на изпращаната информация.

   Формите са въведени в HTML, за да може да се осъществи обратна връзка с потребителите. Те се използват за събиране на информация от потребителите, изпращане на информация за идентификация и др. Всяка една форма се загражда с таговете <FORM>...</FORM>. Самата форма представлява в повечето случаи множество елементи <INPUT>. Следват основните атрибути на тага <FORM> :

action="..." Указва URL, което ще бъде използвано когато се изпрати формата. Това може да е CGI програма, PHP или JavaScript скрипт и др.
enctype="..." Дефинира MIME типа на изпращаната информация. Ако се изпраща файл трябва стойноста на този атрибут да е "multipart/form-data". По подразбиране стойноста е "application/x-www-form-urlencoded".
method="..." Установавя HTTP метода по който се изпраща формата. Възможните стойности са "get" и "post". Подразбира се метода "get".
name="..." Установява име на формата. Това име после може да се използва в JavaScript за достъп до формата.
target="..." Дефинира къде да се зареди върнатият от формата документ (ако има такъв).

   Както се вижда изпращането на информацията от формата може да стане по два основни начина : чрез метода GET и метода POST. Разликата между тях е, че при метода GET информацията се изпраща през URL адреса, като при това браузъра извършва URL кодиране. Този метод е подходящ при изпращане на малко количество данни, защото повечето сървъри ограничават размера на GET заявките до 256 символа. Метода POST отваря директен комуникационен канал между клиента (браузъра) и сървъра. Тук не се извършва URL кодиране и големината на предаваната информация не е ограничена (в някои случаи от съображения за сигурност ограничения има и при този метод), тъй че той е подходящ за изпращане на файлове и форми с много информация. Освен това изпращането на пароли с метода GET не е особенно удачно, тъй като всеки може да разбре вашата парола виждайки какво е изпратил браузърът като URL. Ако се използва POST това не може да се случи, поради простата причина, че данните се предават директно и не преминават през полето за адреси на браузъра.
    Сам по себе си тага <FORM> не визуализира никакви полета в браузъра, а служи само за контейнер. За тази цел се използват следните тагове : <INPUT>, <SELECT>, <TEXTAREA> и <OPTION>. Най-често използвания от тях е <INPUT>, той има няколко атрибута, като най-важния е атрибута TYPE="...". Чрез него се задава типа на елемента. Възможните стойности са :

button Резултата е бутон с име дефинирано от атрибута NAME="..." и стойност дефинирана от атрибута VALUE="...".
submit Резултата е бутон, при натискането на който се изпраща формата. Ако не се дефинра атрибута VALUE, стойноста на бутона е Submit.
reset Резултата е бутон, при натискането на който се изчиства цялата информация въведена във формата. Ако не е дефинирана стойност на атрибута VALUE, стойноста на бутона е Reset.
image Създава бутон от външно изображение.
text Резултата е текстово поле от един ред, в което може да се въвежда произволна информация.
password Създава текстово поле, в което може да се въвежда произволна информация. Разликата е, че въведената информация се визуализира като звездички.
checkbox Резултата е отметка, която може да има две стойности: маркирана и немаркирана. Изпраща се стойноста на атрибута VALUE.
radio Резултата е т.нар. радио бутон. Mогат де се групират чрез атрибута NAME. Tова става когато този атрибут е еднакъв за групата.Разликата е, че в една група може да има само един маркиран радио бутон.
file Резултата е бутон, чрез който потребителя може да избере файл от локалния компютър.
hidden Невидимо поле, което се използва най-често за прехвърляне на информация между две сесии. Името на полето се задава с атрибута NAME, а стойноста - с VALUE.

   Освен атрибута TYPE="...", тага <INPUT> има и още няколко атрибута, специфични за всяка една от неговите стойности:

align="..." Дефинира подравняването на дадения елемент. Специфичен за image.
alt="..." Дефинира алтернативен надпис, който се визуализира ако браузъра не може да показва изображения или са изключени. Специфичен за image.
border="..." Дефинира дебелината на границата около изображението.Специфичен за image.
checked Маркира дадения елемент.Специфичен за checkbox и radio.
disabled Елемент е такъв атрибит се визуализира в сив цвят и вътре не може да се въвежда информация.
maxlength="..." Установява максималната големина на информацията въведена е текстовите полета. Когато броя на символите на информацията е по-голяма от максималната, то повече символи не могат да бъдат въведени.
name="..." Дефинира име на елемента. При изпращане на информация чрез името може да се диференцират отделните елементи.
readonly Когато един елемент е дефиниран като readonly, стойностите му не могат да се променят от потребителя. Скриптовете обаче могат да променят този елемент. Специфичен за password,text.
size="..." Установява големината на текстовите полета в пиксели. Специфичен за password,text.
src="..." Дефинира пътя към избражението използвано за бутон. Специфичен за image.
type="..." Установява типа на елемента.
value="..." Установява стойноста на елемента, която се изпраща от формата чрез двойката име/стойност.

   Чрез тага <SELECT> могат да се създават падащи менюта в един WEB документ. Елементите на това меню се създават с помощта на тага <OPTION>. Атрибутите на <SELECT> са:

align="..." Дефинира подравняването на дадения елемент.
multiple Позволява на потребителя да маркира повече от една опция.
name="..." Дефинира име на групата.
size="..." Дефинира редовете, които ще се показват. Ако стойноста е 1, то ще се визуализират като падащо меню. В противен случай се визуализират само толкова реда, колкото е зададено. Стойноста по подразбиране е 1.

   Тага <OPTION> има следните атрибути :

disabled Забранява дадения елемент.
label="..." Дефинира заглавие на елемента, което предефинра текста след тага (който ако не се постави този атрибут служи за заглавие).
selected Маркира дадения елемент. Ако се използва MULTIPLE, е възможно използването на повече от един елемент с този атрибут.
value="..." Дефинира стойноста на елемента. Изпращаната информация се формира от името дефинирано в тага <SELECT> и стойноста на този атрибут.

   Последния таг, който може да се постави в една форма е тага <TEXTAREA>. Той е подобен да текстовото поле с тази разлика, че тук редовете са повече от един. Този таг има множество атрибути, но най-често използваните са :

align="..." Дефинира подравняването спрямо другите елементи на страницата.
cols="..." Дефинира колоните, които ще има текстовото поле.
rows="..." Дефинира колоните, които ще има текстовото поле.
name="..." Дефинира име на елемента.
style="..." Дефинира каскаден стил за текстовото поле.
wrap="..." Установява начина по който ще се пренасят символите на нов ред. Възможните стойности са physical и virtual. В първият случай редовете завършват със знак за нов ред и така се изпращат, а във втория случай пренасянето е виртуално и информацията се изпраща като едно цяло. По подразбиране пренасянето е изключено. Ако се зададе само WRAP (без стойност) се активира виртуалното пренасяне.
readonly Не позволява въвеждането на информация в текстовото поле от потребителя. Скриптовете, обаче могат да променят информацията.
disabled Деактивира елемента. Не е възможно въвеждането на иформация от потребителя.

   Следващият пример ще демонстрира използването на тези тагове, както и някои от техните атрибути :

<HTML>
<HEAD>
<TITLE>Програмиране в Интернет</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
</HEAD>
<BODY>
<H3>Примерна форма</H3>
<FORM METHOD="get" ENCTYPE="multipart/form-data" ACTION="ex13.html" NAME="form1">
Текстово поле с ограничение на въвежданата информация до 20 символа и дължина на полето 25 символа.<BR>
<INPUT TYPE="text" SIZE="25" MAXLENGTH="20" NAME="text1"><BR>
<INPUT TYPE="password" SIZE="25" MAXLENGTH="20" NAME="pass"><BR>
Три checkbox елемента.<BR>
Избор 1<INPUT TYPE="checkbox" NAME="ch1" VALUE="1"><BR>
Избор 2<INPUT TYPE="checkbox" NAME="ch2" VALUE="2" CHECKED><BR>
Избор 3<INPUT TYPE="checkbox" NAME="ch3" VALUE="3"><BR>
Първа група от три радио бутона.<BR>
Избор 1<INPUT TYPE="radio" NAME="r1" VALUE="1" CHECKED><BR>
Избор 2<INPUT TYPE="radio" NAME="r1" VALUE="2"><BR>
Избор 3<INPUT TYPE="radio" NAME="r1" VALUE="3"><BR>
Втора група от три радио бутона.<BR>
Избор 1<INPUT TYPE="radio" NAME="r2" VALUE="1"><BR>
Избор 2<INPUT TYPE="radio" NAME="r2" VALUE="2"><BR>
Избор 3<INPUT TYPE="radio" NAME="r2" VALUE="3" CHECKED><BR>
Падащо меню с три елемента без атрибута MULTIPLE.<BR>
<SELECT NAME="dropdown1">
<OPTION VALUE="1">Избор 1
<OPTION VALUE="2">Избор 2
<OPTION VALUE="3">Избор 3
</SELECT><BR>
Падащо меню с пет елемента с атрибута MULTIPLE и размер 3.<BR>
<SELECT NAME="dropdown2" SIZE="3" MULTIPLE>
<OPTION VALUE="1">Избор 1
<OPTION VALUE="2">Избор 2
<OPTION VALUE="3">Избор 3
<OPTION VALUE="4">Избор 4
<OPTION VALUE="5">Избор 5
</SELECT><BR>
<TEXTAREA ROWS="5" COLS="30" NAME="text2" WRAP>
Добавете допълнителна информация
</TEXTAREA>
<INPUT TYPE="submit" NAME="send" VALUE="Изпрати"><INPUT TYPE="submit" NAME="clear" VALUE="Изчисти"><BR>
</FORM>
</BODY>
</HTML>

    Това е резултата от този код.
   Ако натиснете бутона "Изпрати" в адрес лентата на браузъра ще видите това което ще се изпрати от формата. Този резултат не може да се обработава със средствата на HTML езика. Ако искате да използвате форми във вашите HTML страници е нужно да се запознаете с език за програмиране като JavaScript или Perl.

Термини

URL кодиране