Hur du formaterar ett kontaktformulär med CSS

August 26

Cascading Style Sheets (CSS) kod används ofta för att formatera text och block av innehåll på webbsidor, men många andra HTML-element kan adresseras av CSS-kod också. Gränssnittselement som används för att inhämta information från en användare i ett kontaktformulär, såsom textfält, knappar, kryssrutor och rullgardinsmenyer, kan alla stiliserad med CSS också. Använd CSS-klasser för att formatera olika element i din HTML-formulär.

Instruktioner

1 Ändra storleken på kontaktformulär gränssnittselement med "width" och "height" egenskaper. Till exempel genom att lägga till följande kod mellan "huvudet" taggarna i HTML-dokument:

<Style type = "text / css">

.bigbutton {

width: 100px;

höjd: 50px;

}

</ Style>

Tilldela en inlaga knapp till "bigbutton" klass för att göra det stora:

<Input type = "submit" class = värde "bigbutton" = "Big Button" />

Denna stora knappen gör formuläret mer praktiskt för användare med nedsatt syn. Öka storleken på text ingångar som används för att samla in namn, adresser, e-postadresser och telefonnummer samt så att användarna kan läsa sina bidrag lättare. Det är lättare att stilisera specifik form komponenter med en klass väljare som ovan, eftersom de flesta av dem är "input" element, och en typ väljare skulle påverka dem alla. Använd "auto" för "bredden" eller "höjd" fastighetsvärde att automatiskt skala den dimensionen.

2 Ändra bakgrundsfärgen av formelement med "bakgrund" egendom. Lägg till följande kod mellan "stil" taggar i huvudsektionen:

.röd{

bakgrund: Mistyrose;

}

Du kan använda någon av CSS färgnamn eller ett hexadecimalt värde som "# 00ff00." Eftersom element kan tillhöra mer än en klass, gör en stor knapp med en ljus röd bakgrund med denna kod:

<Input type = "knapp" class = "bigbutton red" value = "stora röda knappen" />

Rött är användbar för att indikera viktiga delar av formuläret, som ett personnummer fält, medan andra färger kan tyda på valfria fält. Text ingångar, "textarea" element "välj" element "alternativ" element, och "form" elementen själva påverkas av "bakgrund" egendom. Kryssrutor och alternativknappar inte.

3 Lägg gränser och / eller konturer för att bilda element med en annan klass deklaration:

.kantad{

kant: 2px # 00f000 fast ämne;

kontur: 1px grå streckad;

}

Kryssrutor och radioknappar har inte gränser tillämpas på dem, men kan ha konturer. Alla andra formelement kan ha båda. Konsultera W3schools.com för en lista över möjliga gräns- och konturstilar. Använd gränser och konturer för att skilja viktigare kontaktformulärfält från liknande grannar, som primära och sekundära telefonnummerfält.

4 Ändra teckensnitt och text-stils för formelement att slutföra dina anpassningar. Till exempel, lägg till följande klass:

.styletext {

font-size: 16px;

text-shadow: 1px 1px grå;

}

Knappar, text ingångar, "textarea" element, och "Select" element kan ha sin text formaterad på detta sätt. Du kan också använda egenskaper som "font-weight", "font-family" och "font-style." Färga texten med "färg" egendom. Ett enskilt element "alternativet" kan ha text färgad annorlunda än sina grannar. Testa din kod i olika webbläsare för att säkerställa formuläret gör rätt.

Tips

  • Ett annat sätt att styling kontaktformulär är att skapa olika klasser för olika typer av information som begärts av formuläret. Till exempel skapa en klass för namnet inmatningsfältet, en för telefonnummer fältet, en annan för e-postadressen, och så vidare. Var och en av dessa områden är stylad av en annan klass, så till exempel, kan namnfältet verkar större än de andra eller e-postfältet kan använda en annan färg.

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2020 Astrixsoft.com | Contact us: webmaster# astrixsoft.com