четвъртък, 15 март 2018 г.

Формуляри

Освен за показване на информация WEB страниците могат да служат и за събиране на информация от потребителя. Това става с така наречените формуляри. За съжаление езика HTML не ви позволява да управлявате информацията във формулярите, а само да ги разполагате на страницата си. Двойката елементи за разполагане на формуляри е <FORM></FORM>. Между тази двойка елементи могат да се разполагат неограничен брой формуляри. Всеки един формуляр се разполага с единичния елемент <INPUT>. Този елемент трябва задължително да съдържа двата атрибута NAME и TYPE. Атрибута NAME задава името на формуляра а TYPE видът му. Нека разгледаме различните стойности на TYPE.
<HTML><BODY>
<FORM>
<INPUT NAME=
"form1" TYPE="text">
</FORM>
</BODY>
</HTML>
Този HTML документ ще покаже на екрана следното текстово поле: 
Такъв тип едноредово текстово поле се задава със стойността на атрибута TYPE="text". Вие можете да променяте дължината на полето с атрибута SIZE. Ако пропуснете SIZE се показва поле с дължина 20 символа. По подразбиране полето се показва празно, но вие можете да  зададете някаква начална стойност на полето. Това става с атрибута VALUE. Нека направим едно текстово поле с дължина 50 символа и надпис в него "това поле съдържа текст и има дължина от 50 символа".

<FORM>
<INPUT NAME=
"form2" TYPE="text" SIZE="40" VALUE="това поле съдържа текст и има дължина от 40 символа">
</FORM>

Понеже текста който се показва е по-дълъг от 40 символа, последните няколко символа се скриват. Ако кликнете върху полето можете да местите видимата част на текста наляво и надясно с помощта на стрелките за движение от клавиатурата. Също така можете да напишете свой текст в полето. Ако текста който пишете е по дълъг от дължината на полето, той автоматично започва да се скролира наляво и разкрива новонаписаните символи. Опитайте! Можете да ограничите дължината на изписвания текст с атрибута MAXLENGHT. Например с MAXLENGHT="40" ограничавате надписа до 40 символа.
Друг параметър на атрибута TYPE е password. Той действа по същия начин като text, с изключение на това, че в полето не се показва самия текст, който въвеждате, а звездички.

<FORM>
<INPUT NAME=
"form3" TYPE="password">
</FORM>


checkbox
Напишете нещо в това поле и ще видите как всеки символ се заменя със звездичка. Това е особено полезно, когато текста е някаква парола и не трябва да се вижда от хората около вас.
Друг тип формуляри са кутиите с отметки. Те се задават със стойността checkbox на атрибута TYPE.

<FORM>
<INPUT NAME=
"form4" TYPE="checkbox" ><BR>
<INPUT NAME=
"form5" TYPE="checkbox"><BR>
<INPUT NAME=
"form6" TYPE="checkbox" CHECKED>
</FORM>


Кутиите с отметки служат за избор на една или няколко възможности едновременно. Ако кликнете в кутията, отметката се появява. Ако кликнете повторно отметката изчезва. Можете да правите отметки в повече от една кутия. По пдразбиране кутиите с отметки се показват празни. Ако искате да се показва отметка в дадена кутия, използвайте атрибута checked.
  
радиобутоните
  Подобни на кутиите с отметки са радиобутоните. Разликата е, че при радиобутоните може да бъде отметнат само един бутон. Когато изберете друг бутон, отметката в предишния изчезва. Особеното при радиобутоните е, че всички трябва да носят едно и също име, в случая NAME="R1". Радиобутон се създава с атрибута TYPE="radio".

<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>




бутоните SUBMIT и RESET
 Друг тип формуляри са бутоните SUBMIT и RESET. Когато се използват в комбинация с друг формуляр, тези два бутона съответно потвърждават или изчистват въведената информация. Вижте :
     Бутона RESET  изчиства полето, в случай че сте въвели нещо в него, а бутона SUBMIT потвърждава въведената информация. В случая при натискане на бутона SUBMIT няма да има ефект. Опитайте! Въведете нещо в полето и натиснете бутоните! Ето как изглежда HTML кода на горния пример :

<FORM >
<INPUT TYPE=
"text" NAME="T1" SIZE="20">
<INPUT TYPE=
"submit" VALUE="Submit" NAME="B1">
<INPUT TYPE=
"reset" VALUE="Reset" NAME="B2">
</FORM>
   SUBMIT бутон се създава с атрибута TYPE="submit". Атрибута VALUE="Submit" задава какъв да бъде надписа на бутона. Можете да го промените по свое желание. За бутона RESET се ползва атрибута TYPE="reset". Останалите атрибути на RESET действат  аналогично с тези на SUBMIT.

формуляр във вид на многоредово поле
   Можете да създадете формуляр във вид на многоредово поле с елемента <TEXTAREA>. Размера на полето се задава с атрибутите COLS и ROWSCOLS показва колко символа да е широко полето, в случая 30, а ROWS от колко реда да се състои, в случая 3. 

<FORM >
<TEXTAREA ROWS=
"3" NAME="S1" COLS="30">textarea</TEXTAREA>
</FORM>
    Когато използвате елемента <TEXTAREA>, не се използва елемент <INPUT>. Текста, който се намира между  <TEXTAREA> и </TEXTAREA>,  се показва по подразбиране в полето. Ако пропуснете текста полето ще се покаже празно.

падащите менюта
    Последния тип формуляри, който ще ви покажа са падащите менюта. Такъв вид формуляри се създават с елемента <SELECT>. Вижте : 
 
    Кликнете с мишката върху стрелката надолу и ще се покаже меню с 3 избора, избор 1, избор 2 и избор 3. Стойностите, които да се показват в менюто се задават с елемента <OPTION>. Вижте HTML кода на горния пример :

<FORM >
<SELECT SIZE=
"1"NAME="D1">
    <OPTION>
избор 1</OPTION>
    < OPTION>
избор 2</OPTION>
    < OPTION>
избор 3</OPTION>
</SELECT>
</FORM>
   Атрибута SIZE на елемента <SELECT> задава броя на редовете, които да се показват в менюто. Когато SIZE="1", тогава се наблюдава т.нар. падащо меню. Ако зададете стойност по-голяма от 1, тогава вече ще се показва вертикална превъртаща лента. Вижте горното меню, само че със стойност SIZE="5" :