Bootstrap

Kompletan responsivnog formulara.
vidi code » vidi stranicu

Osnovni responsivni formular

Osnovni responsivni formular u bootstrapu kreira se na način da se u DIV stavi form-group, a u INPUT form-control CSS klase.

Primjer osnovnog responsivnog formulara.
vidi code » vidi stranicu

Primjetimo da je širina polja 100%. Ukoliko želimo smanjiti dužinu input polja, ispred form-group stavit ćemo col-xs-* , col-sm-* , col-md-* ili col-lg-* klase.

Primjer responsivnog formulara sa smanjenom dužinom.
vidi code » vidi stranicu

Inline Form

Inline form je formular čijemu su svi elementi u jednoj liniji. Ovo se postiže stavljanjem klase form-inline unutar FORM taga.

Primjer responsivnog formulara kojemu su svi elelemnti u istom redu.
vidi code » vidi stranicu

Primjer responsivnog formulara sa kombiniranim raasporedom. Prva dva input polja su inline dok druga dva nisu. Druga dva polja imaju dužinu 100%.
vidi code » vidi stranicu

Primjer responsivnog formulara sa kombiniranim raasporedom. Prva dva input polja su inline dok druga dva nisu. Uz to druga dva polja imaju skraćenu dužinu i odgovarajuće pomake udesno i dolje kako bi ljepše izgledalo.
vidi code » vidi stranicu

Horizontal Form

Horizontal form je forma kod koje su poravnati labeli i form elementi. To se postiže na način da se unutar FORM taga stavi klasa form-horizontal.
Ovo vrijedi samo za uređaje čiji je ekran veći od 768px.

Primjer horizontalno poravnetog formulara sa različitim dužinama polja.
vidi code » vidi stranicu

Form Elementi

Koji form elementi koriste kakve CSS klase prikazano je dolje:

1. INPUT koristi .form-control
2. TEXTAREA koristi .form-control
3. SELECT koristi .form-control
4. CHECKBOX koristi .checkbox i .checkbox-inline
5. RADIO koristi .radio i .radio-inline

INPUT

INPUT -- Različiti primjeri responsivnog input polja: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel i color.
vidi code » vidi stranicu

TEXTAREA

Običan textarea koristi form-group klasu.

TEXTAREA -- Različiti rasporedi textarea polja.
vidi code » vidi stranicu

Kako bi se definirala visina i širina textarea polja koristi se:

TEXTAREA -- Definiranje visine i širine textarea polja pomoću CSS svojstava height i width.
vidi code » vidi stranicu

TEXTAREA -- Definiranje visine textarea polja pomoću HTML atributa rows="8".
vidi code » vidi stranicu

CHECKBOX i RADIO

Checkbox i radio se stavljaju unutar LABEL taga. Div tag može imati slijedeće klase: checkbox , checkbox-inline, radio, radio-inline

CHECKBOX i RADIO -- Osnovna upotreba.
vidi code » vidi stranicu

CHECKBOX i RADIO u kombinaciji sa input i textarea.
vidi code » vidi stranicu

Ako želimo da checkboxovi budu u jednoj liniji treba u LABEL tagu upotrijebiti checkbox-inline. Za radio dugmad to je radio-inline.

Primjer sa checkbox-inline i radio-inline.
vidi code » vidi stranicu

SELECT

Tag SELECT koristi klasu form-control.

Primjer upotrebe responsivnog select taga.
vidi code » vidi stranicu

Focus

Predefinirano svako input polje ima fokus označen plavom sjenkom. Ovo je definirano .form-control:focus klasom unutar bootstrap.css fajla.

Izmjenjena boja fokusa i automatski fokus pri učitavanju stranice napravljen u jQueriju.
vidi code » vidi stranicu

Help Block

Help Block služi za ispis opisa ispod from polja. Za to služi help-block klasa.

Primjer sa help-block klasom.
vidi code » vidi stranicu

Validacija

Validacija predstavlja označavanje inputa da li je unos bio uspješan ili nije. Može biti: has-success , has-warning ili has-error. Najbolje ga je koristiti zajedno sa form-group jer onda svi child elementi koji imaju klase control-label, form-control i help-block poprimaju odgovarajuću boju.

Primjer sa validacijama.
vidi code » vidi stranicu

Visina polja

Visinu polja određuju klase: input-lg i input-sm

Primjer sa input-lg i input-sm.
Primjetiti kako ostale veličine za label i help-blok ostaju iste.
vidi code » vidi stranicu

Kako bi se promijenile sve veličine u form-groupi potrebno je koristiti form-group-lg i form-group-sm.

Primjer sa form-group-lg i form-group-sm.
vidi code » vidi stranicu