Så här utformar du formulär med CSS: En nybörjarguide

Appar samlar främst data via formulär. Ta till exempel ett generiskt registreringsformulär: det finns flera fält för användare att mata in information som deras namn, e-post etc.

Förr i tiden hade webbplatser bara vanliga, tråkiga HTML-formulär med inga stilar. Det var innan CSS ändrade allt. Nu kan vi skapa mer intressanta, livliga former med de senaste funktionerna i CSS.

Ta inte bara mitt ord för det. Nedan ser hur en typisk HTML-form ser ut utan någon CSS.

Här är samma form jazzad upp med lite CSS .

I denna handledning visar vi dig hur du återskapar formuläret som visas ovan samt några andra fantastiska modifieringar du kan implementera för att skapa visuellt imponerande, användarvänliga formulär.

Vi visar hur man utformar formulär med CSS i sex steg:

1. Inställning box-sizing
2. CSS-väljare för inmatningselement
3. Grundläggande utformningsmetoder för textinmatningsfält
4. Styling av andra inmatningstyper
5. UI-pseudoklasser
6. Inte anpassningsbara ingångar

Innan vi dyker in är det viktigt att förstå att det inte finns någon specifik stil för former. Möjligheterna begränsas endast av din fantasi. Den här guiden är tänkt att hjälpa dig att komma igång på vägen mot att skapa dina egna unika mönster med CSS.

Låt oss komma igång!

Ställa in storlek på rutan

Jag ställer vanligtvis * {box-sizing:border-box;} inte bara för formulär utan också för webbsidor. När du ställer in den kommer bredden på alla element att innehålla stoppningen.

Ange till exempel bredden och stoppningen enligt följande.

.some-class { width:200px; padding:20px;}

.some-class utan box-sizing:border-box har en bredd på mer än 200px, vilket kan vara ett problem. Därför använder de flesta utvecklare border-box för alla element.

Nedan finns en bättre version av koden. Den stöder också :before och :after pseudo-element.

*, *:before, *:after { box-sizing: border-box;}

Tips: * väljaren väljer alla element i dokumentet.

CSS-väljare för ingångselement

Det enklaste sättet att välja ingångselement är att använda CSS-attributväljare.

Dessa väljare markerar alla inmatningselement i dokumentet. Om du behöver ange några väljare måste du lägga till klasser i elementen.

<input type="text" class="signup-text-input" />

Sedan:

