Applichiamo gli stili ai Form
Anche i form Html sono soggetti a possibili "stilizzazioni" mediante l'utilizzo dei Css, è possibile applicare ai principali elementi del modulo in questione tutte le stilizzazioni grafiche proprietarie dei box e dei text, per maggiori dettagli è possibile consultare le Referenze Css messe a disposizione in questo sito.
Vediamo come cambiare la grafica di un form, il codice da inserire fra i tag <head> e </head> è il seguente:
<style type="text/css">
.form {
background: #FFFF00;
color:#FF0000;
font-family: Tahoma;
font-size: 11px;
border: Solid 1px #000000;
}
</style>
Non c'è molto da spiegare...
.form
definiamo il nome della classe che poi richiameremo all'interno dell'input, possiamo tranquillamente rinominarla
background: #FFFF00
definiamo lo sfondo del form
color:#FF0000; font-family: Tahoma; font-size:11px; definiamo il tipo, la dimensione in pixel e il colore del font
border: Solid 1px #000000; definiamo la dimensione e il colore dei bordi
Ora all'interno del <body> e </body> proviamo ad inserire un form con il seguente codice:
<form> <input type="text" class="form"> <input type="button" value="Invia" class="form"> </form>Nel nostro esempio l'attributo class="form" richiama la classe del Css a cui ci riferiamo sia sul campo "text" che "button".
Se preferiamo possiamo definire due diverse classi, una per le textbox ed una per i bottoni, elementi più utilizzati nelle pagine Web interattive, ma possiamo agire anche sulle textarea e sulle selectbox.
La prima (textarea) si comporta in maniera analoga alle textbox, la seconda (selectbox), purtroppo, non offre la possibilità di appiattire il bordo come abbiamo fatto finora... ma in compenso permette di stilizzare le singole option, ecco come:
<form>
<select>
<option style="background: #FF0000;">Opzione # 1</option>
<option style="background: #0000FF;">Opzione # 2</option>
<option style="background: #00FF00;">Opzione # 3</option>
</select>
</form>
Facile vero? Ora potete divertirvi a cambiare i vostri form con i Css fino ad ottenere l'effetto desiderato.
