Come mettere caselle di testo in un modulo HTML5

Molti degli usi elementi del modulo HTML5 si basano sul tag input. Questo cavallo di lavoro web-page-building è un tag general-purpose usato per fare una serie di oggetti di input interessanti, ma non è l'unico tipo di casella di testo a vostra disposizione. È inoltre possibile creare campi di password e caselle di testo multilinea, come mostrato nella parte superiore di questo modulo demo.

Come mettere caselle di testo in un modulo HTML5

Il codice per le caselle di testo in questa figura si presenta come segue:

<! DOCTYPE HTML>
<Html lang = "it">
<Head>
<Title> formDemo.html </ title>
<Meta charset = "UTF-8" />
</ Head>
<Body>
<H1> Modulo Demo </ h1>
<Form>
<Fieldset>
<Legend> Immissione testo </ legend>
<P>
<Label> Casella di testo </ label>
<Input type = "text"
id = "myText"
value = "testo qui" />
</ P>
<P>
<Label> password </ label>
<Input> type = "password"
id = "MyPwd"
value = "segreto" />
</ P>
<P>
<Label> Area di testo </ label>
<Textarea> id = "myTextArea"
righe = "3"
cols = "80"> Il vostro testo qui </ textarea>
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Una casella di testo di base

Costruire una casella di testo di base è semplice:

  1. Creazione di un elemento di input.

    Il tag <input> crea la struttura generale dell'elemento.
  2. Impostare il tipo di "testo" per indicare che si sta costruendo un elemento di testo standard, non qualcosa di più elaborato.
  3. Aggiungere un attributo id dare un nome all'elemento.

    Questo diventa molto importante quando si aggiunge JavaScript alla pagina perché il codice JavaScript utilizzerà il ID per estrarre i dati dal modulo.
  4. Aggiungi dati di default.

    È possibile aggiungere dati di default, se si desidera, con l'attributo value. Qualsiasi testo si inserisce nel valore diventerà il valore predefinito del modulo.

L'elemento di testo pone una piccola scatola sullo schermo. Quando un visitatore alla tua pagina web seleziona la casella, il cursore si trasformerà in un I-beam, e il visitatore sarà in grado di digitare il testo nella casella.

Un campo

Il campo password, mostrato nella figura, un aspetto simile al campo di testo ordinario, ma ha una differenza principale: Quando i dati utente digita nel campo password, il contenuto del campo è sostituita da asterischi.

Un campo utilizza la stessa tag input, come un campo di testo di base. L'unica differenza è che si imposta l'attributo id di "password".

Gli asterischi sostituzione possono impedire a chi guarda male di scoprire la password, ma un campo password non offre sicurezza reale - soprattutto se si utilizza JavaScript, che rende il codice di recupero liberamente disponibile per il browser. JavaScript non è la lingua da utilizzare se si desidera mantenere un sacco di segreti.

Una casella di testo multi-linea

A volte si vuole dare i visitatori della pagina web la possibilità di inserire più righe di testo. L'elemento textarea HTML5 è perfetto per questa situazione. Ecco come fare la propria area di testo:

  1. Iniziare con il tag <textarea> per indicare l'inizio di una casella di testo su più righe.

    Utilizzare il tag <label> per dare alla vostra area di testo un nome, se volete.
  2. Specificare il numero di righe.

    Indicare il numero di righe (o linee) di testo che si desidera l'area di testo per contenere. Scatole grandi accogliere più testo ma richiedono più spazio sullo schermo.
  3. Indicare il numero di colonne.

    Il numero di colonne mostra come grande (in caratteri) nella casella di testo dovrebbe essere. Una forma page-width è generalmente di 80 caratteri.
  4. Aggiungere il <textarea /> tag di chiusura.