Come inserire i form – Capitolo1

Come inserire i form – Capitolo1

Come inserire i form – Capitolo1

Come inserire i form in una pagina html

Premessa

Questa è la prima lezione per quanto riguarda i form per la seconda lezione vai a Come inserire i form -Capitolo2

 

Argomenti trattati

 

Che cosa sono

I form in una pagina HTML funzionante e utile sono fondamentali, in quanto danno la possibilità all’utente di inviare contenuti al server che poi vengono immagazzinati ed elaborati. Generalmente è composto da una serie di tag che servono ad inserire un tipo di dato ad esempio una casella di testo una lista o una selezione multipla.Bene fatta questa premessa ora andiamo a vedere come inserire i form in una pagina html e come sono formati.



Com’è formato

Un form è formato da diversi tag, tutti inseriti nel tag principale ovvero il tag <form></form> che è quello che lo rappresenta,vediamo un esempio

<form>
     <label>Inserisci un nome</label>
         <input type=”textname=”nome“>
</form>

Come inserire i forum in una pagina html

Nell’esempio è rappresentato un form molto semplice, si chiede di inserire il nome all’interno della casella. Vediamo i tag utilizzati all’interno dell’esempio:

  1. <label> = indica una descrizione indicata al campo cui si riferisce.
  2. <input> = consente l’inserimento dei dati.
  3. <type> = indica il tipo di dato che verrà inserito in questo caso di tipo text (testo). Cosa molto importante tipo (type) va inserito nel tag <input>.

Il tag form consente di aggiungere la proprietà “action” che serve per indicare la pagina a cui verrà indirizzata il contenuto del form.


Inserire un tasto di invio del contenuto

Per inviare il contenuto del form a un server si utilizza, ovviamente, un pulsante. Il pulsante, si inserisce con lo stesso principio della casella di testo ovvero con il tag <input> ma sull’attributo type al posto del valore “text” inseriamo il valore “submit” , e aggiungiamo un altro attributo fondamentale in un pulsante ovvero l’attributo “value” nel quale andremo a inserire il testo che vogliamo compaia nel nostro pulsante ad esempio “invia”. Il pulsante può assumere anche il valore “button” che in questo caso invece di mandare il contenuto al server lo si può associare per un eventuale codice lato client.

<form>
     <label>Invia un nome</label>
        <input type=”textname=”nome“>
        <input type=”submitvalue=”invia“>
</form>

Come inserire i forum in una pagina html

Ecco qui il nostro form leggermente più completo (il tag <br>, come detto nelle lezioni precedenti serve per mandare a capo).


Le scelte multiple

Un altro tag molto utile in un form sono le scelte multiple. Le scelte multiple sono un elenco di voci dove l’utente andrà a cliccare per scegliere la voce desiderata, vediamo come si formano.

Usando sempre il tag <input> e l’attributo “type” andiamo a formare le nostre scelte multiple.

<form>
       <label>Scegli</label>
           
              <p><input type=”checkboxvalue=”1name=”preferenza“/>Scelta1</p>
               <p><input type=”radiovalue=”2name=”opzione“/>Opzione1</p>
</form>

Come inserire i forum in una pagina html

Dall’immagine si può notare che il tipo(type) dell’input è “checkbox”  e sotto “radio”.Ovviamente ci sono delle differenze, come potete notare nel primo caso sono dei quadratini mentre nel secondo sono dei pallini sta a voi la scelta. Oltre al tipo c’è l’attributo “name” vediamo a cosa serve.

Il name serve a garantire che le diverse opzioni vengano unite tra loro infatti sopra c’è scritto preferenze e si riferiscono alle preferenze e sotto opzione e si riferiscono alle opzioni.


Elenchi a cascata o a discesa

La selezione multipla è molto utile quando le voci sono poche, ma se le voci cominciano a salire di numero allora in tal caso è meglio utilizzare un elenco a cascata. Ti starai  chiedendo il  perchè è meglio, ora te lo mostro. Allora il fatto è che la selezione multipla mostra tutte le voci sulla pagina mentre l’elenco a cascata crea una finestrella con un indice scorrevole, vediamo per bene cosa viene fuori.

<form>
     <select name=”numero1size=”5“>
        <optgroup label=”numeri da 1-5“>
           <option value=”1″>Numero1</option>
           …
        </optgroup>
    </select>
</form>

Come inserire i forum in una pagina html

Come potete vedere ha creato una finestra scorrevole dove all’interno ci sono le voci, ma vediamo meglio la struttura.

  1. L’attributo size del tag select regola l’altezza della lista.
  2. Il tag <optgroup> non è obbligatorio ma grazie a quello possiamo rendere la lista più ordinata perchè la divide in categorie.

    Fine prima lezione sui form.

Vedi anche