Web Design Trails - Sulla scia del web design

Oggi torniamo a parlare di HTML5 e CSS3, e lo facciamo realizzando un form di registrazione. Infatti, una delle novità più importanti del nuovo standard, è l’introduzione di nuovi tipi di input che semplificano la progettazione di un modulo.

Partiamo dall’HTML

Iniziamo scrivendo la struttura del nostro form:

<article>
	<h3>Registrati</h3>

	<form class="registrazione" method="post" action="">
		<fieldset>

			<p>
				<label for="nome">Nome</label>
				<input type="text" id="nome" name="nome" placeholder="es. Mario" required value="" />
			</p>

			<p>
				<label for="cognome">Cognome</label>
				<input type="text" id="cognome" name="cognome" placeholder="es. Rossi" required value="" />
			</p>

			<p>
				<label for="email">E-mail</label>
				<input type="email" id="email" name="email" placeholder="es. mariorossi@email.com" required value="" />
			</p>

			<p>
				<label for="sito_web">Sito web</label>
				<input type="url" id="sito_web" name="sito_web" placeholder="es. http://www.mariorossi.com" value="" />
			</p>

			<p class="bottone">
				<button class="bottone-invia" type="submit">Invia</button>
			</p>

		</fieldset>
	</form>
</article>

Come potete vedere, ho realizzato un semplice form di registrazione dove vengono richiesti solo nome, cognome, indirizzo e-mail e sito web. Per dare al form una struttura accessibile, ho utilizzato i tag fieldset, paragrafo e label.

La struttura del form

Iniziamo dal tag fieldset. Esso raggruppa logicamente i campi di un form ed è utile ad esempio per dividere i dati anagrafici da quelli professionali. In questo caso abbiamo un solo raggruppamento, perché il modulo gestisce solo le informazioni anagrafiche.

All’interno di fieldset utilizziamo il tag paragrafo per suddividere i vari campi del form. Ogni paragrafo contiene una label e un campo di input; per collegarli usiamo l’attributo for e id, cosi come si vede dal codice riportato qui sotto:

	<p>
		<label for="nome">Nome</label>
		<input type="text" id="nome" name="nome" placeholder="es. Mario" required value="" />
	</p>

A questo punto entrano in gioco le novità di HTML5. Infatti utilizzeremo due nuovi tipi di campo: email ed url. Il primo ci consente di inserire un indirizzo di posta elettronica, mentre il secondo un indirizzo web; in entrambi i casi si occupera il browser di assicurarsi che i dati inseriti dall’utente siano corretti.

Un’altra cosa importante è rendere obbligatori i campi principali; per fare questo html5 ci mette a disposizione un nuovo attributo booleano: required, in questo modo penserà il browser ad effettuare il controllo sulla presenza del valore e non sarà neccessario l’utilizzo di javascript.

Un’altra novità è l’attributo placeholder; esso consente di visualizzare un breve suggerimento all’interno dell’input o della textarea, in modo da guidare l’utente durante la compilazione. E’ importante notare però che placeholder non deve sostituire la label perché è pensato per un altro scopo e non è altrettanto accessibile e supportato.

Applichiamo il CSS

Ok, il nostro form è pronto, ora dobbiamo solo dargli uno stile. Per fare questo utilizzeremo principalmente il CSS3; in particolare le proprietà come border-radius, box-shadow, box-sizing e transition e sfrutteremo le potenzialità del linear gradient. Ecco un estratto del codice:

article{
	margin: 0 auto;
	width: 382px;
	padding: 20px 32px 20px 32px;
	border: solid 2px #854221;
	border-radius: 16px;

	
	/* Colore di sfondo */
	background-color: #432716;
	/* Immagine di sfondo nel caso il browser non supporti gli sfondi multipli */
	background-image: url(images/foglie.png);
	/* Immagine di sfondo + sfumatura */
	background-image: url(images/foglie.png), linear-gradient(top,rgba(66,39,22,1) 0%,rgba(89,49,28,1) 100%);
	background-repeat: no-repeat;
	background-position: left bottom;
	box-shadow: 2px 2px 5px #000;
}

fieldset{
	margin: 0;
	padding: 0;
	border: none;
}

.registrazione p{
	margin: 20px 0;
}

.registrazione label{
	padding-left: 10px;
}

.registrazione input{
	background-color: #854221;
	color: #fff;
	height: 30px;
	width: 100%;
	margin: 8px 0 0;
	padding: 3px 16px 3px 16px;
	border: solid 1px #fff;
	border-radius: 16px;
	opacity: 0.5;
	
	box-sizing: border-box;
}

.registrazione input:-moz-placeholder {
	color: #ccc;
	font-style: italic;
}

.registrazione input::-webkit-input-placeholder {
    color: #ccc;
    font-style: italic;
}

.registrazione input:hover {
	opacity: 1;
}

.registrazione input:focus {
	opacity: 1;
	border-color: #854221;
	background-color: #fff;
	color: #000;
	outline: none;
}

p.bottone{
	text-align: right;
	margin-bottom: 0;
}

.bottone-invia{
	color: #fff;
	background-color: #854221;
	opacity: 0.5;
	height: 62px;
	width: 62px;
	border-radius: 50%;
	border: solid 1px #fff;
	cursor: pointer;

	transition: opacity 0.75s ease;
}

.bottone-invia:hover {
	opacity: 1;
}

Per realizzare lo sfondo del nostro form utilizziamo gli sfondi multipli offerti da CSS3: il primo sfondo è dato dall’immagine delle foglie, il secondo dalla sfumatura verticale. Un’altra particolarità del codice è l’utilizzo dei selettori :-moz-placeholder e ::webkit-input-placeholder che sono entrambi utilizzati per personalizzare l’aspetto del testo segnaposto nei campi di input.

Conclusioni

Come abbiamo visto HTML5 ci consente di semplificare di molto il lavoro da svolgere per sviluppare un form e ci mette a disposizione campi di input più avanzati. Tuttavia il supporto è ancora in fase di evoluzione e la demo mostrata funziona correttamente solo su Firefox, Chrome e Safari. Opera, pur supportando nuovi campi non ci da la possibilità di personalizzare graficamente il placeholder e Internet Explorer è rimandato alla versione 10.

Come al solito però possiamo gradualmente iniziare a sfruttare queste nuove funzionalità in quanto i tipi di input sconosciuti al browser saranno visualizzati come normali campi di testo. Sarà quindi possibile sfruttare Modernizr per sopperire alle mancanze del browser oppure delegare i controlli direttamente lato server.