Abbellire le form - Input type submit (i pulsanti sbumit)

Abbellire le form con i css- Input type submit (i pulsanti “invia”)

Luglio 22nd, 2008 Articoli tecnici

Questo articolo è nato da un piccolo accorgimento, che sempre di più vedo
sottovalutare da parte dei grafici e webmaster. Ormai, bene o male, tutti utilizzano
i CSS nelle loro pagine per la impostazione del layout, la grafica e quant’altro
(bene o MALE ho detto…), ma pochi curano i piccoli particolari che riguardano
sopratutto “l’abellimento” degli elementi dei form.

Vorrei quindi ribadire, per chi non ne fosse a conoscenza, che esistono nei
CSS i selettori, anche per gli elementi dei form (che di default sono gestiti
dal vostro browser/sistema operativo). Per poterli utilizzare basta infatti
utilizzare i seguenti codici

/* pulsanti submit */
input[type=submit]{
…
}
/* caselle di testo */
input[type=text]{
…
}
/* caselle password */
input[type=password]{
…
}
/* aree di testo */
input[type=textarea]{
…
}

Per iniziare in questo articolo vi propongo 7 semplicissimi(ma non meno efficaci)
modi di personalizzare i vostri pulsanti. Ho voluto realizzare questi primi
esempi senza utilizzare immagini in modo da prevenire sconvenienti abusi che
portano ad appesantire la struttura grafica di un sito internet. Questi esempi
sono semplici, efficaci e leggeri. Le prossime volte vedremo come realizzare
pulsanti più accattivanti utilizzando anchele immagini.

In questo esempio ho utilizzato delle classi associate ad ogni pulsante,
e non i selettori, perché se avessi usato questi ultimi, sarebbe stato impossibile
inserire nella stessa pagina HTML pulsanti con stili diversi. Ovviamente voi
potete usare il metodo che preferite, la differenza sta soltanto nel voler applicare
le caratteristiche a TUTTI gli elementi del tipo che definite o solo ad alcuni.
Vediamo quindi il codice HTML della pagina di esempio:

<h2>Stile 1</h2>
<input class="sub1" type="submit" value="invia" />
<h2>Stile 2</h2>
<input class="sub2" type="submit" value="invia" />
<h2>Stile 3</h2>
<input class="sub3" type="submit" value="invia" />
<h2>Stile 4</h2>
<input class="sub4" type="submit" value="invia" />
<h2>Stile 5</h2>
<input class="sub5" type="submit" value="invia" />
<h2>Stile 6</h2>
<input class="sub6" type="submit" value="invia" />
<h2>Stile 7</h2>
<input class="sub7" type="submit" value="invia" />

Il codice è molto intuitivo. Non c’è altro che una serie di pulsanti di tipo
“submit” e ad ogni pulsante è associato una classe diversa. Vediamo quindi il
codice CSS per dare l’aspetto e gli effetti desiderati a tutte le diverse classi.

/*
CSS Document
by Stefan Manastirliu
www.mnstefan.com
*/
 
#cont {
	padding:10px;
	margin:0;
	width:100%;
}
 
#left {
	width:20%;
	float:left;
	text-align:left;
}
 
#right {
	float:right;
	text-align:left;
	width:80%;
}
 
.sub1 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#CCCCCC;
	border-bottom:4px solid #666666;
	font:12px "Bookman Old Style", "Book Antiqua", Georgia, "Times New Roman", Times, serif;
	color:#341D12;
}
 
.sub1:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	background-color:#CCCCCC;
	border-bottom:4px solid #333;
}
 
.sub1:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	background-color:#CCCCCC;
	border-bottom:4px solid #663300;
}
 
/* ------------------------------------------------ STYLE 2 -------------------------------------------------- */
.sub2 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#FEE9A9;
	border:1px dashed #E9B078;
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#400000;
}
 
.sub2:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	background-color:#FEFCA9;
	border:1px dashed #E9B078;
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#6C0000;
}
 
.sub2:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	background-color:#FEFCA9;
	border:1px dashed #996600;
	font:12px Georgia, "Times New Roman", Times, serif;
	color:#6C0000;
}
 
/* ------------------------------------------------ STYLE 3 -------------------------------------------------- */
.sub3 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#996699;
	border-top:5px solid #BCB8D1;
	border-bottom:5px solid #BCB8D1;
	font:12px Tahoma;
	color:#fff;
}
 
.sub3:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#993399;
	border-top:5px solid #BCB8D1;
	border-bottom:5px solid #BCB8D1;
	font:12px Tahoma;
	color:#ccc;
}
 
.sub3:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#993399;
	border-top:5px solid #BCB8D1;
	border-bottom:5px solid #BCB8D1;
	font:12px Tahoma;
	color:#ccc;
}
 
/* ------------------------------------------------ STYLE 4 -------------------------------------------------- */
.sub4 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#009900;
	border-left:7px solid #003300;
	font:14px Tahoma;
	color:#CCC;
}
 
.sub4:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#009900;
	border-left:7px solid #171717;
	font:14px Tahoma;
	color:#FFF;
}
 
.sub4:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#009900;
	border-left:7px solid #171717;
	font:14px Tahoma;
	color:#FFF;
	border-bottom:1px solid #000;
}
 
/* ------------------------------------------------ STYLE 5 -------------------------------------------------- */
.sub5 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#D3DCF8;
	border-bottom: 1px solid #0E3183;
	border-top: 1px solid #0E3183;
	font:14px Tahoma;
	color:#333;
}
 
.sub5:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#ABBDF1;
	border-bottom: 1px solid #006600;
	border-top: 1px solid #006600;
	font:14px Tahoma;
	color:#000;
}
 
.sub5:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#ABBDF1;
	border-bottom: 1px solid #0E3183;
	border-top: 1px solid #0E3183;
	font:14px Tahoma;
	color:#000;
}
 
/* ------------------------------------------------ STYLE 6 -------------------------------------------------- */
.sub6 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#F0F0F0;
	border:1px solid #E6E6E6;
	font:14px Tahoma;
	color:#555;
}
 
.sub6:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#E5E5E5;
	border:1px solid #D0D0D0;
	font:14px Tahoma;
	color:#555;
}
 
.sub6:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#ABBDF1;
	background-color:#E5E5E5;
	border:1px solid #666;
	font:14px Tahoma;
	color:#000;
}
 
/* ------------------------------------------------ STYLE 7 -------------------------------------------------- */
.sub7 {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#643A1C;
	border:1px solid #2E1F14;
	border-top:3px solid #2E1F14;
	font:14px Tahoma;
	color:#ccc;
}
 
.sub7:hover {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#E5E5E5;
	border:1px solid #CDCDCD;
	border-top:3px solid #2E1F14;
	font:14px Tahoma;
	color:#333;
}
 
.sub7:focus {
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	border:0;
	background-color:#E5E5E5;
	border:1px solid #CDCDCD;
	border-top:3px solid #2E1F14;
	font:14px Tahoma;
	color:#000;
}

Ecco tutto. Il codice CSS mostra tutto quello che serve su come personalizzare
gli elementi all’interno di una pagina.

Stavo per dimenticarmi….volete vedere i risultati?? Beh, su, fate qualcosa anche voi…un copia e incolla del codice sopra e vedrete il risultato di tante righe di codice

Alla prossima!

Scrivi un intervento

You must be logged in to post a comment.