.signup-text-input { // styles here}

Grundläggande stylingsmetoder för enradiga textinmatningsfält

Enradiga fält är de vanligaste inmatningsfälten som används i formulär. Vanligtvis är en textinmatning med en rad en enkel ruta med en ram (detta beror på webbläsaren).

Här är HTML-markeringen för ett enradigt fält med en platshållare.

<input type="text" placeholder="Name" />

Det ser ut så här:

Du kan använda följande CSS-egenskaper för att göra detta inmatningsfält mer attraktivt.

• Padding (för att lägga till inre avstånd)
• Marginal (för att lägga till en marginal runt inmatningsfältet)
• Border
• Box shadow
• Border radius
• Bredd
• Font

Låt oss zooma in på var och en av dessa egenskaper.

Padding

Om du lägger till ett inre utrymme i inmatningsfältet kan du förbättra tydligheten. Du kan åstadkomma detta med egenskapen padding.

input { padding: 10px;}

Marginal

Om det finns andra element nära ditt inmatningsfält kan du lägga till en marginal runt det för att förhindra klustring.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Gräns

I de flesta webbläsare har textinmatningsfält gränser som du kan anpassa.

.border-customized-input { border: 2px solid #eee;}

Du kan också ta bort en gräns helt.

.border-removed-input { border: 0;}

Tips: Var noga för att lägga till en bakgrundsfärg eller box-shadow när gränsen tas bort. Annars kommer inte användarna att se inmatningen.

Vissa webbdesigners föredrar att endast visa den nedre kanten eftersom de känns som att skriva på en rad i en anteckningsbok.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Boxskugga

Du kan använda egenskapen CSS box-shadow för att lägga till en skugga. Du kan uppnå en rad effekter genom att leka med fastighetens fem värden.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Gränsradie

Egenskapen border-radius kan ha en enorm inverkan på dina formulärers känsla. Genom att böja kanterna på rutorna kan du ändra utseendet på dina inmatningsfält avsevärt.

.rounded-input { padding:10px; border-radius:10px;}

Du kan få ett nytt utseende helt och hållet genom att använda box-shadow och border-radius tillsammans.

Bredd

Använd width för att ställ in bredden på ingångarna.

input { width:100%;}

Teckensnitt

De flesta webbläsare använder en annan typsnittsfamilj och storlek för formulärelement. Vid behov kan vi ärva teckensnittet från dokumentet.

input, textarea { font-family:inherit; font-size: inherit;}

Styling av andra inmatningstyper

Du kan utforma andra inmatningstyper som t.ex. textområde, alternativknapp, kryssruta och mer. Låt oss ta en närmare titt.

Textområden

Textområden liknar textingångar förutom att de tillåter flerlinjeingångar. Du använder vanligtvis dessa när du vill samla in data i längre form från användare, till exempel kommentarer, meddelanden etc. Du kan använda alla grundläggande CSS-egenskaper som vi diskuterat tidigare för att utforma textområden.

resize -egenskapen är också mycket användbar i textområden. I de flesta webbläsare kan textområdena ändras längs både x- och y-axlarna (värde: both) som standard. Du kan ställa in den på both, horizontal eller vertical.

Kolla in det här textområdet som jag utformade:

Se pennan och dyomzez av Supun Kavinda (@SupunKavinda)
på CodePen.

I det här exemplet använde jag resize:vertical för att endast tillåta storleksändring. Denna praxis används i de flesta former eftersom det förhindrar irriterande horisontella rullningsfält.

Obs! Om du behöver skapa storleksändring av textområden måste du använda ett JavaScript-tillvägagångssätt som ligger utanför ramen för den här artikeln.

Kryssrutor och alternativknappar

Standardrutan och alternativknapparna är svåra att utforma och kräver mer komplex CSS (och HTML).

Att utforma använd en HTML-kod.

<label>Name <input type="checkbox" /> <span></span></label>

Några saker att notera:

• Eftersom vi använder <label> för att linda <input>, om du klickar på något element i <``label``>, <input> kommer att klickas
• Vi döljer <input> eftersom webbläsare inte tillåter oss att ändra det mycket
• <span> skapar en anpassad kryssruta
• Vi använder input:checked pseudoklassväljaren för att få den markerade statusen och utforma den anpassade kryssrutan

Här är en anpassad kryssruta (se kommentarerna i CSS för mer förklaringar):

Se pennan
yLNKQBo av Supun Kavinda ( @SupunKavinda)
på CodePen.

Här är en anpassad alternativknapp:

Se pennan
eYNMQNM av Supun Kavinda (@SupunKavinda)
på CodePen.

Vi använde samma koncept (input:checked) för att skapa anpassade element i båda exemplen.

I webbläsare är kryssrutorna rutformade medan radioknapparna är runda. Det är bäst att hålla denna konvention i anpassade ingångar för att undvika att förvirra användaren.

Välj menyer

Välj menyer gör det möjligt för användare att välja ett objekt från flera val.

Du kan utforma <select> -elementet så att det ser mer engagerande ut.

select { width: 100%; padding:10px; border-radius:10px;}

Du kan dock inte utforma rullgardinsmenyn (eller <option> -element) eftersom de är utformade som standard beroende på operativsystem. Det enda sättet att utforma dessa element är att använda anpassade rullgardinsmenyer med JavaScript.

Knappar

Liksom de flesta element har knappar standardformat.

<button>Click Me</button>

Låt oss krydda detta lite.

UI-pseudoklasser

Nedan följer några UI-pseudoklasser som vanligtvis används med formelement.

Dessa kan användas för att visa meddelanden baserat på elementets attribut:

• :required
• :valid och :invalid
• :checked (vi har redan använt detta)

Dessa kan användas för att skapa effekter på varje tillstånd:

• :hover
• :focus
• :active

Skapade meddelanden med: krävs

För att visa ett meddelande om inmatning krävs:

Om du tar bort -attribut med JavaScript, meddelandet "Required" tas bort automatiskt.

Vi kan göra samma sak med :valid och :invalid pseudoklasser.

: sväva och: fokus

:hover väljer ett element när muspekaren svävar över det. :focus väljer ett element när det är fokuserat.

Dessa pseudoklasser används ofta för att skapa övergångar och små visuella förändringar. Du kan till exempel ändra bredd, bakgrundsfärg, kantfärg, skuggstyrka etc.Att använda egenskapen transition med dessa egenskaper gör dessa förändringar mycket mjukare.

Här är några svävareffekter på formelement (försök att sväva över elementen).

Se pennan
yLNKZqg av Supun Kavinda (@SupunKavinda)
på CodePen.

När användare ser element förändras subtilt när de svävar över dem, de får en känsla av att elementet är användbart. Detta är ett viktigt övervägande när du utformar formulärelement.

Har du märkt att (i vissa webbläsare) visas en blå kontur när du fokuserar på formulärelement? Du kan använda :focus pseudoklassen för att ta bort den och lägga till fler effekter när elementet är fokuserat.

Följande kod tar bort fokuskonturen för alla element.

*:focus {outline:none !important}

Så här lägger du till en fokuskontur:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Har du sett sökingångar som skala när fokuserad? Testa den här inmatningen.

Se pennan
KKpoJJa av Supun Kavinda (@SupunKavinda)
på CodePen.

Inte anpassningsbara ingångar

Stylingformelement har historiskt varit en hög ordning. Det finns några formelement som vi inte har mycket kontroll över styling. Till exempel:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Dessa element tillhandahålls av webbläsaren och utformas baserat på operativsystemet. Det enda sättet att utforma dessa element är att använda anpassade kontroller som skapas med hjälp av stilfulla HTML-element som div, span, etc.

Till exempel när vi stylar <input type="file"> kan vi dölja standardinmatningen och använda en anpassad knapp.

Anpassade kontroller för formulärelement är utvecklat för de flesta större JavaScript-bibliotek. Du hittar dem på GitHub.

Slutsats

Nu bör du förstå hur man utformar enkla formelement och hur man använder anpassade kontroller när webbläsarens inmatningsfält är svåra att utforma. Som jag sa i början av detta inlägg är det bara de grundläggande byggstenarna för CSS-formstyling. Du bör använda dessa tips som en grund för att låta fantasin springa vild.

Som ett avslutande tips, kom ihåg att göra alla dina formulär lyhörda.

Letar du efter mer forminspirationsinspiration? Kolla in den här CodePen-samlingen.