Dnevnik eklektika - Piše Dragan Babić

Uni-Form - Jedan formular za sve upotrebe

Update: Evo i teksta na engleskom blogu (svi updatesi su tamo) kao i linka do priče na Diggu.
Update #2: Hvala CSS Help Pile, CSS Globe.com, CSS Beauty i svima ostalima koji su podržali projekat. Do sada preko 400 downloada Uni-Forma, preko 2000 pregleda i preko 150 linkova na del.icio.us. Hvala još jednom!

Koja je ideja iza Uni-Forme?

Uni-Form bi trebalo da ponudi dakle pristupačan (dostupan), upotrebljiv i dobro formiran markup za formulare, stilizovan uz pomoć css-a koji je proveren i radi u svim major browserima (trenutno je cilj IE6, IE7, Fx1.5.x, Fx2.x, Opera9, Safari2, Konqueror).

Cilja se da cela stvar bude što više „plug and play”, tj. da sve što je potrebno da korisnici urade je da uključe Uni-Form markup u svoj dokument, povežu Uni-Form css fajl u head, izvrše par estetskih izmena u css-u da bi se ovaj uklopio sa njihovim dizajnom i to je to. Trebalo bi da imaju gotov form layout.

Uni-Form „units”

Cela ideja iza Uni-Forme je potekla iz microformats pokreta i Andy „Malarkey” Clarkea i Doug Bowmanove ideje o standardizaciji markupa, i njegove nomenklature.

Kako su formulari u html-u pomalo „posebna” priča, i ljudi najčešće baš sa njima imaju problema i „muku muče”, odlučio sam da taj problem rešim preko tzv. „unita” koje će sadržati određene form kontrole i njihove kombinacije. Tako da postoji unit za text input, za textarea, za select box, kombo select box (jedan label – više select boxova), itd. Ono što bi korisnik trebao da uradi je da copy/paste tehnikom uzme one unite koji su mu potrebni, i da ih zaređa na svojoj stranici – poželjno na način na koji je savetovano.

Kao primer – ovo je unit za text input element:

          <div class="ctrlHolder">
            <span>
              <label for="password"><em>*</em> Choose Password</label>
              <input name="password" id="password" value="" size="35" maxlength="25" type="password" class="textInput" />
            </span>
          </div>

Uni-Form layouts

Postoje dve varijante layouta formulara.

1. Slučaj kada su labele „u liniji” sa input poljima – .inlineLabel

1. Slučaj kada su labele i input polja u posebnim redovima, jedno ispod drugog – .blockLabel

Prvi slučaj je podesniji recimo za šire layoute u koje se uklapa Uni-Form, gde ima mesta po horizontali. U ovoj varijanti korisnik može da bira (kroz css) da li želi da tekst labele bude poravnate sa desne ili leve strane – u zavisnosti od preferencije.

Naravno nije moguće postići 100% plug and play rešenje, pa sam korisnik mora da unese nekoliko css vrednosti poput širina input elemenata, što je sve naznačeno u css komentarima.

Svaki selektor u css-u je takođe završen sa komentarom /* your rules below */ ispod koga korisnici mogu dodavati svoje osobine ili uticati samo na dizajn samih form elemenata. Ovo je urađeno baš zbog korisnika koji nisu toliko iskusni da bi se sprečilo kvarenje layouta od strane korisnika koji može ako nešto ne valja samo da obriše svoja dodata pravila i cela stvar bi se vratila u početno stanje.

Dodaci

Zarad povećanja upotrebljivosti (usability) Iliju sam zamolio da sklopi par linija JavaScripta za „highlightovanje” redova aktivnih polja što je po meni vrlo korisna funkcija, i radi bolji posao od :focus css pseudoklase, koja btw nije ni podržana od strane Internet Explorera.

Toliko za sada, naravno zainteresovan sam za feedback korisnika, pa ukoliko neko odluči da se poigra sa Uni-Formom, neka vikne šta u komentarima da vidimo kako možemo unaprediti celu stvar.

• « Bunker fest angažman 23.03.'07
• Socijalna mreža na pravi način - virb.com »

Komentari na ovaj unos 8

1. NIXA kaže 22/03/07 07:42 PM

   mozda bi bilo dobro da postoji required id i da u se doda neki notification za ta polja …ali to je ipak js igrarija ….

