Bemeester die soeke na slimmer webvorms: jou uiteindelike 2023-gids

Aanlynvorms is een van die moeilikste terreine van webwerfontwikkeling om reg te kom, veral met soveel dinge wat verkeerd kan gaan. Die veranderende aard van hoe mense toegang tot aanlyninhoud verkry, het ook 'n invloed gehad op 'n tegnologie wat jare gelede ontwikkel is voordat mense verwag het om met 'n telefoon te kan praat wat hulle gewoonlik net met 'n rekenaar sou doen. Dit is 'n tegnologie wat baie min evolusie ondergaan het.

Die ontwerp van webvorms moet 'n selfstandige beroep wees. Webwerfontwerpers moet die dienste van voltydse professionele webvormontwerpers gebruik om hulle in hul taak te help. Maar dit word nie ekonomies genoeg gesien nie, en die webwerfontwerper is dus meestal ook verantwoordelik vir die ontwerp van enige vorms wat op die webwerf gebruik word.

Maar om vorms te ontwerp is 'n hoogs gespesialiseerde vaardigheid. Dit vereis om te verstaan ​​hoe mense interaksie met information en begrip van die beste maniere om in te samel en aan te biedformatioon. Waar algemene webontwerp hoofsaaklik gesentreer is rondom aanbieding informatioon en beelde op aantreklike maar praktiese maniere, vorm ontwerp eis dat ons ons aandag op die aard van die in fokusformation en besluit dan die beste manier om dit op die bladsy te struktureer sodat dit sal werk soos bedoel. Estetika is 'n minder belangrike oorweging in hierdie geval, maar moet steeds nie wees niegotten.

In hierdie artikel gaan ons kyk na die kuns van webvormontwerp, en kyk of ons 'n manier kan vind om ons webvorms slimmer te maak, beide in terme van hoe hulle lyk en hoe hulle funksioneer.

Die gereedskap van die vorm van webvorms

Die standaardinstrumente wat ons deur blaaier-ontwikkelaars en W3C gekry het om ons webvorms saam te stel, is nie presies ideaal nie, en voordat hulle CSS daarop toepas, is hulle eintlik nogal afskuwelik. Dit is hoe hulle lyk:

Daar is ook 'n ander standaard invoerbeheer genoem kies, maar u moet vermy om dit te gebruik, tensy u spaarruimte ernstig bekommer. Daar is beter maniere om die taak wat deur die gekose beheer uitgevoer word, te hanteer, soos ons later bespreek. Indien moontlik, moet tekstarea-beheermaatreëls vermy word omdat dit so problematies en antiek is.

Benewens hierdie standaard-invoeritems, is daar ook spesiale nuwes vir HTML5 geskep. Behalwe wanneer 'n dokument streng voorberei word vir interne gebruik en waar die blaaieromgewing bekend is, moet slegs komponente wat in Firefox sowel as Chrome werk, gebruik word. Dit is goed as 'n komponent ook in ander blaaiers werk, maar dit moet nie net werk in ander blaaiers. Hier is die HTML5-komponente soos dit in Firefox verskyn:

En hul effens verskillende voorkoms in Chrome:

Dit is natuurlik baie belangrik om bewus te wees dat u HTML5-insette anders sal lyk en funksioneer tussen Chrome en Firefox, maar dat dit steeds sal werk. Die standaardinvoerkontroles lyk ook 'n bietjie lekkerder in Chrome as in Firefox. Let op dat Chrome die Noord-Amerikaanse datumstandaard oplê, wat gebruikers miskien nie waardeer nie. Die Chrome-weergawe van die datumkontrole maak dit ook nie geskik vir vertoon nie en moet slegs vir invoer gebruik word. Die byvoeging van 'n datum-kieser is die belangrikste verbetering in Chrome, maar ons kan waarskynlik verwag om dit in toekomstige weergawes van Firefox te sien.

Aangesien Firefox 'n open source is, kan u u eie persoonlike weergawe van Firefox die insette maak op dieselfde manier as wat Chrome doen deur die Chronium-bronkode waarop Chrome gebaseer is, af te laai en die toepaslike gedeelte van die kode na die Firefox-bron te stuur. kode (maar dan moet jy dit doen elke keer as jy Firefox na 'n nuwe weergawe opgradeer).

