Jag känner till sedan tidigare att man tungt kunde stajla om HTML-formulär med CSS till att både se snyggare och mer “integrerat” ut på en sajt. Jag har till och med gjort sådant förrut men egentligen inte tänkt efter varför förutom just att det ska se snyggare ut.
Normalt sett är vanliga formulär rätt så fula.
Med CSS kan man ändra utseendet på formulärkomponenter något för att göra dem behagligare att se på.
Normalt sett när man pratar CSS så ska alltid en skäggig HTML-nazist i trasiga och smutsiga jeans samt Apple T-shirt snabbt påpeka hur många tekniska fördelar som finns om man utför en lösning med CSS istället för tabeller, just i detta fall kommer jag inte på en enda sådan “förmyndar-tutorial” skriven av ovan beskriven person. De flesta fokuserar mer på att det går att förändra samt snygga till vanliga -tråkiga- HMTL-formulär med CSS.
Det är dock inte svårt att uppskatta att man kan göra mycket bandbreddssnåla formulärssidor med CSS då man slipper spalta upp rad efter rad i en tabell för de olika formulärelementen.
För några år sedan gjorde jag en enkätliknande sajt. Där personer kunde svara på frågor via cirkelknappar och därefter kunde en enkel SWOT-analys läsas ut när tillräckligt med personer svarat på frågorna. Vissa av sidorna blev storleksmässigt riktigt stora tack vare alla tabeller som behövdes för att snyggt kunna visa upp 30 frågor som var för sig hade åtta cirkelknappar. Det fungerade men det var inte snyggt, åtminstone när man tittade på koden samt filstorleken.
Hade jag gjort lösningen med CSS hade sidornas storlek blivit mycket mindre, men det ska erkännas att det faktiska värdet av det projektet inte skulle ha påverkats om CSS hade nyttjats.
Detta sätt att slippa använda tabeller för att placera en “label” i en cell samt ett fältelement i en annan cell är relativt bra beskrivet på detta exempel på tabellösa formulär.
Jag stör mig något enormt på den länkade sidans mall som inte verkar se ut som den ska göra i 1280×1024 samt att CSS som används i exemplet inte är tillräckligt ren för att klassas som professionell CSS.
Men det är ett bra exempel att bygga vidare på.
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.