2. Ilija Studen kaže 22/03/07 09:35 PM

   Ideja mi se maksimalno sviđa, ali ipak tu nedostaje par stvari. Osnovni nedostatak koji vidim je to što si jednostavno preskočio jako bitnu funkciju formi – prikaz grešaka. Inline provera grešaka je nešto što polako postaje norma u situacijama gde želiš maksimalan korisnički doživljaj a to podrazumeva client side validaciju podataka i jasno vizuelno označavanje polja koja sadrže grešku i polja sa ispravnim vrednostima.

   Da li si razmišljao o tom delu ili smatraš validaciju i označavanje ispravnih i neispravnih vrednosti malim overkillom za ono što si imao na umu da postigneš ovim projektom?

3. Oliver Petković kaže 22/03/07 11:27 PM

   Jako korisna stvar, ali kao sto Ilija kaze prikaz greski je obavezna stavka.

   E sada, prvo predlozi da li da se sve greske prikazu na pocetku forme ili kod svakog pogresno popunjenog polja.

   Cesto koristim, copy-paste prilikom kreiranja nove forme, pa samo prilagodim slucaju.

   Svakako interesantna tema. Mozda i razvoj neke php skripte…

4. Dragan Babić kaže 22/03/07 11:54 PM

   

   Jedna verzija Uni-Forma ima stil za prikaz grešaka, ali pravo da vam kažem nisam bio siguran koliko one pripadaju ovome ovde. Najlakše je dodati samo par linija CSSa. Da li onda ima smisla dodavati i poruke za potvrđivanje uspešno obavljene akcije? Pitanje je koliko je to potrebno jer kapiram da će ih korisnik i ovako i onako morati prilagoditi vizuelno svom sajtu.

5. Ilija Studen kaže 23/03/07 04:59 PM

   Prevencija i obrada grešaka je jedna od osnovnih stvari kada su forme u pitanju. Ne vidim zašto bi to bilo isključeno. Doduše, mislim da celu stvar treba držati client side strane. Znači samo XHTML, CSS i JS, bez server side tehnologija (PHP helperi i slično). Kada se sve lepo reši na client strani nije teško napisati par helpera koji olakšavaju upotrebu celog rešenja u dinamički generisanim sajtovima. Bio bi to lep addon na postojeće rešenje, ali ne mislim da je pametno da se te dve stvari guraju kao jedan projekat.

   Videću da skuckam par JS skriptica koje će učiniti ovu osnovu malo dinamičnijom. Ovaj JS za higlightovanje je shakovan u trenutku kada je bio potreban i može se dosta unaprediti uz još par dodataka.

   Joj što velim kad sam ovako ozbiljan i zvaničan :D

6. Marko Petkovic kaže 28/03/07 01:46 AM

   Trenutno radim sa jednim odlicnim programerom na web directory skriptu, i taman kad treba da sredjujem front end, naletim na ovo na cssbeauty.com. Izgleda mi super i mislim da ce bas da legne za submit link stranicu. Pogledacu detaljno sutra, pa cu da se javim sa pitanjima i komentarima.

7. Eniac kaže 11/04/07 08:22 PM

   http://www.smashingmagazine.com/2007/04/12/best-of-march-2007/

   Napisao sam vec na DPT, ali opet za one geekove poput mene koji citaju komentare

8. Aleksandar kaže 14/04/07 11:41 AM

   Sada imam malo vremena, pa sam počeo da proučavam ovo. Cela stvar je dosta slična onome što sam i inače radio (čak za više checkbox/radi opolja koristiš p class=label dok ja obično pišem p class=labela :).

   Ovo je namenjeno kao p&p rešenje i kao takvo je super, no ja volim da za sebe pojednostavim stvari, pa razmišljam da li je class=„ctrlHolder” zaista neophodno. Ja obično koristim fieldsetove na koje dodelim klasu pa to koristim za stilizovanje svega ispod.

   Koji je tačno razlog zašto si koristio span oko label + input[text] polja? Kapiram za checkboxove (izrazito me nervira što nema jednostavnog načina da uravnaš label tekst i samu kontrolu) no mi ovde baš nije najjasnije.

Komentari su zatvoreni za ovaj unos.