Begin met de Verzenden-knop. De huidige CSS-stijl zou er als volgt uit moeten zien:
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;
}Deze syntaxis leidt tot het volgende resultaat:
Dit is een heel normale knop. Hij is niet bijzonder spannend ontworpen op dit moment, maar voldoet zeker aan zijn doel. Toch moet hij wat worden opgefleurd. Het eindresultaat zal er als volgt uitzien:
Er is ook een hover-effect. De knop zal dus van kleur veranderen wanneer de muis erover beweegt.
Als je goed kijkt naar de knop, zul je de afgeronde hoeken opvallen. Dit is zeker een van de CSS-nieuwigheden waar webdesigners lang op hebben gewacht. Want "vroeger" was deze mogelijkheid er simpelweg niet. (Een uitzondering waren natuurlijk de button-elementen, waarbij je met afbeeldingen kon werken.)
Je kunt nu dus afgeronde hoeken toepassen op niet alleen standaard paginacomponenten, maar ook op knoppen.
In de CSS3 Working Draft is daarvoor de eigenschap border-radius. Mozilla- en WebKit-browsers bieden alternatieve schrijfwijzen voor experimentele ondersteuning van deze eigenschap.
• -moz-border-radius
• -webkit-border-radius
Op dit moment ondersteunen echter alle moderne browsers afgeronde hoeken.
Op basis van deze kennis kan een border-radius-definitie er nu als volgt uitzien:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Bij nader inzien valt nog iets op. De knop kreeg ook een kleurverloop toegewezen.
Ook zoiets kan eindelijk met CSS alleen worden gedaan. Hiervoor worden verschillende eigenschappen voor gradient gebruikt. Deze worden aan de background-eigenschap toegewezen als waarde. Inmiddels zijn er tal van tools beschikbaar waarmee je kleurverlopen kunt genereren.
Een daarvan vind je bijvoorbeeld op de website http://www.css3factory.com/linear-gradients/. In de volgende syntaxis zijn dus een kleurverloop en de bekende afgeronde hoeken gedefinieerd.
In het huidige voorbeeld ziet de syntaxis voor de knop er in elk geval als volgt uit:
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;
}
Ik had al laten doorschemeren dat de knoppen moeten reageren wanneer er met de muis overheen wordt gegaan. Hiervoor wordt het bekende :hover gebruikt.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}De knop zal ook reageren op een ander evenement. Hiervoor wordt de pseudo-klasse :active gebruikt. Hiermee kun je reageren wanneer er op de knop wordt geklikt.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
In het huidige voorbeeld veranderen de kleur van de bovenrand en de achtergrondkleur van de knop wanneer erop wordt geklikt.
Afgeronde hoeken voor de velden
Natuurlijk kunnen de zogenaamde afgeronde hoeken niet alleen op de knop worden toegepast, maar ook op de invoervelden. Het resultaat zou er als volgt uit kunnen zien:
En hier is de bijbehorende syntaxis:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
De benodigde eigenschappen die je nodig hebt om zulke afgeronde hoeken te definiëren, ken je al.
Formuliervalidatie met CSS3
Op dit moment kunnen bezoekers invoeren wat ze willen in de invoervelden. Er wordt niet gecontroleerd op de ingevoerde waarden. Dat zal nu veranderen. De velden worden gecontroleerd op de volgende criteria:
• Het veld Naam moet ingevuld worden.
• Het veld E-mail moet een syntactisch correct e-mailadres bevatten.
• Het meerregelige invoerveld moet ook ingevuld zijn.
Pas als aan deze criteria is voldaan, kan het formulier daadwerkelijk worden verzonden.
Om een veld als verplicht veld aan te duiden, wijs je het het required-attribuut toe. Een veld dat hiermee is gemarkeerd, moet worden ingevuld en mag dus niet leeg zijn.
Een toepassing zou er als volgt uitzien:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Hier zou de browser controleren of het veld is ingevuld. Als het veld leeg is en toch wordt geprobeerd het formulier te versturen, zou de browser een foutmelding moeten geven.
Iets verder gaan de zaken trouwens bij e-mailvelden. Deze worden toegewezen met type="email" en de attribuut required. Nu moet niet alleen een waarde in het veld worden ingevoerd, maar daadwerkelijk een geldig e-mailadres, anders is er ook een foutmelding wanneer het formulier wordt verzonden.
In totaal kan het formulier er nu als volgt uitzien:
<ol>
<li>
<label for="name">Naam:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-mailadres:</label>
<input type="email" name="email" id="email" value="" required/>
</li>
<li>
<label for="comment">Opmerking:</label>
<textarea cols="32" rows="7" name="content" id="content" required></textarea>
</li>
<li class="button">
<input type="submit" name="submit" id="submit" value="Verzenden" />
</li>
</ol>
Vooral in uitgebreidere formulieren kan het voorkomen dat er verplichte velden zijn, maar ook velden die niet noodzakelijk moeten worden ingevuld. In dergelijke gevallen kunt u de verplichte velden apart markeren. De toegang tot verplichte velden kan in CSS worden gedaan via: required.
:required {
background-color: #ff0000;
}Met deze syntaxis krijgen de verplichte velden een rode achtergrondkleur.
Een andere manier om de aandacht te vestigen op verplichte velden is de volgende syntaxis:
input:required:focus {
border: 1px solid red;
outline: none;
}
Als hier geprobeerd wordt het formulier te verzenden, krijgt het eerste veld een rode rand en de focus, dat niet is ingevuld of niet voldoet aan de validatie-eisen.
Als een gebruiker dit veld dan correct invult, maar er is nog een ander veld niet ingevuld, dan zal dit volgende bezoek ook worden gefocust en voorzien van een rode rand na het volgende verzendbezoek.
