Hoe Formulieren te temmen in Web Design
Formulieren worden vaak beschouwd als een van de meest pijnlijke HTML-elementen om te programmeren. Maar het ontwerp en de ontwikkeling van formulieren zijn met sprongen verlopen; het is lang niet zo moeilijk als het ooit was.
Dat gezegd hebbende, terwijl de industrie enorme vooruitgang heeft geboekt, zijn er nog enkele hindernissen. Uiteindelijk zijn temmen vormen mogelijk; het kost gewoon wat werk.
In dit bericht bekijken we een aantal van de meest gebruikte formulierbesturingselementen en verschillende hulpprogramma's en plug-ins die u moeten helpen bij het inzetten van formulieren op uw websites.
Als je nog andere tips of links hebt naar andere nuttige bronnen, kun je deze in de reacties plaatsen.
De besturing uitschakelen
Laten we beginnen met het opsplitsen van twee emmers, omdat sommige formulierbedieningen nog nooit zo moeilijk zijn geweest om mee te werken.
Vriendelijke bediening
De knoppen waarmee u het gemakkelijkst kunt werken, zijn het basisinvoervak, het tekstgebied en de knop. Ze werken goed met standaard CSS en zijn gelukkig de meest voorkomende vormelementen. Als je de moeilijkere niet hoeft te gebruiken, dan heb je geluk.
Met de voortgang van CSS3 afgeronde hoeken, slagschaduwen en verlopen, zijn veel van de meest voorkomende stijlen nu nog eenvoudiger. Je hebt niets om bang voor te zijn met deze bedieningselementen.
Lastige controles
Bepaalde andere vormcontroles kunnen een enorme pijn in de nek zijn. Als u bijvoorbeeld een drop-down-besturingselement ontwerpt dat extreem gestileerd is, zal de ontwikkelaar waarschijnlijk met u willen chatten. Je opties voor het stylen zullen behoorlijk beperkt zijn: randkleur, opvulling, achtergrondkleur, dat soort dingen. Als u meer styling nodig hebt, raad ik u aan de ontwikkelaar te raadplegen om ervoor te zorgen dat u geen groot probleem voor hen creëert.
Lastige formulierbesturingselementen zijn onder meer:
- selecteer meerdere,
- selecteer drop-down,
- vakjes,
- Radio knoppen,
- bestand upload.
Moderne hulpmiddelen voor formulieren
Zoals eerder vermeld, zijn er een aantal ongelooflijke tools beschikbaar om u te helpen vormcontroles in vorm te krijgen.
formaliseren is je geheime wapen om elementaire besturingselementen en stijlen van formulieren consistent in verschillende browsers te laten werken. En de standaardstijlen zijn schoon en mooi. Deze geweldige bibliotheek werkt ook perfect met een breed scala aan JavaScript-bibliotheken, zoals jQuery , dojo en MooTools .
Vervanging van formuliercontrole
Als u een aantal radicale dingen in een formulier wilt doen, zijn er nuttige hulpmiddelen beschikbaar. Een briljante tactiek voor het temmen van webformulieren is om de feitelijke besturing te verbergen en deze volledig te vervangen door een gefabriceerde. Dit geeft u veel meer controle over hoe het formulier wordt weergegeven.
Een geweldig voorbeeld hiervan is uniform , een jQuery plug-in voor het maken van gladde formulieren. Het komt in drie verschillende thema's. En als u een aangepast thema wilt maken, gebruikt u gewoon de service CSS-generator om de plug-in gemakkelijk te omhullen.
Een andere plug-in voor jQuery Niceforms . Hoewel het niet beschikt over de handige re-skinning-functionaliteit van Uniform, biedt het wel een basisstijl die perfect bij uw behoeften past.
Eindelijk is er de commerciële extensie jQuery Wijmo . De module waarin we geïnteresseerd zijn, is de vorm decorateur , die eigenlijk gratis te gebruiken is. Het pakt enkele van de meer problematische besturingselementen aan: selectievakjes, keuzerondjes en vervolgkeuzemenu's. Deze tool maakt deel uit van een grotere commerciële bibliotheek en heeft enkele voordelen, waarvan de belangrijkste sterk zijn documentatie en betaald ondersteuning . Eindelijk, ik hou van de manier waarop het omgaan met villen; het gebruikt de jQuery UI ThemeRoller , het gemakkelijk maken van aangepaste ontwerpen.
Uitgevonden vormcontroles
Eindelijk, als er geen formuliercontrole is die doet wat u nodig heeft, kunt u er een uitvinden! Sommige zeer slimme mensen hebben dit al veel gedaan en misschien past een van hun tools al bij je behoeften.
sliders
Een ding dat ontbreekt in standaard HTML (maar onderdeel is van HTML5) is een basisschuifregelaar. Daar zijn ook veel antwoorden op één van Wijmo , die is gebaseerd op de jQuery UI-schuifregelaar .
uploaders
Hoewel je de bestandsinvoercontrole zou kunnen gebruiken om gebruikers in staat te stellen een bestand te selecteren om te uploaden, wil je misschien iets snazzers, vooral als bestandsuploads van cruciaal belang zijn voor je website. Een van de beste oplossingen is uploadify . Hiermee kunnen gebruikers meerdere bestanden selecteren en de voortgang bekijken. Het wordt geleverd met verschillende lay-out- en functionaliteitsmogelijkheden.
Schuifbalkachtige selectievakjes en keuzerondjes
Een populair UI-element (dankzij de iPhone) is de aan / uit-schakelaar die van links naar rechts schuift. Met deze handige jQuery plug-in , u kunt een standaard selectievakje of keuzerondje in één omzetten. Of u dit nu een uitgevonden formuliercontrole of een formuliervervangingstool noemt, het is een geweldige manier om gebruikers in staat te stellen opties in of uit te schakelen.
Creatieve knoppen
jQuery UI is een andere interessante kijk op basisbedieningen. Wat het labelt als toetsen kan ook worden gebruikt om optiesets te maken op basis van knoppen, keuzerondjes en selectievakjes. Hiermee transformeert u deze besturingselementen naar een andere visuele vorm. In de onderstaande afbeelding ziet u een reeks keuzerondjes die worden gestileerd als een rij knoppen.
HTML5-formulieren
HTML5 heeft veel spannende mogelijkheden voor webformulieren opgeleverd. Hoewel dit buiten het bestek van dit artikel valt, is het nog steeds relevant. Hier zijn enkele belangrijke bronnen om u te helpen graven in:
- “ Een vorm van waanzin , "Duik in HTML5;
- “ Plezier met HTML5-formulieren , "Richard Shepherd;
- “ HTML5-formulieren , "Wufoo;
- “ Een velddag met HTML5-formulieren , "Inayaili de León.
Kortom, formuliercontroles zijn een van de meest kritieke hindernissen bij het ontwikkelen van een standaardwebsite.
Een ontwerper die de beperkingen begrijpt, de gereedschappen kent en mogelijkheden voor eenvoudige aanpassingen herkent, zal weloverwogen beslissingen kunnen nemen die uiteindelijk het eindresultaat verbeteren.