Form

Sintassi

Tag: <form>

Attributi:

Action: indica l’URL del programma o della pagina di risposta che processerà i dati(es. link a pagina di conferma o mailto)

Method: post | get (metodo con cui i dati del modulo saranno inseriti al server (necessita programmazione).

Id: nome univoco per identificare il form

<form action=”registrazione.php” method=”post” id =”iscrizione”>
…Contenuto del form…
</form>

Invio Dati

Post: incorpora i dati del modulo nella richiesta http(non sono visibili all’utente)

Get : accoda il valore dell’url di richiesta della pagina.

Se non si specifica di default è GET.

Generalmente non si utlizza il metodo GET per moduli lunghi.

La lunghezza massima degli URL è di 8129 caratteri.

Per questioni di sicurezza è meglio usare POST

Elementi

E necessario creare degli spazi di input per l’utente. Ogni spazio deve avere un nome.

Si possono inserire:
aree di testo.
check box (selezione multipla).
radio box (selezione singola).
menu a selezione singola o multipla.

Campo di testo

E possibile definire un campo per l’inserimento del testo della dimensione di una singola riga.

Tag da utilizzare è input e il valore  da assegnare all’attributo type può essere di due tipi:

text: se è di tipo testuale

Password:  se è di tipo pw

Altri attributi sono:
Name: nome logico del campo di testo
Value: valore iniziale di default
Size lunghezza del campo in nr di caratteri
Maxlenght: numero massimo di caratteri consenti

<input type="text" name="nome” size="40" maxlength="40" />

Aree di testo

Per creare un area di testo su più righe  si usa il tag textarea.

Attributi possibili:
name : nome logico
cols : numero colonne
rows numero di righe

<textarea name=“areatesto” cols=“50” rows=“6”>
Testo iniziale di default
</textarea>

Radio button

Il radio button permette di inserire opzioni mutualmente esclusive.

Il tag per creare un radio button è input con il vaolre di type  settato a radio.

Altri attributi sono:
name: nome logico. Un gruppo di pulsanti devono condividere lo stesso nome.
value : valore di risposta del bottone. Imposta il valore da inviare al server quando viene selezionato il  pulsante di scelta.
checked: bottone selezionato di default

Esempio:
<input type="radio" name=“naz" value="ita" checked="checked"/>
Italiana <br/>
<input type="radio" name=“naz" value="fra" />
Francese <br/>
<input type="radio" name=“naz" value="eng" />
Inglese <br/>
<input type="radio" name=“naz" value="usa" />
Americana <br/>

Check box

Il check box permette di inserire opzioni di selezione, anche multiple.

Il tag per creare un check box e’ input con il valore di type settato a checkbox.

Altri attributi sono:
Name: nome logico. In questo caso il nome non deve essere uguale a quelli degli altri elementi del gruppo.
Value: valore di risposta del bottone. Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta.
checked: e’ il bottone selezionato di default

Esempio
<input type="checkbox" name="discorso" value="il_discorso_del_re" /> Il discorso del re <br/>
<input type="checkbox" name="immaturi" value="immaturi" /> Immaturi <br/>
<input type="checkbox" name="black" value="black_swan" /> The black swan <br/>

Menu di selezione

L’ultima possibilità è quella di creare dei menu popup a selezione singola o multipla.
Per definire il menu si usa il tag select
Per ogni riga del menu (opzione) si usa il tag option

Gli attributi di select possono essere:
 Name: nome logico
Size: numero di opzioni del menu che devono essere visualizzate prima che venga aperto
Multiple: permette la selezione multipla, altrimenti si ha la singola

Gli attributi di option sono:
 Value: valore inviato al server quando viene selezionata la riga

Esempio:
<select name="professione">
<option value="studente">Studente</option>
<option value="operaio">Operaio</option>
<option value="casalinga">Casalinga</option>
</select>

Menu di selezione multipla Esempio(per scegliere piu opzioni si deve cliccare CTRL)
<select name="interessi" multiple="multiple">
<option value="lettura">Lettura</option>
<option value="musica">Musica</option>
<option value="sport">Sport</option>
<option value="viaggi">Viaggi</option>
<option value="danza">Danza</option>
</select>

Pulsanti invia e cancella

Per realizzare il pulsante di invio (invia i dati inseriti nella form con il metodo indicato –get o post) o cancella (resetta tutti I campi della form) e’ necessario usare il tag input.

L’attributo type puo’ essere settato come:
Submit: invia i dati
Reset: resetta i dati

Gli altri attributi possibili sono:
Name: nome logico
Value: etichetta che compare sopra il pulsante

Esempio:
<input type="submit" value="Iscrivimi" />
<input type="reset" value="Cancella i campi" />

Label

Per rendere le form piu’ facilmente navigabili, si possono aggiungere alcuni elementi.

Ogni campo dovrebbe avere la sua label (etichetta). Si usa il tag label e si associa ad un oggetto della form in modo univoco attraverso l’attributo for. Il campo for deve contenere l’id dell’oggetto interessato.

Esempio:
<label for=“nome”> Inserisci il tuo nome </label>
<input type=“text” name=“nome” id=“nome” value=“ ”/>

Nota: se si utilizzano le label, name e id sono entrambi obbligatori.

Esempio:
<label for="nome"> Inserisci il tuo nome: </label>
<input type="text" name="nome" id="nome" size="40" maxlength="40"/>

Fieldset e legend

Si possono raggruppare campi della form correlati, per esempio i vari elementi del nome (nome, cognome, titolo, etc.) o dell’indirizzo (via, città, CAP, provincia, Paese, etc.) usando il tag fieldset.

Il tag fieldset può avere come figlio il tag legend, che serve per indicare un’etichetta per il raggruppamento.

Esempio:
<fieldset>
<legend> Nome e cognome </legend>
<p>Nome<input type="text" name="nome"/> </p>
<p>Cognome <input type="text" name="cognome"/> </p>
</fieldset>

Option groups

Il tag optgroup serve per raggruppare le opzioni in un menù di selezione.

Richiede un attributo label, il cui valore è visualizzato dal browser come un’intestazione (non selezionabile) prima delle opzioni corrispondenti.

Esempio
<select name="country">
<optgroup label="Africa">
<option value="gam">Gambia</option>
<option value="mad">Madagascar</option>
<option value=“nam">Namibia</option>
</optgroup>