Espressioni regolari in HTML5

Una delle novità più interessanti di HTML5 sta nel fatto di poter inserire delle espressioni regolari direttamente nel markup, una caratteristica utile in particolare per procedure di verifica degli input; le espressioni regolari dovranno essere passate in questo caso come valore per un apposito attributo denominato “pattern“. Nell’esempio contenuto in questo post vedremo come utilizzare questa nuova feature nel caso della realizzazione di un semplice form contenente un unico campo di testo.

<form action="dati.php" method="post">
	<label for="nome">Inserisci il tuo nome: </label>
   	<input type="text"
	   name="nome"
	   id="nome"
	   placeholder="3 <> 12"
	   pattern="[A-Za-z]{3,12}"
	   autofocus
	   required>
	<button type="submit">Invia </button>
</form>

Il pattern utilizzato, “[A-Za-z]{3,12}”, permette di validare soltanto gli input composti da caratteri alfabetici, maiuscoli o minuscoli, inoltre, per poter essere accettata una stringa non dovrà essere più corta di “3” caratteri o più lunga di “12”; si noti l’utilizzo dell’attributo “autofocus“, attraverso cui il browser imposta automaticamente il focus su un determinato elemento di un form, e di “require“, che definisce l’obbligatorietà di compilare un campo di input.