HTML/XHTML  »  Guide  »  Guida HTML 

Inserire testo (campo testo, textarea, password)



Per consentire all'utente di inserire del testo è possibile utilizzare un "campo testo". Se il campo è su una singola linea avremo:

<input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200" />

L'attributo maxlength indica il numero massimo di caratteri che l'utente può inserire, con size si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).

Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una "textarea" (area di testo). Ecco la sintassi:

<textarea name="testo" rows="5" cols="40">
  qui puoi scrivere il tuo testo
</textarea>

L'attributo rows indica il numero di righe della textarea, cols il numero di caratteri (cioè di colonne) che ogni riga può contenere.

Come si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra l'apertura e la chiusura del tag.

Esiste infine il campo password che mostra degli asterischi (o palline) al posto dei caratteri inseriti :

<input type="password" maxlength="8" size="18" value="mia_password" name="mioTesto" />

risultato:

Nota: la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell'utente. L'invio dei dati attraverso il Web, se non vengono adottate altre misure di sicurezza, avviene 'in chiaro'.

Possiamo prevedere campi di testo accessibili solo in lettura. Ad esempio:

<input readonly="readonly" maxlength="8" size="25" value="leggere l'informativa" name="mioTesto" />

che risulta:

Oppure possiamo impostare le aree di testo come campi disabilitati:

<input disabled="disabled" maxLength="8" size="25" value="leggere l'informativa" name="mioTesto" />

cioè

Ultimi articoli HTML/XHTML

Inserire video nelle pagine Web con HTML5

Codec, compatibilità dei browser, tools, codice e best practices per...

LungoJS: semantica HTML5 per il mobile

Realizzare layout per dispositivi mobili tenendo conto della...

Web storage, i cookies secondo HTML5

Come rendere persistenti i dati con HTML5

HTML5, section o article? ...E il div?

Cerchiamo di fare chiarezza sull'uso di questi due nuovi elementi e...

HTML5, la validazione del codice

Gli strumenti per verificare l'aderenza agli standard di pagine e...

Altri articoli

Guide HTML/XHTML

Guida HTML5

Una guida per conoscere e applicare da subito le novità introdotte...

Guida XHTML

XHTML è il nuovo standard per il WEB ed è la transizione verso...

Altre guide

Newsletter @Daily HTML.it

Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

27 Febbraio 2012 a Milano
Disponibilità: 7 Posti

Corso Webmaster base

12 Marzo 2012 a Milano
Disponibilità: 6 Posti

Corso Webmaster base

20 Febbraio 2012 a Roma
Disponibilità: 7 Posti

Corso Google AdWords Base

28 Marzo 2012 a Roma
Disponibilità: 7 Posti