CSS: form sperimentali

  • CSS
  • Gabriele Romanato
CSS: form sperimentali

I form sperimentali con i CSS sono form complessi che propongono soluzioni nuove ispirandosi spesso alla modulistica cartacea e cercando di riprodurla sul Web. In questo esempio ho riprodotto la facciata di un modulo di versamento su conto corrente postale Banco Posta. Per ottenere il risultato finale ho dovuto utilizzare i commenti condizionali per Internet Explorer e un semplice script JavaScript per Safari e Opera. Il risultato è interessante da un punto di vista visuale, ma presenta delle problematiche per quanto riguarda l'usabilità del form stesso.

La marcatura è piuttosto verbosa, pur mantenendo intatta la semantica originale. Il CSS è il seguente:


/* General styles */

body {
	margin: 2em 0;
	padding: 0;
	background: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

#bollettino {
	font-size: 76%;
	margin: 0 auto;
	width: 500px;
	padding-left: 1em;
	border-right: 1px solid #000;
}


/* Title */

h2 {
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	border-bottom: 1px solid;
}

span.logo {
	float: right;
	margin: 0;
	padding-right: 1em;
}
span.logo span {
	font-weight: bold;
}


/* Form styles */

input {
	border: 1px solid #c00;
	vertical-align: 0;
}

label {
	font-weight: bold; 
	vertical-align: 5px;
}

table {
	display: inline;
}

td, td input {
	width: 18px;
	height: 22px;
}

#ccn, #euro, 
#importo, #intestato, 
#causa, #eseguito, 
#via, #caps {
	padding-top: 0.5em;
}


#importo label, #intestato label, 
#eseguito label, #via label, 
#caps label {
	vertical-align: -4px;
}




#euro1 {
	margin-left: 1.1em;
}

#importo input, #intestato input,
#eseguito input, #via input, 
#caps input {
	border-width: 0 0 1px 0; 
	border-style: dotted; 
	border-color: #000;
}

#causa {
	margin-top: 0.8em;
	margin-right: 1em;
	border: 1px solid #000;
	padding-bottom: 2em;
}

#causa input {
	border-width: 0 0 1px 0;
	border-style: dotted;
	border-color: #000;
	display: block;
	width: 100%;
}

#causa label {
	background: #fff;
	padding: 3px 3px 3px 0.3em;
	position: relative;
	top: -15px;
	left: 3px;
}

#bollo {
	margin: 0 1em 0 0;
	padding-top: 100px;
	text-align: right;
}

#cap {
	margin-right: 0.2em;
}

Gli elementi del form non sono stati flottati e si è fatto ricorso al posizionamento relativo in un solo caso. In effetti gli elementi seguono il normale flusso del documento. Internet Explorer richiede i seguenti stili aggiuntivi:


<head>
<!--[if IE]>
<style type="text/css">
#importo label, #intestato label, #eseguito label, #via label, #caps label {vertical-align: -3px;}
#causa>input {border-right: 1px solid; position: relative; width: 99.5%;}
</style>
<![endif]-->
</head>

Safari e Opera necessitano invece del seguente codice JavaScript per poter impostare degli stili CSS in modo dinamico:


window.onload = function () {
		var inputs = document.getElementsByTagName("input");
		for (var i=0; i<inputs.length; i++) {
			if(inputs[i].getAttribute("id") == "causale") {
				if(navigator.userAgent.indexOf("Safari") != -1)  {
					inputs[i].style.width = "99.5%";
				} else if(navigator.userAgent.indexOf("Opera") != -1) {
					inputs[i].style.width = "483px";
				}
											   
			}
		}
};

Potete visionare l'esempio finale in questa pagina.

Ti potrebbe interessare anche

Torna su