Slik formaterer et kontaktskjema med CSS

Cascading Style Sheets (CSS) kode brukes ofte for å formatere tekst og blokker av innhold på websider, men mange andre HTML-elementer kan tas opp av CSS-kode i tillegg. Grensesnittelementer som brukes til å innhente informasjon fra en bruker i et kontaktskjema, for eksempel tekstfelt, knapper, avmerkingsbokser og drop-down menyer, kan alle bli stilisert med CSS også. Bruk CSS-klasser for å formatere forskjellige elementene i HTML-skjema.

Bruksanvisning

1 Endre størrelsen på kontaktskjemaet grensesnittelementer med "bredde" og "høyde" egenskaper. For eksempel legge til følgende kode mellom "hodet" kodene i HTML-dokumentet:

<Style type = "text / css">

.bigbutton {

width: 100px;

høyde: 50 piksler;

}

</ Style>

Tildele en innlevering knapp til "bigbutton" klasse å gjøre det stort:

<Input type = "submit" class = "bigbutton" value = "Big Button" />

Denne store knappen gjør skjemaet mer praktisk for brukere med synsvansker. Øk størrelsen på tekst innganger som brukes til å samle inn navn, adresser, e-postadresser og telefonnumre i tillegg slik at brukerne kan lese sine bidrag lettere. Det er lettere å stilisere bestemte skjema komponenter ved hjelp av en klasse selector som ovenfor fordi de fleste av dem er "input" elementer, og en type velger vil påvirke dem alle. Bruk "auto" for "width" eller "height" eiendomsverdi for å automatisk skalere den dimensjonen.

2 Endre bakgrunnsfarge for skjemaelementer med "bakgrunnen" eiendom. Legg til følgende kode mellom "stil" koder i hodedelen:

.rød{

bakgrunn: MistyRose;

}

Du kan bruke noen av CSS fargenavn eller en heksadesimal verdi som "# 00FF00." Siden elementene kan tilhøre mer enn én klasse, gjør en stor knapp med lys rød bakgrunn med denne koden:

<Input type = "button" class = "bigbutton rød" value = "Big Red Button" />

Red er nyttig å indikere viktige deler av skjemaet, som et personnummer feltet, mens andre farger kan indikere valgfrie felt. Tekst innganger, "textarea" elementer ", velg" elementer, "Valg" elementer, og "Form" elementer selv er berørt av "bakgrunn" eiendom. Avmerkingsbokser og alternativknapper er det ikke.

3 Legg til rammer og / eller skisserer å danne elementer med en annen klasse erklæring:

.bordered {

border: 2px # 00f000 solid;

disposisjon: 1px grå stiplede;

}

Avmerkingsbokser og alternativknapper ikke har kantlinjer brukt til dem, men kan ha skisserer. Alle andre skjemaelementer kan ha begge deler. Rådfør W3schools.com for en liste over mulige grense og skissere stiler. Bruk grenser og skisserer for å skille flere viktige kontaktskjemafeltene fra lignende naboer, som primære og sekundære telefonnummer felt.

4 Endre skrift og tekst stil egenskaper for skjemaelementer for å fullføre tilpasninger. For eksempel legge til følgende klasse:

.styletext {

font-size: 16px;

text-shadow: 1px 1px grå;

}

Knapper, tekst innganger, "textarea" elementer, og "velg" Elementer kan ha sin tekst stylet på denne måten. Du kan også bruke egenskaper som "font-weight", "font-family" og "font-style." Color teksten ved hjelp av "farge" eiendom. Et individ "alternativ" element kan ha tekst farget annerledes enn sine naboer. Test ut koden i ulike nettlesere for å sikre skjemaet gjengis riktig.

Hint

• En annen tilnærming til styling din kontaktskjema er å lage forskjellige klasser for de ulike typer informasjon forespurt av skjemaet. For eksempel lage en klasse for navnet inntastingsfeltet, en for telefonnummeret feltet, en annen for e-postadresse, og så videre. Hvert av disse feltene er stylet av en annen klasse, så for eksempel, kan navnefeltet vises større enn de andre, eller e-postfeltet kan ansette en annen farge.