Lad os starte med sendeknappen. Den aktuelle CSS-stil bør se ud som følgende:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}Denne syntaks fører til følgende resultat:
Dette er en helt almindelig knap. Den er ikke særlig spændende designet lige nu, men den opfylder helt sikkert sit formål. Ikke desto mindre skal den pimpes lidt op. Det endelige resultat vil se sådan ud:
Derudover er der en hover-effekt. Knappen vil ændre sin farve, når musen bevæger sig over den.
Hvis I ser nøjere på knappen, vil I bemærke de runde hjørner. Det er helt sikkert en af de CSS-nyheder, som webdesignere har ventet på i lang tid. For "i gamle dage" var denne mulighed ikke tilgængelig. (Undtagelser var naturligvis button-elementerne, hvor man kunne arbejde med billeder.)
Nu kan de runde hjørner anvendes ikke kun på normale sideelementer, men også på knapper.
I CSS3-draften er der egenskaben border-radius. Mozilla- og WebKit-browsere tilbyder alternative skrivemåder for en eksperimentel understøttelse af denne egenskab.
• -moz-border-radius
• -webkit-border-radius
I mellemtiden understøtter alle moderne browsere dog de runde hjørner.
Baseret på denne viden kunne en border-radius-definition se sådan ud:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Men noget andet vil falde i øjnene ved nærmere betragtning. Faktisk er der også blevet tildelt en gradient til knappen.
Også sådan noget kan endelig implementeres med CSS. For dette bruger man de forskellige gradient-egenskaber. Disse tildeles som værdi til background-egenskaben. Der findes i mellemtiden mange værktøjer, som kan generere farveforløb.
Et af dem kan I f.eks. finde på siden http://www.css3factory.com/linear-gradients/. I følgende syntaks er der altså defineret en farvegradient og de velkendte runde hjørner.
I det aktuelle eksempel ser syntaksen for knappen sådan ud:
input[type="submit"] {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
background: -linear-gradient(top, #3e779d, #65a9d7);
padding: 10px 20px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 21px;
font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
width: auto;
}
Jeg havde allerede antydet, at knapperne skal reagere, når musen er placeret over dem. Til det bruges det kendte :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Knappen vil også reagere på en anden begivenhed. Hertil bruges pseudo-klassen :active. Med denne kan man reagere, når knappen klikkes på.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
I det aktuelle eksempel vil farven på toppen og baggrundsfarven på knappen ændre sig, når knappen klikkes på.
Runde hjørner til felterne
De såkaldte runde hjørner kan selvfølgelig også anvendes på tekstfelterne, ikke kun på knappen. Resultatet kunne se sådan ud:
Og her er den tilhørende syntaks:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
De nødvendige egenskaber, der kræves for at definere sådanne runde hjørner, kender I allerede.
Formularvalidering med CSS3
Foreløbig kan besøgende indtaste, hvad de ønsker, i indtastningsfelterne. Der foretages ingen kontrol af de indtastede værdier. Det skal ændres nu. Felterne vil blive kontrolleret ud fra følgende kriterier:
• Navnefeltet skal udfyldes.
• E-mailfeltet skal indeholde en syntaktisk korrekt e-mail-adresse.
• Tekstfeltet skal også være udfyldt.
Først når disse kriterier er opfyldt, kan man faktisk sende formularen.
For at angive et felt som obligatorisk, tildeles man attributten required til det. Et felt, der er markeret med denne attribut, skal udfyldes og må derfor ikke være tomt.
En tilsvarende anvendelse ville se sådan ud:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Her ville browseren kontrollere, om feltet er udfyldt. Hvis feltet er tomt, og der stadig forsøges at sende formularen, bør browseren vise en fejlmeddelelse.
Noget mere avanceret er det forresten med e-mail-felter. Disse tildeles type="email" og attributtet required. Nu skal der ikke kun være en værdi i feltet, men faktisk en korrekt e-mail-adresse, ellers vil der også være en fejlmeddelelse, når formularen sendes.
I alt kan formularen nu se sådan ud:
<ol>
<li>
<label for="name">Navn:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-mail-adresse:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Kommentar:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Send" />
</li>
</ol>
I mere omfattende formularer kan der naturligvis være obligatoriske felter, men også felter, der ikke nødvendigvis skal udfyldes. I sådanne tilfælde kan I markere de obligatoriske felter separat. Adgangen til obligatoriske felter opnås i CSS via :required.
:required {
background-color: #ff0000;
}Med denne syntaks vil de obligatoriske felter få en rød baggrundsfarve.
En anden måde at gøre opmærksom på obligatoriske felter på er følgende syntaks:
input:required:focus {
border: 1px solid red;
outline: none;
}
Når man forsøger at sende formularen her, vil det første felt få en rød ramme og fokus, hvis det ikke er udfyldt eller ikke opfylder valideringskravene.
Hvis en bruger udfylder dette felt korrekt, men der stadig er et andet felt, der ikke er udfyldt, vil dette også blive fokuseret og få en rød ramme efter næste sende-besøg.
