Det börjar med skicka-knappen. Den aktuella CSS-koden ska se ut så här:
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;
}Denna syntax ger följande resultat:
Det är en helt vanlig knapp. Den är för närvarande inte särskilt spännande utformad, men fyller definitivt sitt syfte. Ändå ska den pimpas lite. Det slutgiltiga resultatet kommer att se ut så här:
Det finns också en hover-effekt. Knappen kommer alltså att ändra färg när muspekaren förs över den.
När du noggrant tittar på knappen kommer du att märka de avrundade hörnen. Det är förmodligen en av CSS-nyheterna som webbdesigners har väntat länge på. För "förr" fanns inte denna möjlighet. (Undantaget var naturligtvis button-elementen, där man kunde arbeta med bilder.)
Nu kan man alltså applicera avrundade hörn inte bara på normala sidoelement, utan också på knappar.
I CSS3-working draft finns egenskapen border-radius för detta ändamål. Mozilla- och WebKit-webbläsare erbjuder alternativa skrivsätt för att experimentellt stödja denna egenskap.
• -moz-border-radius
• -webkit-border-radius
Numera stöder emellertid alla moderna webbläsare de avrundade hörnen.
Basen av denna kunskap skulle nu kunna se ut så här:
-webkit-border-radius: 17px; -moz-border-radius: 17px; border-radius: 17px;
Men något annat faller på vid närmare granskning. Faktum är att knappen också har tilldelats en färggradient.
Också något sådant kan äntligen genomföras med CSS-medel. Där används olika gradient-egenskaper för detta ändamål. Dessa tilldelas värdet till background-egenskapen. Numera finns det för övrigt många verktyg med vilka man kan generera färgförlopp.
Ett av dem hittar ni exempelvis på sidan http://www.css3factory.com/linear-gradients/. I följande syntax har en färggradient och de bekanta avrundade hörnen definierats.
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;
}
Jag nämnde redan att knapparna ska reagera när muspekaren sveps över dem. För detta används det välkända :hover.
#submit:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}Knappen kommer också att reagera på en annan händelse. För detta används pseudo-klassen :active. Man kan då reagera på att knappen klickas på.
#submit:active {
border-top-color: #1b435e;
background: #1b435e;
}
I det nuvarande exemplet ändras färgen på övre kanten och bakgrundsfärgen på knappen när knappen klickas på.
Runda hörn för fälten
De så kallade runda hörnen kan naturligtvis appliceras inte bara på knappen, utan även på inmatningsfälten. Resultatet kan se ut så här:
Och här är den tillhörande syntaxen:
input[type="text"], input[type="email"], textarea {
border: 1px solid #bebebe;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
De nödvändiga egenskaper som behövs för att definiera sådana runda hörn känner ni redan till.
Formulärvalidering med hjälp av CSS3
För närvarande kan besökarna skriva in vad de vill i inmatningsfälten. En kontroll av de inskrivna värdena sker inte. Det ska nu ändras. Fälten kommer att kontrolleras mot följande kriterier:
• Namnfältet måste vara ifyllt.
• E-postfältet måste innehålla en syntaktiskt korrekt e-postadress.
• Det flerradiga inmatningsfältet måste också ha blivit ifyllt.
Först när dessa kriterier uppfylls kan formuläret verkligen skickas.
För att markera ett fält som obligatoriskt, tilldelar man det attributet required. Ett fält som har märkts med detta måste vara ifyllt och får alltså inte vara tomt.
En tillämpning av detta skulle se ut så här:
<form> <input type="text" name="name" id="name" value="" required/> </form>
Här skulle webbläsaren kontrollera om fältet har fyllts i. Om fältet är tomt och ändå försöker skicka formuläret bör webbläsaren visa ett felmeddelande.
Något mer avancerat blir det förresten med e-postfält. Dessa tilldelar man type="email" och attributet required. Nu behöver fältet inte bara ha ett värde, utan faktiskt en korrekt e-postadress måste fyllas i, annars visas även ett felmeddelande när formuläret skickas.
Totalt kan formuläret nu se ut på följande sätt:
<ol>
<li>
<label for="name">Namn:</label>
<input type="text" name="name" id="name" value="" required/>
</li>
<li>
<label for="email">E-postadress:</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="Skicka" />
</li>
</ol>I mer omfattande formulär kan det naturligtvis finnas obligatoriska fält men också sådana fält som inte nödvändigtvis ska fyllas i. I sådana fall kan ni markera de obligatoriska fälten separat. Åtkomsten till obligatoriska fält lyckas i CSS via :required.
:required {
background-color: #ff0000;
}Genom denna syntax kommer de obligatoriska fälten att ha en röd bakgrundsfärg.
En annan metod för att uppmärksamma obligatoriska fält är följande syntax:
input:required:focus {
border: 1px solid red;
outline: none;
}När man försöker skicka formuläret får det första fältet en röd ram och fokus, vilket inte har fyllts i eller inte uppfyller valideringskraven.
