Формуляри

Освен за показване на информация WEB страниците могат да служат и за събиране на информация от потребителя. Това става с така наречените формуляри. За съжаление езика HTML не ви позволява да управлявате информацията във формулярите, а само да ги визуализирате. Двойката елементи за разполагане на формуляри е <FORM></FORM>. Между нея могат да се разполагат неограничен брой формуляри. Всеки един формуляр се разполага с единичния елемент <INPUT>, който задължително трябва да съдържа двата атрибута NAME и TYPE. NAME задава името на формуляра, а TYPE видът му. Нека разгледаме различните стойност на TYPE.

<HTML>
<HEAD>
<TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME=“form1″ TYPE=“text“>
<INPUT NAME=“form2″ TYPE=“text“>
</FORM>
</BODY>
</HTML>

На екрана се появяват полета за въвеждане на данни:
label1

  • Такъв тип едноредови текстови полета се задават със стойността на атрибута TYPE=“text“. Можете да променяте дължината на полето с атрибута SIZE. Ако пропуснете SIZE се показва поле с дължина 20 символа. По подразбиране полето е празно, но можете да му зададете някаква начална стойност с атрибута VALUE. 
  • Ако текста който пишете е по дълъг от дължината на полето, той автоматично започва да се скролира наляво и разкрива новонаписаните символи. Можете да ограничите дължината на изписвания текст с атрибута MAXLENGHT. Например с MAXLENGHT=“40″ ограничавате надписа до 40 символа.
  • Друг параметър на атрибута TYPE е password (парола). Той действа по същия начин като text, с изключение на това, че в полето не се показва самия текст, който въвеждате, а звездички.
  • Друг тип формуляри са кутиите с отметки. Те се задават със стойността checkbox на атрибута TYPE.

<HTML>
<HEAD>
<TITLE>forms</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT NAME=“form4″ TYPE=“checkbox“ ><BR>
<INPUT NAME=“form5″ TYPE=“checkbox“ CHECKED>
</FORM>
</BODY>
</HTML>

  • Кутиите с отметки служат за избор на една или няколко възможности едновременно. Ако кликнете в кутията, отметката се появява, при повторно кликване изчезва. Можете да правите отметки в повече от една кутия. По подразбиране кутиите с отметки се показват празни. Ако искате да се показва отметка в дадена кутия, използвайте атрибута checked.
  • Подобни на кутиите с отметки са радио бутоните. Създават се с атрибута TYPE=“radio“. Разликата е, че при радио бутоните може да бъде отметнат само един бутон – когато изберете друг отметката в предишния изчезва. Особеното при радио бутоните е, че всички трябва да носят едно и също име. 
  • Друг тип формуляри са бутоните SUBMIT и RESET. Когато се използват в комбинация с друг формуляр, тези два бутона съответно потвърждават или изчистват въведената информация. 

<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 (от колко реда да се състои полето).

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

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

  • При кликване с мишката върху стрелката надолу се показва меню с 3 избора, избор 1, избор 2 и избор 3. Стойностите, които да се показват в менюто се задават с елемента <OPTION>. 
  • Атрибута SIZE на елемента <SELECT> задава броя на редовете, които да се показват в менюто. Когато SIZE=“1″, тогава се наблюдава т.нар. падащо меню. Ако зададете стойност по-голяма от 1, тогава вече ще се показва вертикална превъртаща лента.

Вашият коментар