Die belangrikste punt is egter dat selfs met die verbetering van Chrome, die standaardvoorkoms van invoerkontroles klein en onaantreklik is. Daar is 'n paar ander kontroles beskikbaar, maar omdat dit nie in Chrome en Firefox werk nie, moet dit nie op webwerwe wat vir die publiek bedoel is, gebruik word nie.

Bootstrap (amper voldoende) antwoord

Bootstrap pas stilering toe op die standaardkontroles wat hul voorkoms tot 'n sekere mate verbeter. Maar as gevolg van Bootstrap se mobiele-sentriese ontwerpfilosofie, veroorsaak dit 'n paar ongewenste effekte op vorms wat nie bedoel is om as 'n enkele kolom vertoon te word nie, en laat kort invoervelde snaaks lyk as hulle standaard 'n volledige kolom dek. Die wêreld is moontlik beweeglik, maar vorms is nie uitgevind met die gebruiker nie.

Bootstrap brei die kontroles uit om die horisontale breedte van die houer te vul, wat beteken dat alle kontroles dieselfde breedte het, ongeag of u daarvan hou of nie (tensy u hierdie gedrag met die hand te veel oorkom), en u toelaat om enkele beheertipes aan te trek met ekstra bling. Bootstrap se oplossing is elegant en oorkom sommige van die probleme van beheermaatreëls wat verskillende voorkoms in verskillende blaaiers het, maar dit werk slegs met die standaardkontroles. Die HTML5-kontroles word nie in huidige weergawes van Bootstrap geïmplementeer nie, dus u moet dit op u eie neerlê.

Met Bootstrap kan u ook kontroles met mekaar kombineer. Soms is dit goed en soms nie so goed nie. Dit kan goed lyk om 'n teksinvoer met 'n knoppie en 'n merkblokkie te kombineer, maar dit kan die gebruiker verwar hoe hy met so 'n onbekende beheer moet omgaan.

Wat Bootstrap wel bied, is twee van my gunsteling vormtoerusting, die paneel en die goed. Dit is baie nuttig om vormdata te groepeer om 'n visuele aanduiding te gee van watter data verband hou met watter ander data, en ook om data te skei.

Smart Form-gebou 101

Nou is ons gereed om te dink oor hoe vorms op slimmer maniere saamgestel kan word. Om dit te doen, moet ons ver verby die standaarde dink. Ons moet bewus wees van die desktop-gebonde wortels van vormkontroles, en ook die behoefte aan mobiele versoenbaarheid. En ons moet omgee vir dinge soos bruikbaarheid en validering (as die vorm vir data-insameling gebruik sal word).

Daardie laaste punt is 'n goeie een, want terwyl vormkontroles gebruik word om insette in te samel, word dit ook gebruik om gestoorde data te vertoon. Die gemiddelde webgebruiker is (en behoort te wees) meer geïnteresseerd om in te komformatioon van jou as om in te geeformatioon aan jou.

Data-insameling is maklik. Mense sal alles invul wat jy voor hulle steek, al is dit 'n gemors. Maar as dit by datavertoning kom, is dit meer kieskeurig. Hier sal ons dus meer fokus op die gebruik van vorms om data te vertoon as om dit te versamel, aangesien vertoning meer sorg en meer 'slimheid' verg.

1. Het ons 'n vorm nodig?

Voordat ons 'n vorm bou, moet ons seker maak dat ons een nodig het. As die gegewens voldoende en onversoenlik as 'n tabel voorgestel kan word, sal 'n tabel meestal doeltreffender en prakties wees.

'N Vorm is nodig indien:

• Ons versamel insette van die gebruiker
• Ons het baie data om te vertoon
• Die data moet duidelik gesegmenteer word
• Die gebruiker het waarskynlik toegang tot die data vanaf 'n mobiele toestel

As een van die bogenoemde items nie waar is nie, is dit nie nodig om 'n vorm te gebruik nie, en 'n tabel is voldoende. Die uitdaging wat ons met mobiele versoenbaarheid in die gesig staar, is dat nie tabelle of vorms regtig geskik is vir 'n mobiele vertoning nie. Die feit dat slimfoonontwerpers hul gebruikers die opsie gegee het om 'n blaaier in portretgerigtheid te gebruik en dat die meeste gebruikers verkies om hul telefone op die manier te hou, veroorsaak dat die meeste probleme met mobiele versoenbaarheid waarmee webwerfontwerpers te kampe het.

