HTML5, elemento di input - Parte 2

Già nella prima parte di questo Tutorial abbiamo definito gli attributi con cui possiamo lavorare, abbiamo visto che ne abbiamo di nuovi per HTML5 e altri che non lo sono, tuttavia quando si tratta di costruire campi solidi che ci aiutano nei processi essenziali del sito, è quando la combinazione di questi e l'uso corretto di ciascuno ci aiuterà a raccogliere i migliori dati possibili.
Impostazione della dimensione di un campo
Come abbiamo visto, abbiamo due attributi che influenzano direttamente la dimensione di un campo, questi sono taglia sì lunghezza massima, uno regola l'ampiezza visiva del campo e l'altro la quantità di testo che il campo può effettivamente ricevere.
Vediamo un esempio utilizzando entrambi gli attributi:

 Esempio
Patata dolce:

Città:
Frutta:
Invia voto 

In questo esempio vediamo come viene specificato il primo campo a lunghezza massimaSolo con questo diciamo al browser che può accettare solo 10 caratteri, tuttavia può assegnare la larghezza predefinita, nel secondo campo specifichiamo la taglia Con quello che diciamo quanto dovrebbe essere largo, tuttavia non limitiamo l'input del testo e nella terza applichiamo entrambe le condizioni, vediamo come funziona nel browser.

Uso del valore e segnaposto
Avendo visto la differenza tra questi due campi, in questo esempio dimostreremo in modo efficace come applicarli a un form, vediamo come usarli nel codice seguente.

 Esempio
Patata dolce:
Città:
Frutta:
Invia voto 

Come possiamo vedere nei primi due campi, il segnaposto indica un aiuto per ciò che l'utente deve inserire, questo valore che il segnaposto contiene non è il valore del campo di input, quindi se sottoponiamo questi campi arriveranno vuoti, invece il terzo campo Ha qualcosa già inserito nell'attributo value, questo se fosse passato durante l'invio a detto modulo.
Vediamo come il browser ci mostrerebbe questo

Crea campi di sola lettura
A volte dobbiamo lavorare con campi di sola lettura, o perché il valore non deve essere modificato dall'utente o è semplicemente informativo. Può anche essere il caso che sia il risultato di un precedente filtraggio da parte dell'utente e solo questo valore può essere visto, per questo abbiamo due opzioni che sebbene sembrino uguali sono totalmente diverse.
Avevamo già visto l'attributo sola lettura e sappiamo che è così che il campo non può essere modificato, abbiamo anche l'attributo Disabilitato, svolge la stessa funzione di sola lettura, tuttavia quando si fa Invia tutti i campi Disabilitato non sono presentate quindi è come se non esistesse nel modulo.
Vediamo quanto sopra spiegato con un esempio pratico.

 Esempio
Patata dolce:
Città:
Frutta:
Invia voto 

Possiamo vedere che il primo campo è disabilitato e il secondo in sola lettura, quando nel browser viene visualizzato il disabilitato appare con una colorazione grigia, solitamente associata alla non abilitazione, mentre il readonly viene visto come un campo normale, anche se se proviamo per scrivere a chiunque, nessuno ci permetterà di inserire il testo.
Vediamo come è l'esempio:

Con questo finiamo questa seconda parte del tutorial, ora siamo in grado di migliorare i nostri moduli utilizzando le convalide di base delle dimensioni e della quantità di testo e controllando anche ciò che l'utente può modificare o meno, oltre a poter mostrare l'aiuto nei campi in modo che abbia un'idea che dovresti o non dovresti entrare.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo