Utilizzando struttura formano Tag sulla vostra pagina Web HTML5

Fin dall'inizio, le pagine web hanno avuto la capacità di raccogliere dati da parte degli utenti. HTML5 ha un set standard, ma molto utile di elementi del modulo è possibile utilizzare per ricevere input. Questi elementi del modulo seguono molte delle stesse regole degli altri tag.

Questa figura mostra un modulo che contiene tutti i principali elementi del modulo HTML si possono incontrare:

Utilizzando struttura formano Tag sulla vostra pagina Web HTML5

I tag utilizzati per gestire la struttura generale del modulo comprendono:

  • <Form>: Questo tag contiene la forma attuale; racchiude tutti gli altri elementi del modulo. Il tag <form> deve includere anche la action = "" attributo. Ciò indica che non si prevede di chiamare uno script lato server quando il modulo viene inviato.
  • <Fieldset>: Questo tag speciale permette di raggruppare una serie di elementi di input insieme. Non è necessario, ma può fare forme complesse più facile da navigare. Per impostazione predefinita, un fieldset ha un solo bordo intorno esso, ma è possibile cambiare questo con i CSS.
  • <Legend>: è possibile aggiungere una leggenda di un fieldset di agire come etichetta per l'intero fieldset.
  • <Label>: Questo segna testo come l'etichetta associata con un particolare elemento di input. È possibile utilizzare l'opzione per l'attributo per specificare quale ingresso elemento l'etichetta è associato. Tags etichette sono normalmente utilizzati per fare CSS styling delle forme più facile da gestire.

Il codice per una pagina utilizzando tutte le variabili di struttura mostrata nella figura viene eseguito 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>

<Fieldset>
<Legend> Selezione degli elementi </ legend>
<P>
<Label> Select List </ label>

<Select id = "myList">
<Option value = "1"> un </ option>
<Option value = "2"> due </ option>
<Option value = "3"> tre </ option>
<Option value = "4"> quattro </ option>
</ Select>
</ P>

<P>
<Label> Caselle </ label>
<Input type = "checkbox"
id = "chkEggs"
value = "greenEggs" />
<Label for = "chkEggs"> Green Eggs </ label>

<Input type = "checkbox"
id = "chkHam"
value = "ham" />
<Label for = "chkHam"> Ham </ label>
</ P>
<P>
<Label> pulsanti Radio </ label>
<Input type = "radio"
name = "radSize"
id = "sizeSmall"
value = "piccola"
controllato = "controllato" />
<Label for = "sizeSmall"> piccolo </ label>

<Input type = "radio"
name = "radSize"
id = "sizeMed"
value = "medium" />
<Label for = "sizeMed"> medio </ label>

<Input type = "radio"
name = "radSize"
id = "sizeLarge"
value = "grande" />
<Label for = "sizeLarge"> grande </ label>
</ P>
</ Fieldset>

<Fieldset>
<Legend> Pulsanti </ legend>
<P>
<Tipo di pulsante = "button">
pulsante standard
</ Button>

<Input type = "button"
value = "tasto input" />
<Input type = "reset" />
<Input type = "submit" />
</ P>
</ Fieldset>
</ Form>
</ Body>
</ Html>

Fieldset, leggenda, e tag label non sono necessari, ma aiutano a organizzare la pagina in modo che sia più facile da stendere con i CSS. L'uso corretto di questi tag e CSS spesso rende i moduli molto più facile da lavorare rispetto alle hack basati su tabelle anziani.