Освен за
показване на информация WEB страниците могат да служат и за събиране на
информация от потребителя. Това става с така наречените формуляри. За съжаление
езика HTML не ви позволява да управлявате информацията във формулярите, а само
да ги разполагате на страницата си. Двойката елементи за разполагане на
формуляри е <FORM></FORM>. Между тази двойка елементи могат да се разполагат неограничен брой
формуляри. Всеки един формуляр се разполага с единичния елемент <INPUT>. Този елемент трябва задължително да съдържа двата атрибута NAME и TYPE. Атрибута NAME задава името на формуляра а TYPE видът му. Нека разгледаме различните стойности на TYPE.
<HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form1" TYPE="text">
</FORM>
</BODY>
</HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form1" TYPE="text">
</FORM>
</BODY>
</HTML>
Този HTML документ ще покаже на екрана следното
текстово поле:
Такъв тип едноредово текстово поле се задава със
стойността на атрибута TYPE="text". Вие можете да променяте дължината на
полето с атрибута SIZE. Ако пропуснете SIZE се показва поле с дължина 20 символа. По подразбиране
полето се показва празно, но вие можете да зададете някаква начална
стойност на полето. Това става с атрибута VALUE. Нека направим едно текстово поле с дължина 50
символа и надпис в него "това поле съдържа текст и има дължина от 50
символа".
<HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form2" TYPE="text" SIZE="40" VALUE="това поле съдържа текст и има дължина от 40 символа">
</FORM>
</BODY>
</HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form2" TYPE="text" SIZE="40" VALUE="това поле съдържа текст и има дължина от 40 символа">
</FORM>
</BODY>
</HTML>
Понеже текста който се показва е по-дълъг от 40
символа, последните няколко символа се скриват. Ако кликнете върху полето
можете да местите видимата част на текста наляво и надясно с помощта на
стрелките за движение от клавиатурата. Също така можете да напишете свой текст
в полето. Ако текста който пишете е по дълъг от дължината на полето, той
автоматично започва да се скролира наляво и разкрива новонаписаните символи.
Опитайте! Можете да ограничите дължината на изписвания текст с атрибута MAXLENGHT. Например с MAXLENGHT="40"
ограничавате надписа до 40 символа.
Друг параметър на атрибута TYPE е password. Той действа по същия начин като text, с изключение на
това, че в полето не се показва самия текст, който въвеждате, а звездички.
<HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form3" TYPE="password">
</FORM>
</BODY>
</HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form3" TYPE="password">
</FORM>
</BODY>
</HTML>
Напишете нещо в това поле и ще видите как всеки символ
се заменя със звездичка. Това е особено полезно, когато текста е някаква парола
и не трябва да се вижда от хората около вас.
Друг тип формуляри са кутиите с отметки. Те се задават
със стойността checkbox на атрибута TYPE.
<HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form4" TYPE="checkbox" ><BR>
<INPUT NAME="form5" TYPE="checkbox"><BR>
<INPUT NAME="form6" TYPE="checkbox" CHECKED>
</FORM>
</BODY>
</HTML>
<HEAD>
< TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME="form4" TYPE="checkbox" ><BR>
<INPUT NAME="form5" TYPE="checkbox"><BR>
<INPUT NAME="form6" TYPE="checkbox" CHECKED>
</FORM>
</BODY>
</HTML>
Кутиите с отметки служат за избор на една или няколко
възможности едновременно. Ако кликнете в кутията, отметката се появява. Ако
кликнете повторно отметката изчезва. Можете да правите отметки в повече от една
кутия. По пдразбиране кутиите с отметки се показват празни. Ако искате да се
показва отметка в дадена кутия, използвайте атрибута checked.
Подобни на кутиите с отметки са
радиобутоните. Разликата е, че при радиобутоните може да бъде отметнат само
един бутон. Когато изберете друг бутон, отметката в предишния изчезва.
Особеното при радиобутоните е, че всички трябва да носят едно и също име, в
случая NAME="R1".
Радиобутон се създава с атрибута TYPE="radio".
<HTML>
<HEAD>
<TITLE>radiobutton</TITLE>
<BODY>
<FORM>
<INPUT TYPE="radio" VALUE="V1" checked NAME="R1"><BR>
<INPUT TYPE="radio" NAME="R1" VALUE="V2"><BR>
<INPUT TYPE="radio" NAME="R1" VALUE="V3">
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>radiobutton</TITLE>
<BODY>
<FORM>
<INPUT TYPE="radio" VALUE="V1" checked NAME="R1"><BR>
<INPUT TYPE="radio" NAME="R1" VALUE="V2"><BR>
<INPUT TYPE="radio" NAME="R1" VALUE="V3">
</FORM>
</BODY>
</HTML>
Друг тип формуляри са бутоните SUBMIT и RESET.
Когато се използват в комбинация с друг формуляр, тези два бутона съответно
потвърждават или изчистват въведената информация. Вижте :
Бутона RESET изчиства
полето, в случай че сте въвели нещо в него, а бутона SUBMIT потвърждава
въведената информация. В случая при натискане на бутона SUBMIT няма да има
ефект. Опитайте! Въведете нещо в полето и натиснете бутоните! Ето как изглежда
HTML кода на горния пример :
<HTML
<HEAD>
<TITLE>submit and reset</TITLE>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="T1" SIZE="20">
<INPUT TYPE="submit" VALUE="Submit" NAME="B1">
<INPUT TYPE="reset" VALUE="Reset" NAME="B2">
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>submit and reset</TITLE>
</HEAD>
<BODY>
<FORM >
<INPUT TYPE="text" NAME="T1" SIZE="20">
<INPUT TYPE="submit" VALUE="Submit" NAME="B1">
<INPUT TYPE="reset" VALUE="Reset" NAME="B2">
</FORM>
</BODY>
</HTML>
SUBMIT бутон се
създава с атрибута TYPE="submit". Атрибута VALUE="Submit" задава какъв да бъде надписа на
бутона. Можете да го промените по свое желание. За бутона RESET се ползва
атрибута TYPE="reset".
Останалите атрибути на RESET действат аналогично с тези на SUBMIT.
Можете да
създадете формуляр във вид на многоредово поле с елемента <TEXTAREA>. Размера на полето се задава с атрибутите COLS и ROWS. COLS показва колко символа да е широко полето, в случая 30,
а ROWS от колко реда да
се състои, в случая 3.
<HTML
<HEAD>
<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM >
<TEXTAREA ROWS="3" NAME="S1" COLS="30">textarea</TEXTAREA>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>textarea</TITLE>
</HEAD>
<BODY>
<FORM >
<TEXTAREA ROWS="3" NAME="S1" COLS="30">textarea</TEXTAREA>
</FORM>
</BODY>
</HTML>
Когато използвате елемента <TEXTAREA>, не се използва елемент <INPUT>. Текста, който се намира между <TEXTAREA> и </TEXTAREA>, се показва по подразбиране в полето. Ако пропуснете текста полето
ще се покаже празно.
Последния тип формуляри, който ще
ви покажа са падащите менюта. Такъв вид формуляри се създават с елемента <SELECT>. Вижте :
Кликнете с мишката върху стрелката
надолу и ще се покаже меню с 3 избора, избор 1, избор 2 и избор 3. Стойностите,
които да се показват в менюто се задават с елемента <OPTION>. Вижте HTML
кода на горния пример :
<HTML
<HEAD>
<TITLE>drop-down menu</TITLE>
</HEAD>
<BODY>
<FORM >
<SELECT SIZE="1"NAME="D1">
<OPTION>избор 1</OPTION>
< OPTION>избор 2</OPTION>
< OPTION>избор 3</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>drop-down menu</TITLE>
</HEAD>
<BODY>
<FORM >
<SELECT SIZE="1"NAME="D1">
<OPTION>избор 1</OPTION>
< OPTION>избор 2</OPTION>
< OPTION>избор 3</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
Атрибута SIZE на
елемента <SELECT> задава броя на редовете, които да се показват в менюто.
Когато SIZE="1", тогава се наблюдава т.нар. падащо меню. Ако зададете
стойност по-голяма от 1, тогава вече ще се показва вертикална превъртаща лента.
Вижте горното меню, само че със стойност SIZE="5" :
РАМКИ
Сигурно често сте виждали страници, които са разделени на отделни части. Такива части в езика HTML се наричат рамки(frames) или фреймове, ако предпочитате. Разделянето на рамки позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За да направите страница с рамки, трябва да създадете отделен html документ, чиято функция е да раздели страницата, да укаже в коя рамка кой друг html документ да се показва, да зададе хиперлинковете от една рамка да се показват в друга. Този html документ е по-различен от другите. Например тялото <BODY> при него е заменено с <FRAMESET>. Вижте един такъв html документ, който разделя страницата на 2 еднакви хоризонтални рамки. В първата рамка се показва страницата 1.html а във втората 2.html.
<HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME NAME="first" SRC="1.html">
<FRAME NAME="second" SRC=2.html">
</FRAMESET>
</HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME NAME="first" SRC="1.html">
<FRAME NAME="second" SRC=2.html">
</FRAMESET>
</HTML>
Разделянето се задава от елемента <FRAMESET>. Той има 2 атрибута, ROWS и COLS. Първия задава
хоризонтално разделяне, втория вертикално. Атрибутите ROWS и COLS имат параметри
за височина и ширина на рамката. Параметрите могат да се задават по три
начина. Първия е в процент от размера на прозореца, при него след числото
задължително се слага знака за процент %. В горния пример се ползва точно
такова разделяне. Втория начин е в абсолютни единици - пиксели. Те се задават
само с число без никакъв знак отзад. Например ROWS="200,300" разделя прозореца на 2 части, едната с височина 200 пиксела а другата 300.
Третия начин е да се зададат относителни стойност. За целта се използва знака
звездичка *. Например ROWS="*,3*"означава, че прозореца се разделя на две части, втората от които е три пъти
по-голяма от първата. Параметрите се разделят със запетая и са заградени в
кавички.Сега ще ви направя една такава страница, ще я разделя вертикално на 3
части, първата ще има ширина 100 пиксела, втората 30 процента от ширината на
прозореца на браузъра, а третата ще заема всичкото свободно пространство,
независимо колко е то. Понеже няма да задам да се отварят други страници във
всяка рамка, те ще бъдат празни:
<HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*">
<FRAME NAME="first" >
<FRAME NAME="second">
< FRAME NAME="third">
</FRAMESET>
</HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*">
<FRAME NAME="first" >
<FRAME NAME="second">
< FRAME NAME="third">
</FRAMESET>
</HTML>
Натислете ТУК за да видите как изглежда такава страница. Всяка рамка се създава с
елемента <FRAME>. Чрез него се
задават атрибутите на рамката. Един от тях е името и чрез атрибута NAME. Как се използва името ще обясня след малко. Друг атрибут на <FRAME>
е SRC, следван от името на страницата която искате да се показва в тази рамка.
Ако обърнахте внимание, след като страртирахте страницата в горния пример,
всяка рамка си има някакъв ръб(border). Ако посочите с курсора на мишката върху
ръба, кликнете върху него и докато държите натиснат бутона влачите мишката
перпендикулярно на ръба, то размера на рамката се променя. Можете да забраните
това с атрибура NORESIZE на елемента <FRAME>. Също така можете да зададете дебелината на ръба в пиксели с атрибута BORDER и цвета му с BORDERCOLOR на елемента <FRAMESET>. Нека направим предишния пример така, че да забраним промяната на размера
на рамката и да направим ръба със син цвят и широк 6 пиксела.
<HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*" BORDER="6" BORDERCOLOR="0000FF">
< FRAME NAME="first" NORESIZE>
<FRAME NAME="second" NORESIZE>
<FRAME NAME="third" NORESIZE>
</FRAMESET>
</HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*" BORDER="6" BORDERCOLOR="0000FF">
< FRAME NAME="first" NORESIZE>
<FRAME NAME="second" NORESIZE>
<FRAME NAME="third" NORESIZE>
</FRAMESET>
</HTML>
Вижте как ще изглежда тази страница. Натиснете ТУК. Ако зададете BORDER="0" ръба на рамката няма да се вижда. Можете да задавате ширината и цвета на
ръба на всяка рамка поотделно. Ширината се задава с атрибута FRAMEBORDER на елемента <FRAME>, а цвета с BORDERCOLOR.
Рамките могат да се влагат една в друга. Например, можете да
разделите страницата на две части хоризонтално, а долната част да разделите на
още 2 и т.н.. Вижте как става:
<HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" >
<FRAME NAME="first" NORESIZE>
<FRAMESET COLS="20%,80%">
<FRAME NAME="second" NORESIZE>
< FRAME NAME="third" NORESIZE>
< /FRAMESET>
</FRAMESET>
</HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" >
<FRAME NAME="first" NORESIZE>
<FRAMESET COLS="20%,80%">
<FRAME NAME="second" NORESIZE>
< FRAME NAME="third" NORESIZE>
< /FRAMESET>
</FRAMESET>
</HTML>
Така горната рамка е по цялата дължина на прозореца на
браузъра и има ширина 100 пиксела, а долната е разделена на две вертинални
части, съответно на 20 и 80 процента от ширината на прозореца. Натиснете ТУК за да видите тази страница. Ако искате можете да разделите страницата
първо вертикално на две, като втората рамка я разделяте допълнително на две
хоризонтални рамки:
<HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,*" >
<FRAME NAME="first" NORESIZE>
<FRAMESET ROWS="20%,80%">
<FRAME NAME="second" NORESIZE>
< FRAME NAME="third" NORESIZE>
< /FRAMESET>
</FRAMESET>
</HTML>
<HEAD>
< TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,*" >
<FRAME NAME="first" NORESIZE>
<FRAMESET ROWS="20%,80%">
<FRAME NAME="second" NORESIZE>
< FRAME NAME="third" NORESIZE>
< /FRAMESET>
</FRAMESET>
</HTML>
Вижте ТУК
как изглежда. Сега нека направим една наистина
работеща страница с рамки. Нека страницата да бъде от две рамки. Първата да се
казва "menu" и да съдържа хиперлинкове до известни български сайтове.
Втората рамка с име "main" ще бъде празна, като линковете от първата
ще се показват във втората. За целта първо трябва да направим html документа
който да се показва в първата рамка :
<HTML>
<HEAD>
< TITLE>menu</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg">search.bg</A><BR>
<A HREF="http://www.dir.bg">dir.bg</A><BR>
<A HREF="http://www.gyuvetc.bg">гювеч.бг</A>
</BODY>
</HTML>
<HEAD>
< TITLE>menu</TITLE>
</HEAD>
<BODY>
<A HREF="http://www.search.bg">search.bg</A><BR>
<A HREF="http://www.dir.bg">dir.bg</A><BR>
<A HREF="http://www.gyuvetc.bg">гювеч.бг</A>
</BODY>
</HTML>
Запазете този файл като menu.html. Неговата функция е да ни
препраща към сайтовете при кликване върху надписите search.bg , dir.bg и
гювеч.бг . Този html документ ще се визуализира в лявата рамка. Дясната рамка
първоначално ще я оставим празна. Нека сега да направим html документа който да
раздели страницата на рамки :
<HTML>
<HEAD>
< TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="100,*" BORDER="0">
<FRAME NAME="menu" SRC="menu.html" TARGET="main">
<FRAME NAME="main">
</FRAMESET>
</HTML>
<HEAD>
< TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="100,*" BORDER="0">
<FRAME NAME="menu" SRC="menu.html" TARGET="main">
<FRAME NAME="main">
</FRAMESET>
</HTML>
Този html документ го запазете като frame.html. Чрез него
разделяме страницата на две рамки вертикално. Едната е широка 100 пиксела, а
втората заема останалата част от прозореца на браузъра. В първата рамка сме
задали да се покаже файлът menu.html който направихме за тази цел по-горе. На
тази рамка сме дали името "menu". Новото тук е атрибута <TARGET> на елемента <FRAME>. този атрибут показва на браузъра в коя точно рамка да се отварят
хиперлинковете, които съдържа страницата в тази рамка. В този случай на втората
рамка сме дали име "main" и атрибута <TARGET> от първата рамка сочи именно към втората. Натиснете ТУК за да видите резултата.
Понеже сме забранили да се показва ръба на рамките (BORDER="0"), тази страница ще изглежда сякаш няма рамки. Когато кликнете върху някой от хиперлинковете обаче, в дясната част на страницата(т.е. във втората рамка) ще се отваря съответния сайт.
Ако страницата която се отваря в рамката е по-голяма от размера на самата рамка, браузъра по подразбиране показва хоризонтален или вертикален плъзгач(scrollbar) с помощта на който можете да разглеждате цялата страница. Този плъзгач излиза в дязната или долната част от рамката, или и в двете в зависимост от големината на страницата. Вие можете да определите дали този плъзгач да се показва или не с атрибута SCROLLING на елемента <FRAME>. Този атрибут от своя страна има три параметъра. SCROLLING="yes" задължава рамката винаги да показва плъзгачите, независимо дали са нужни или не. SCROLLING="no" забранява показването им във всички случаи. Тази забрана обаче би била много неудобна ако страницата е по голяма от рамката, защото няма да можете да я видите цялата. SCROLLING="auto" е стойността по подразбиране. С параметър "auto" плъзгачите се показват само когато има нужда от тях. Сега нека направим една страница с две рамки. И в двете да се показва сайта на сърч.бг, само че в първата плъзгачите да са забранени, а във втората да се показват задължително.
Понеже сме забранили да се показва ръба на рамките (BORDER="0"), тази страница ще изглежда сякаш няма рамки. Когато кликнете върху някой от хиперлинковете обаче, в дясната част на страницата(т.е. във втората рамка) ще се отваря съответния сайт.
Ако страницата която се отваря в рамката е по-голяма от размера на самата рамка, браузъра по подразбиране показва хоризонтален или вертикален плъзгач(scrollbar) с помощта на който можете да разглеждате цялата страница. Този плъзгач излиза в дязната или долната част от рамката, или и в двете в зависимост от големината на страницата. Вие можете да определите дали този плъзгач да се показва или не с атрибута SCROLLING на елемента <FRAME>. Този атрибут от своя страна има три параметъра. SCROLLING="yes" задължава рамката винаги да показва плъзгачите, независимо дали са нужни или не. SCROLLING="no" забранява показването им във всички случаи. Тази забрана обаче би била много неудобна ако страницата е по голяма от рамката, защото няма да можете да я видите цялата. SCROLLING="auto" е стойността по подразбиране. С параметър "auto" плъзгачите се показват само когато има нужда от тях. Сега нека направим една страница с две рамки. И в двете да се показва сайта на сърч.бг, само че в първата плъзгачите да са забранени, а във втората да се показват задължително.
<HTML>
<HEAD>
< TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME NAME="search1" SRC="http://www.search.bg" SCROLLING="no">
<FRAME NAME="search2" SRC="http://www.search.bg" SCROLLING="yes">
</FRAMESET>
</HTML>
<HEAD>
< TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME NAME="search1" SRC="http://www.search.bg" SCROLLING="no">
<FRAME NAME="search2" SRC="http://www.search.bg" SCROLLING="yes">
</FRAMESET>
</HTML>
Какво научихте за рамките :
1. Рамките разделят страницата ви на отделни части, във всяка от които се
показва друга страница.
2. Можете да задавате големината на рамката, дебелината и цвета на ръба,
както и да забранявате или разрешавате промяната на размера на рамката.
3. Можете да насочвате хиперлинкове от една рамка да се показват в друга
рамка.