Ongeag, vorms is meer aanpasbaar vir 'n mobiele skerm as tafels. As u dus moet toesien dat al die data maklik op 'n mobiele skerm vertoon kan word, dan is vorms 'n beter keuse as tabelle ... soms!

2. Ontwerp die desktop uitleg

Dit is waar dat u in die algemeen eerstens 'n mobiele uitleg moet ontwerp, maar as dit by vorms kom, is dit nie die beste manier nie, want ons moet weet hoe data gegroepeer word, en ons kan dit net doen as ons kan al die velde tegelyk sien, iets wat nie op 'n selfoon gedoen kan word nie, tensy u so min data vertoon dat ons nie die probleem hoef te ontwerp nie.

Die vinnigste manier om 'n vormontwerp te bespot, is met InkScape. In hierdie voorbeeld sal ons 'n stelsel bou vir die bestuur van HR-rekords. Hier is die mock up vir die desktop prototipe:

Die buite reghoek verteenwoordig die hele spasie van 'n 1024 x 768 px skerm. Op enige desktop blaaier, het ons nie toegang tot soveel pieksels nie, tensy die gebruiker in volskermmodus is (wat selde die geval is). So ons

ontwerp is 900 x 600px, wat in die beskikbare area van die meeste behoort te pas desktop skerms.

As die beskikbare oppervlakte minder as 900 px breed is, sal ons 2 x 450 pk-kolomme breek en verskyn dit as een aaneenlopende kolom van 450 pk. Dit los die probleem van mobiele versoenbaarheid op, ten minste totdat Google eis dat ons al ons werwe in staat is om op 'n polshorlosieskerm te pas.

U sal opmerk dat die meeste van die skerms slegs bestaan ​​uit gewone invoerbakke, wat miskien vervelig lyk, maar in werklikheid byna altyd die beste manier is om dit te doen. Let ook op die gebruik van 'n lettertipe met vaste breedte. Dit help om eenvormigheid in vormontwerp te behou.

Ons kolomme sal eintlik effens meer as 450 px wees, meer as 600 px elk, maar as ons die kolomwydte wil dwing om ongeveer 450 px te wees, verminder ons die kolomgrootte van 6 tot 5. Maar 'n kolom van 600 pk moet op 'n mobiele skerm pas in portretmodus sonder om te draai, in elk geval.

Ons toets ons uitleg met hierdie kode:

En ons kan sien dat alles goed lyk (omdat ons tydelik grense bygevoeg het om ons te wys).

Die Linux-skermheerser-widget is natuurlik nie deel van die webblad nie, maar is daar om ons te wys dat ons kolomme nie op 'n kleiner skerm vertoon nie. Laat ons wat op verskillende algemene skermbreedtes gebeur:

3. Skep persoonlike invoergroottes en etiketposisie

As ons alles net in standaard laat, sonder om enige persoonlike CSS by te voeg, is dit wat sal gebeur as ons ons eerste ry invoerkontroles byvoeg:

Dit gebeur omdat die etiket vir elke invoer aan die linkerkant van die invoer verstrek is, en omdat ons nie 'n pasgemaakte breedte vir die invoerkontroles opgestel het nie. Ons kan albei probleme met CSS oplos.

Nou stel ons die vertoningseienskap van etiketelemente op "blokkeer", stel die velde van Eerste en Laaste op klas "in40w" en veld MI op klas "in10w", en alles moet baie mooier lyk.

Soos u kan sien, lyk dit beter, maar die uitleg is nie meer korrek nie. Nou word die bokse gestapel. Hoe ons dit regkry, is dit deur die idee om die etiketelement glad nie te gebruik nie, omdat ons dit nie regtig nodig het nie. Ons sal net ons toepas in 40w en in 10w klasse, plus maak 'n nuwe klas genaamd inLeftOf.

Wat, sodra dit toegepas is, die probleem wat ons vroeër gesien het, oplos:

Maar dit laat nie genoeg ruimte vir die SSN-veld nie. Dit is omdat ons linkerkolom groter is as wat verwag is, so 40% is eintlik meer ruimte as wat ons benodig vir hierdie velde, sodat ons dit eintlik kan afkap na in 30w, en die middelveld is groter as wat dit moet wees, sodat ons dit kan regkry in 5w. Hier is wat gebeur:

