Form Html e validazione

Prof. Silvestro Pasquale

 Form

Quante volte ci sarà capitato di incontrare dei moduli da compilare

online. Per questi va utilizzato il tag
<form> </form> in questo modo:

<form>
Inserisci il tuo nome:
<input type=“text”>
</form>

2
 Form

il tag input, attraverso la proprietà type, consente di assegnare un

comportamento visuale differente al tag stesso.

Di default, questo valore è impostato su text.

Possiamo specificare un valore predefinito, impostando la proprietà value

<form>
Inserisci il tuo nome:
<input type=“text” value=“Ciao”>
</form>

3
 Invio contenuti

Generalmente, una form è inviata sfruttando un pulsante, che nell’HTML

corrisponde al tag input con l’attributo type impostato sul valore submit.
<form>
Inserisci il tuo nome:
<input type="text">
<input type="submit" value="invia“>
</form>

4
 Attributo type

L’attributo type del tag

input può assumere
vari valori

5
 Scelte multiple

<form>

<p>Le tue preferenze: </p>

<p><input type="checkbox" value="1"/> 1</p>
<p><input type="checkbox" value="2"/> 2</p>
<p><input type="checkbox" value="3 "/> 3</p>

<p>La tua nazione: </p>

<p><input type="radio" value="1" checked="checked" name= "nazione"/> Italia</p>
<p><input type="radio" value= "2" name= "nazione" /> USA</p>
<p><input type="radio" value= "3 " name= "nazione" /> Canada></p>
</form>

6
 Scelte multiple

A seconda che utilizziamo il valore radio, piuttosto che checkbox,

il tag input è in grado di consentire o meno una scelta multipla
tra le opzioni specificate.

L’attributo booleano checked, se presente, indica che l’opzione è selezionata.

L’attributo name per i radio button funge da “ButtonGroup” ovvero fa sì che i

radio button appartengano allo stesso gruppo

8
 Elenchi a discesa semplici

• l’attributo size del tag select regola l’altezza della lista;

9
 Elenchi a discesa
con gruppi (provatelo)

<select name="group" size="3">

<optgroup label="Gruppo A">
<option value="A.1">valore 1</option>
<option selected value="A.2">valore 2</option>
<option value="A.3">valore 3</option>
</optgroup>

<optgroup label="Gruppo B">

<option value="B.1">valore 1</option>

<option value="B.2">valore 2</option>
<option value="B.3">valore 3</option>
</optgroup>
</select>

1
 Testo su più righe

<textarea name="description" maxlenght="200" cols="100" rows="5">testo</textarea>

1
 Attributo type

Mike Taylr ci mette a disposizione questo link per verificarne le varie tipologie, con la
compatibilità dei valori a seconda del browser usato

https://miketaylr.com/code/input-type-attr.html

Es:

password: mostra un campo per l’inserimento di password;

file: consente l’invio di file in remoto (necessita di un opportuno script lato server);
email: per un campo destinato all’indirizzo mail

1
 Attributo type

1
 Attributo type

<p>Telefono: <input type="tel" /></p>

<p>E-mail: <input type="email" /></p>

<p>Password: <input type= "password" /></p>

<p>Sito: <input type="url" /></p>

<p>Numero: <input type="number" min="10" max="60" step="2" value="42" />

<progress value="25" max="100">25%</progress>

1
 Attributo type

La barra progress ha senso se unita al codice Javascript dove è possibile

1 variarne il valore dinamicamente
 Segnaposto:placeholder

<p>La tua e-mail:

<input type="email" placeholder="[email protected]" />
</p>

Aiutano l’utente nella compilazione dei form

1
 Autocomplete

Per i dati sensibili per i quali non si vuole l’autocompletamento, si può

disabilitare in questo modo:

<input type="text" autocomplete="off" />

Potremmo, per esempio, voler inibire questo comportamento per gestire la privacy
dell’utente, in campi che contengono dati sensibili, come lo username o il numero
di carta di credito

Questo tag è inseribile anche all’interno del tag form, con l’effetto che tutti gli input
al suo interno avranno questo comportamento. Di default il valore di questo
attributo è impostato su on
1
 Datalist

Si tratta di un elemento che consente di aggiungere un elenco di valori

lasciando però all’utente la possibilità di inserire un valore non incluso
nella lista

La tua provincia:
<input type="text" name="province" list="provinces" />
<datalist id="provinces">
<option value="AG">Agrigento</option>
<option value="AL">Alessandria</option>
<option value="AN">Ancona</option>
</datalist>

1
 Datalist

Novità della versione 5 dell’Html

Si tratta di un elemento che consente di aggiungere un elenco di valori
lasciando però all’utente la possibilità di inserire un valore non incluso
nella lista

1
 Validazione form

Dare un feedback visuale all’utente, relativo allo stato dei dati inseriti nella pagina, lo
aiuta a riempire correttamente i dati, migliorandone la sensazione d’uso.

Senza queste specifiche è necessario sviluppare codice client-side in JavaScript, che

effettui le operazioni di convalida

Nota bene: sia questa nuova modalità sia quella con codice client-side non devono
assolutamente sostituire un controllo server side, perché l’unico modo certo di
garantire che i dati siano conformi è quello di controllarli in un ambiente dove
l’utente non possa alterarli.

2
 Required

Rendiamo obbligatorio un campo:

<p>La tua e-mail:

<input type="email" required="required" /></p>
<p>Il tuo telefono:
<input type="tel" required /></p>
<input type="submit" value="Invia“>

2
 Pattern complessi

Se voglio che l’utente inserisca solo dei caratteri particolari, o dei pattern specifici a
seconda del campo, come può essere il caso di una data o di uno username, uso
pattern utilizzando le regular expression

<input type="text" required="required”

placeholder="Username con minimo 6 e massimo 9 caratteri" pattern="\w{6,9}" />

2
 Messaggi di errore

Purtroppo, con il solo linguaggio Html non è possibile associare un messaggio di

errore specifico senza scrivere codice JavaScript.

Vedremo che dovremo intercettare gli eventi in Javascript. Esempio:

<input type="text" required placeholder="Inserisci un nome"

oninvalid="this.setCustomValidity('Il nome va sempre inserito') " />

2
 Disattivare validazione

In alcuni casi può essere necessario bloccare la validazione. Per arrivare a questo
scopo, è sufficiente inserire l’attributo novalidate all’interno della form.

È anche possibile associarlo a un tag input, per poter inibire in un particolare

frangente la validazione, nella variante formnovalidate. Generalmente, questo
attributo si aggiunge a un pulsante, quando si vuole evitare che quest’ultimo scateni
la validazione (per esempio, perché il pulsante è associato a un’azione, come
l’eliminazione di un elemento, che non necessita dei dati inseriti nella form).