УРОК 16 : Формуляри - 1 част

Формулярите са важен HTML елемент. Служат за получаване на информация от вашите посетители или им осигурява възможност да изразът мнение по определен въпрос (например анкетите).

Началният маркер за създаване на формуляр е <form>...</form>. Между него се разполага еденичния маркер <input /> като всеки един формуляр се добавя чрез този маркер. Например, трябва да разположим в <form>...</form> два маркера <input />, за да добавим 2 формуляра. Ето и как ще изглежда кода :


<form>

 <input type="стойност" />
 <input type="стойност" />

</form>

Задължителен елемент на <input />  е атрибута type="стойност", който задава типа на формуляра. Някои от основните типове формуляри са :

  • текстово поле - за да се създаде, трябва като стойност на type да запишем text. Например :

    <form>

     <input type="text" />

    </form>

    Ще изглежда така:

    По подразбиране полето е празно и с дължина 20 символа. Може да промените това като в <input /> вмъкнете и атрибутите size="число,равно на броя символи" (за да определите дължината) и value="текст" (за да се вижда текст). Също така можете да ограничите броя на въвеждащите символи чрез атрибута maxlenght="число,равно на броя символи".

    Препоръчва се употребата и на атрибута name="стойност", където стойността е някакъв текст описващ полето(не се вижда от посетителите) . За да обясните на посетители за какво служи тектовото поле трябва да въведете поясняващия текст преди маркера <input />. Например :

    <form>

    Вашето име: 
    <input type="text" name="ime" size="45" maxlenght="40" value="Не повече от 40 символа"/>

    </form>

    Ще изглежда така :

    Вашето име:

  • поле за множествен избор (чрез отметки) - за да се създаде, трябва като стойност на type да запишем checkbox. Например :

    <form>

    Коя марка кола предпочитате?<br />

     <input type="checkbox" name="koli" value="bmw" checked="checked" />
    BMW
    <br />

     <input type="checkbox" name="koli" value="audi" />
    Audi
    <br />

     <input type="checkbox" name="koli" value="mercedes" />
    Mercedes

    </form>

    Ще изглежда така:

    Коя марка кола предпочитате?
    BMW
    Audi
    Mercedes

    Разглеждайки примера, сигурно сте забелязали, че на атрибутаname има зададена една и съща стойност на всички полета за маркиране. За този тип формуляр е ЗАДЪЛЖИТЕЛНО стойностите на name да са еднакви. За да се различават полетата се използва атрибута value="текст"

    Ако желаете едно от полетата да е маркирано по подразбиране, трябва да използвате атрибута checked като за стойност му се задава собственото му название - checked="checked" .

  • поле за единичен избор ( чрез радиобутони) - за да се създаде, трябва като стойност на type да запишем radio. Например :

    <form>

    Коя марка кола предпочитате?<br />

     <input type="radio" name="koli" value="bmw" checked="checked" />
    BMW
    <br />

     <input type="radio" name="koli" value="audi" />
    Audi
    <br />

     <input type="radio" name="koli" value="mercedes" />
    Mercedes

    </form>

    Ще изглежда така :

    Коя марка кола предпочитате?
    BMW
    Audi
    Mercedes

    Всички атрибути и правила са като при полетата за множествен избор!


  • падащи менюта - те се оказват по-малко по различен начин. Вместо единичния маркер <input /> се използва маркера <select>...</select>.В маркера задължително се записва атрибута name="стойност", където стойността е някакъв текст описващ всички опциите на менюто. Между <select>...</select> се поставя <option>...</option>. Текстът, който ще се изписва като падащо меню се записва между <option>...</option>. В него се използва атрибута value="стойност", чиято стойност различава опцийте една от друга. За да ви стане по ясно, разгледайте примера : 

    <form>

    Коя марка кола предпочитате (изберете от падащото меню)?<br />
     <select name="koli">
       <option value="bmw">BMW</option>
       <option value="audi">Audi</option>
       <option value="mercedes">Mercedes</option>
     </select>

    </form>

    Ще изглежда така :

    Коя марка кола предпочитате (изберете от падащото меню) ?

    Горния пример е за падащо меню с единичен избор. За да направите възможно маркирането на повече от една опция от падащото меню, е нужно в маркера <select>...</select> да използвате атрибута multiple като за стойност му се задава собственото му название - multiple="multiple"

    Oще за тези и други видове формуляри може да прочетете в www4u.search.bg

Преминете към УРОК 17 : Формуляри - 2 част=>

Нагоре