Daar is dus meer as genoeg ruimte om die SSN-veld by te voeg, wat die eerste reël van ons invoervorm invul. Nadat u al hierdie besonderhede uitgeput het, is dit baie maklik om die res van die linker kolom te bou. Ons kan nou van die tydelike grens ontslae raak en die regte agtergrond op die kolom toepas. Hier is die boonste helfte van die paneel voordat ons na spesiale dele van die vorm kom:

'N Paar dinge het op hierdie stadium gebeur. Die eerste was die maklike deel van die instelling van die agtergrondkleur vir die kolom (rgb (235,235,246)), en hoewel u dit nie hier kan sien nie, is die tekskleur vir al die insette op # 427DB4 gestel, en die fontgewig is op vet gestel om oogspanning te verminder. Die teks is ingestel om outomaties na hoofletters te transformeer met behulp van die CSS-teks-transformeer-eienskap, om die invoer van data te versnel en foute te verminder.

Die meer ingewikkelde aangeleentheid om die kontroles in lyn te bring en seker te maak dat hulle 'n ordentlike inrigting op enige skerm vertoon, het meer nadenke nodig. U het reeds die tegniek gesien wat gebruik is vir die eerste insetreëls en hul etikette. Hierdie tegniek sal werk as daar geen bykomende afstand tussen die insette hoef te wees nie, maar as ons ruimte nodig het, is dit beter om 'n ander tegniek te gebruik.

Hierdie ander tegniek behels die skep van 'n geneste ry kolomme binne ons hoofkolom, wat sal help om die kontroles behoorlik gespasieer te hou. Die aantal kolomme en hul groottes verander na gelang van die vereistes van elke stel kontroles. Onthou alles is responsive, so wanneer die grootte van 'n kolom verander word, sal alles binne die kolom probeer om die grootte te verander om by die verandering te pas. Dit is goeie nuus vir gesiggestremde gebruikers, aangesien hulle die vergroting op hul skerm kan opzoom en alles sal korrek in lyn wees soos vir enige ander gebruiker.

As ons verder gaan na die meer ingewikkelde deel van die linkerkolom, het die oorspronklike konsep wat in die mock-up uiteengesit is, gevra dat dit moeilik sou wees om die struktuur te implementeer. Gelukkig het ek besef dat die data op die regspaneel verdubbel kan word as standaard-merkblokkies gebruik word, en dit het die uitleg-kompleksiteitsprobleem mooi opgelos:

Die ligter panele rondom die spesiale afdelings is net gewone Bootstrap putte. Om godsdiensdata in te voer, is dit nodig om uit 'n vasgestelde lys van voorafbepaalde amptelike godsdienste (insluitend "ander") te kies. Die ontwikkeling van die regterkantkolomme was selfs makliker, en het net dieselfde tegnieke van die eerste stel kontroles op die linkerkolom gebruik, en die kontroles in 'n tabel georganiseer format, maar sonder om 'n tafel te gebruik.

Vir hierdie projek om 'n sukses te wees, moes dit perfek verskaf responsiveness op alle amptelike vertoongroottes. Kom ons kyk hoe die resultaat uitgedraai het. Eers met die volledige resolusie weergawe:

Dit is naby genoeg aan die prototipe dat ons daarmee tevrede kan wees. Trouens, dit is selfs 'n verbetering. Kom ons kyk nou na die responsive uitleg by elk van die verskillende afdelings van die bladsy:

Bootstrap en HTML5 het vormontwikkeling vinniger en makliker gemaak as voorheen, maar baie ontwikkelaars ondermyn hierdie vordering deur vorms te ingewikkeld te maak (gebruik die spesiale HTML5-vormelemente net omdat hulle daar is om gebruik te word in plaas van omdat dit vir die projek benodig word. ), en deur heeltemal eendimensionele vorms te skep wat nie eers probeer om voordeel te trek uit nie responsive ontwerp. Met net 'n bietjie sorg en ekstra werk, kan enige data gemaak word om meer presenteerbaar op enige grootte skerm te lyk.

U kan 'n paar klein foute op die kleinste skermgrootte kry in die portretuitleg op die kleinste skermgrootte (in die geval van hierdie projek is die middelste aanvangsveld op die eerste ry 'n bietjie kleiner as wat ideaal sou wees), maar mobiele gebruikers oor die algemeen aanvaar dat dit die uitruil is wat hulle moet doen om nie hul fone behoorlik te hou nie.

Doen dit reg, en u dataforms kan soos volg lyk:

In plaas van, dit:

opskrif van hoofde met vergunning van Timo Kuilder