Benvenuti a questa prima lezione/approfondimento su uno dei tag html5 più usati per inviare form, oggi vi parlerò del tag input text e quali sono i suoi attributi.

Per attributi intendo tutte quelle caratteristiche che possono venirci comode quando vogliamo dare dei parametri molto specifici a questi elementi.

La sintassi principale di un tag input di tipo “text” è la seguente:

Il tag input text accetta i seguenti parametri (elencherò quelli maggiormente compatibili ad oggi):

Autofocus: permette di focalizzare fin da subito l’attenzione su questo determinato input appena si carica la pagina web.

Readonly: vi permette di inserire al suo interno o un placeholder oppure un testo, ma non può essere usato dall’utente e quindi resta in modalità solo visibile.

Maxlenght: molto comodo per limitare il numero di caratteri che andranno inseriti. Basta specificare la lunghezza massima delle lettere con un numero.

Placeholder: forse il più usato, permette di inserire un testo che guiderà l’utente nel comprendere cosa dovrà inserire in quel determinato campo di testo.

Required: usando questo attributo renderete il tag input obbligatorio e quindi la validazione del from stesso sarà più facile.

Ci sono altri parametri (pochi) che non ho inserito ma credo sia troppo presto per cominciare ad usarli nella sintassi HTML5, infatti molti browser non sono supportati appieno da tutti gli attributi di questo tipo.

Non poteva mancare un mio esperimento dimostrativo con tanto di stile CSS3 applicato e ovviamente vi ho inserito al suo interno qualche chicca di codice, per rendervi la vita più semplice durante il vostro design di pagine web.

Per ultimo ho verificato anche se su iphone ci fosse qualche problema del caso, ma nulla da segnalare se non che vi raccomando l’uso della regola CSS per i dispositivi mobili:

che NON lascia al dispositivo la visualizzazione degli elementi, ma ottempera al CSS da noi scritto.