Hur man bygger webbformulärlayouter med CSS-nät

I denna handledning kommer vi att undersöka hur man bygger ett par olika webbformulär med hjälp av CSS Grid. För varje exempel använder vi först floats och ser sedan hur samma layout kunde göras med hjälp av CSS Grid.

Om du inte har någon tidigare kunskap om CSS-nätet, ta en titt på vår nybörjarserie. Förstå CSS Grid Layout Module. Låt oss börja!

1. Grundläggande registreringsformulär

I denna layout ska vi dela upp formuläret i två kolumner så att vi kan visa etiketterna till vänster och inmatningsfälten till höger. 

Med "Traditionell" CSS

En traditionell inställning till denna layout kan använda flottörer för att ge oss våra kolumner. Observera att vi inte har en omslag för formelementet; Vi ska direkt ställa in etiketter och ingångar.

 Förnamn  Efternamn   

form overflow: hidden;  etikett float: left; bredd: 200px; padding-right: 24px;  inmatning float: left; bredd: calc (100% - 200px);  knappen float: right; bredd: calc (100% - 200px); 

Du märker att vi använder calc () här, vilket gör att vi kan göra vår vänstra kolumn fixerad vid 200px bred, medan den högra kolumnen förblir flytande.

Här är resultatet, med några ytterligare stilar för estetik:

Med CSS Grid Layout

Vårt mål när du använder "Grid" är att definiera två kolumner, och placera sedan varje element i den önskade kolumnen.

Det första steget är att definiera vårt nät på moderelementet form:

formulär display: rutnät; 

Då måste vi dela det nätet med grid-template-kolonner:

formulär display: rutnät; rutnätmall-kolumner: 200px 1fr; 

Baserat på ovanstående CSS kommer den första kolumnen att ha en fast bredd på 200px medan den andra kommer att ta 1fr ("En fraktion") av det återstående lediga utrymmet.

Vi behöver nu definiera placeringen för våra etiketter och inmatningar. För att göra det ska vi använda grid-kolonn med specifika värden för nätlinjerna:

För mer om hur rutnätverk fungerar, ta en titt på detta snabba tips:

• 

  Snabbtips: Nämn dina CSS-rader, bara i fallet

  I varje CSS-nät har varje rad ett indexnummer som vi kan referera till att placera rutnät. Men vi kan också namnge var och en av dessa nätlinjer, vilket gör det ...

Baserat på dessa rader kommer vi att tillämpa följande regler för våra etiketter, ingångar och knappen:

etikett rutnät-kolumn: 1/2;  inmatning, knapp rutnät-kolumn: 2/3; 

Märken kommer att finnas i kolumnen som börjar på rad 1 och slutar på rad 2. Ingångarna och knappen kommer att placeras i kolumnen som börjar på rad 2 och slutar på rad 3.

Slutligen använder vi grid-gap att lägga till en rännan på 16px mellan raderna och kolumnerna:

formulär display: rutnät; rutnätmall-kolumner: 200px 1fr; gallergap: 16px; 

2. Kontaktformulär

I denna layout vill vi uppnå följande:

1. Kolumnhöjderna ska vara lika, så sidofältet och formuläromslaget är lika stora.
2. Vi vill vidareformera formuläret (höger sida) i två kolumner, ändra knappen så att den fyller hela bredden.

Det är helt möjligt att bygga denna layout med hjälp av flottor. Vi måste dock ställa in en min-höjd för den vänstra kolumnen, annars antar den inte hela höjden. Det finns andra "traditionella" förhållningssätt till denna fråga, men ingen är särskilt söta.

Med "Traditionell" CSS

Sammanfattningsvis måste vi med floats:

1. Lägg till min-höjd till vänster kolumn.
2. Flyta kontakten och formulär omslag.
3. Lägg till en clearfix eller överflöde: gömd; för att bevara omslagshöjden.
4. Flytta formelementen och lägg till marginaler mellan dem.
5. Återställ flytande för textarea och skicka knappen, och gör dem sedan fyllda med full bredd.

Det är ganska jobbigt, rätt?

Ett bättre tillvägagångssätt skulle vara att lösa detta med antingen Flexbox eller Grid. I det här fallet föredrar jag att använda Grid eftersom vi ordnar element både horisontellt och vertikalt.

Med CSS Grid Layout

Låt oss börja med att förklara ett galler på vår omslag och dela den i två kolumner.

.wrapper display: rutnät; rutmall-kolumner: 1fr 2fr; 

Vårt formelement också måste förklaras som ett nät:

formulär display: rutnät; rutmall-kolumner: 1fr 1fr; gallergap: 20px; 

Efter att ha tillämpat ovanstående regler kommer vi att få följande:

Vi måste släppa de två sista elementen för att fylla hela bredden genom att sträcka dem från raden 1 till raden 3.

.fullbredd grid-column: 1/3; 

3. Profilformulär

Tid för vår sista formlayout. I det här exemplet har vi inkluderat en inmatning för användare att ladda upp sitt profilfoto. Den ska placeras längst upp till höger.

Med "Traditionell" CSS

Vi bygger detta med följande markering:

 
 Ditt namn  
 
 E-post  
 
 Ladda upp ditt foto  
 
 Spara 
 

Kortfattat som ett traditionellt tillvägagångssätt kan vi uppnå vår layout med följande steg:

1. Lägg till position: relativ; till formelementet.
2. Placera absolut filinmatningen högst upp till höger. 
3. Lägg till vaddering i formuläret med samma bredd som filinmatningen.
4. Ange en fast bredd för filinmatningen.

Med CSS Grid Layout

Låt oss inte dölja den traditionella inställningen för mycket. Med Grid delas vi i formuläret i två kolumner enligt följande:

Den första kolumnen tar dubbelt det horisontella utrymmet i den andra kolumnen, som vi kommer att uppnå med fr enheter:

formulär display: rutnät; rutmall-kolumner: 2fr 1fr; gallergap: 20px; 

Efter att ha etablerat rutnätet måste vi placera formelementen mellan raden 1 och raden 2:

formulär p grid-kolumn: 1/2; 

Nästa steg är att placera inmatningsfilen i den andra kolumnen. För att göra det ska vi placera det mellan raderlinje 2 och raderlinje 3. Rörande vertikalt gör vi att det spänner rader från raden 1 till raden 2.

.input-file-wrapper grid-column: 2/3; rutnät: 1/2; 

Slutsats

Bra gjort! Vi har täckt flera olika exempel för att använda CSS Grid när du bygger webbformulär. Som du har märkt sparar vi mycket tid och ansträngning genom att skriva några rader kod, i motsats till att använda traditionella layouttekniker. Du kan använda alla ovanstående exempel från och med idag, tack vare CSS @supports vilket hjälper oss att använda en specifik funktion som en förbättring. 

• 

  Snabbtips: Lägg till en @supports CSS-fil till dina CodePen-demos

  När dina CodePen-demos är beroende av CSS, är det en bra idé att varna människor. Låt oss meddela när webbläsare inte stöder våra demo, med hjälp av ...

Har du några förslag på att förbättra dessa layouter? Låt mig veta i kommentarerna nedan!