Miten muotoilla lomakkeita Web-suunnittelussa
Lomakkeita pidetään usein yksi tuskallisimmista HTML-elementeistä. Mutta muotoilu ja kehitys ovat edenneet harppauksin; se ei ole läheskään yhtä kovaa kuin se oli.
Sanotaan, että vaikka teollisuus on edistynyt valtavasti, jotkut esteet ovat edelleen käytössä. Loppujen lopuksi katoavat muodot ovat mahdollisia; se vie vain jonkin verran työtä.
Tässä viestissä tutustumme useimpiin käyttämiin lomakekontrolleihin ja eri työkaluihin ja lisäosoitteisiin, jotka auttavat sinua lomakkeiden käyttöönotossa verkkosivustoillasi.
Jos sinulla on muita vinkkejä tai linkkejä muihin hyödyllisiin resursseihin, voit lähettää ne kommentteihin.
Hallintalaitteiden rikkoutuminen
Aloitetaan jakamalla ne kahteen kauhaan, koska jotkin hallintatoimenpiteet eivät ole koskaan olleet kovin vaikeita työskennellä.
Ystävällinen valvonta
Helpoimmin toimivat ohjaimet ovat perussyöttölaatikko, tekstipinta ja painike. Ne toimivat hyvin standardin CSS: n kanssa ja ovat onneksi yleisin muotoelementtejä. Jos sinun ei tarvitse käyttää vaikeampia, niin olette onnekas.
Kun CSS3: n pyöristetyt kulmat, pudotusvarjot ja kaltevuudet edistyvät, monet yleisimmistä tyyleistä ovat nyt entistä helpommin. Sinulla ei ole mitään pelättävää näillä kontrolleilla.
Vaikea valvonta
Tietyt muut muodot voivat olla massiivinen kipu kaulassa. Jos esimerkiksi suunnittelet pudotusvalikon, joka on erittäin tyylitelty, kehittäjä todennäköisesti haluaa keskustella kanssasi. Sinun tyylisuunnittelusi on varsin rajoitettu: reunaviiva, pehmuste, taustaväri, tällainen asia. Jos tarvitset enemmän muotoa kuin tämä, suosittelen, että otat yhteyttä kehittäjään varmistaaksesi, ettet luo suurta ongelmaa heille.
Häiriöitä aiheuttavat muodot ovat:
- valitse useita,
- valitse avattava,
- valintaruutuja,
- radio-painikkeet,
- tiedoston lataaminen.
Nykyaikaiset työkalut lomakkeisiin
Kuten mainittiin, käytettävissä on useita uskomattomia työkaluja, jotka auttavat sinua muuttamaan muotoja.
Virallistaa on salainen ase, jonka avulla perusmuodon hallinta ja tyylit toimivat johdonmukaisesti selaimissa. Ja sen oletustyylit ovat puhtaita ja kauniita. Tämä mahtava kirjasto toimii myös laajalla valikoimalla JavaScript-kirjastoja, kuten jQuery , dojo ja MooTools .
Muodonohjauksen korvaaminen
Jos haluat tehdä radikaaleja asioita lomakkeeseen, käytettävissä on hyödyllisiä työkaluja. Loistava taktiikka verkkotyömuotoja varten on piilottaa todellinen hallinta ja korvata se täysin valmistetulla tavalla. Tämä antaa paljon paremman hallinnan miten lomake tekee.
Yksi hieno esimerkki tästä on yhtenäinen , jQuery-plug-in loistavien lomakkeiden luomiseen. Se on kolmessa eri teemassa. Ja jos haluat luoda mukautetun teeman, käytä vain palvelua CSS-generaattori voit helposti irrottaa laajennuksen.
Toinen jQuery-laajennus Niceforms . Vaikka siinä ei ole Uniformin kätevää nauhoitusominaisuutta, se tarjoaa perusystyyliä, joka sopii hyvin tarpeisiisi juuri sellaisenaan.
Lopuksi on kaupallinen jQuery-laajennus Wijmo . Moduuli, josta me olemme kiinnostuneita, on muotoinen sisustaja , joka on itse asiassa vapaasti käytettävä. Se käsittelee muutamia ongelmallisempia valvontatoimenpiteitä: valintaruudut, valintanäppäimet ja pudotusvalikot. Osana laajempaa kaupallista kirjastoa tämä työkalu tuo mukanaan joitain etuja, joista tärkeimpiä ovat vahvat dokumentointi ja maksetaan tuki . Lopuksi rakastan sitä tapaa, jolla se hoitaa nylkemistä; se käyttää jQuery UI ThemeRoller , mikä helpottaa yksilöllisten malleja.
Kauppojen muotoilu
Lopuksi, jos ei ole lomakekontrollia, joka tekee mitä tarvitset, voit keksiä yhden! Jotkut erittäin älykkäät ihmiset ovat jo tehneet paljon tästä, ja ehkä yksi heidän työkaluistaan jo sopii tarpeisiisi.
Sliders
Yksi asia, joka puuttuu tavallisesta HTML: stä (mutta on osa HTML5: tä), on perusliukusäätimen hallinta. Tähän on monia vastauksia, mukaan lukien yksi Wijmo , joka perustuu jQuery UI -liukusäädin .
uploaders
Vaikka voit käyttää tiedoston syöttöohjausta, jotta käyttäjät voivat valita tiedoston, jonka haluat ladata, saatat haluta jotain hieman snazzier, varsinkin jos tiedostonsiirrot ovat tärkeitä verkkosivustollesi. Yksi parhaista ratkaisuista on Uploadify . Sen avulla käyttäjät voivat valita useita tiedostoja ja nähdä edistystä. Siinä on runsaasti asettelua ja toiminnallisuutta.
Slider-tyyppiset valintaruudut ja valintapainikkeet
Yksi suosittu UI-elementti (iPhonen ansiosta) on päälle / pois-kytkin, joka liukuu puolelta toiselle. Kanssa tämä kätevä jQuery-laajennus , voit muuttaa perusvalintaruudun tai valintanappi yhdeksi. Olipa kyseessä sitten keksijän lomakekontrolli tai lomakkeen korvaava työkalu, se on loistava tapa antaa käyttäjille mahdollisuuden ottaa vaihtoehtoja käyttöön ja poistaa ne käytöstä.
Creative-painikkeet
jQuery UI on toinen mielenkiintoinen toteutus perusvalvonnassa. Mitä se merkitsee painikkeet voidaan käyttää myös tekemään asetuksia painikkeiden, valintanäppäinten ja valintaruudun perusteella. Näin tehdessäsi muutat nämä ohjaimet toiseen visuaaliseen muotoon. Alla olevassa kuvassa on joukko painikkeita, jotka on merkitty painikkeilla.
HTML5-lomakkeet
HTML5 on tuonut paljon jännittäviä mahdollisuuksia web-lomakkeisiin. Vaikka se ei kuulu tämän artikkelin soveltamisalaan, se on silti merkityksellinen. Seuraavassa on joitain tärkeitä resursseja, joiden avulla voit kaivaa:
- ” Hulluuden muoto , "Dive Into HTML5;
- ” Hauskaa HTML5-lomakkeilla , "Richard Shepherd;
- ” HTML5-lomakkeet , "Wufoo;
- ” Onko Field Day HTML5-lomakkeilla , "Inayaili de León.
Yhteenvetona voidaan todeta, että lomakekontrolli on yksi tärkeimmistä kriittisistä esteistä perustietokannan kehittämisessä.
Suunnittelija, joka ymmärtää rajoitukset, tuntee työkalut ja tunnistaa mahdollisuudet helpottamiseen, pystyy tekemään tietoisia päätöksiä, jotka viime kädessä parantavat lopputulosta.