6 – Form2

Pubblicato il di

Vediamo gli elementi che si possono aggiungere al ns form:

radio button

<td>Sesso:</td><td>M</td><td><input type="radio" name="mfRadio" value="M"><br />
F <input type="radio" name="mfRadio" value="F" checked="checked"></td>

L’attributo checked indica che il radio button in questione sarà selezionato. Gli altri attributi sono disable, autofocus, required che fungono come in precedenza. Il name dei 2 radio è lo stesso cambia solo il value.

Check box

<tr>
    <td>Hobby</td<td>
    Calcio <input type="checkbox" name="hobbyCheck" value="calcio"><br />
    Film <input type="checkbox" name="hobbyCheck" value="film"><br />
    Fumetti <input type="checkbox" name="hobbyCheck" value="fumetti"><br /></td>
</tr>

Molto simile al radio button, anche qui i name sono uguali tra loro. La differenza tra i check box e i radio button è che in questi ultimi solo un valore è selezionatile, uno esclude l’altro, in gergo tecnico si dice che sono mutuamente visivi, mentre i check box possono essere selezionati multipli. La pagina che i riceve i dati col checkbox non riceverà un valore ma un vettore (insieme di più valori: array) . Gli attributi sono uguali ai radio button.

Combo box

<select>
    <option value="AN"> ANCONA </option>
    <option value="BG"> BERGAMO </option>
    <option value="CT"> CATANIA </option>
</select>

Il Combo box si indica col tag <select> e le opzioni al suo interno sono definite col tag <option> .

Il valore passato col submit dal combo box è quello presente nell’attributo value e non quello scritto nella descrizione del tag option (nel ns caso AN), a meno che non venga indicato alcun value, allora riceverò il valore della descrizione (ANCONA). Se si vuole selezionare un valore predefinito, bisogna aggiungere selected nel rispettivo tag option. Anche qui valgono gli attributi disable, autofocus, required. In aggiunta l’attributo degno di attenzione è multiple che permette la selezione di più elementi dell’ elenco.

<select multiple="multiple">

Posso cmq selezionare 1 elemento ma posso selezionarne anche più di 1 (tenendo premuti i tasti o shift o ctrl).

Pulsanti di invio

Il bottone che invia automaticamente (senza ausili di java script) i dati alla action è quello di submit

<input type="submit" value="REGISTRA CLIENTE">

e quello che cancella i dati è quello di reset

<input type="reset" value="resetta">

Per questi pulsanti valgono sia gli attributi disable che autofocus. Nel submit con html5 è possibile specificare una pagina di atterraggio, quindi un attributo formaction ed avere all’interno dello stesso form pulsanti che inviano i dati a destinazioni differenti.

<input type="submit" formaction="modifica.php" value="MODIFICA CLIENTE">
<input type="submit" formaction="elimina.php" value="ELIMINA CLIENTE">

formtarget ci permette di aprire la pagina di destinazione nella stessa pagina (self), in una nuova (blank)

<input type="submit" formaction="modifica.php" formtarget="blank" value="MODIFICA CLIENTE">
<input type="submit" formaction="elimina.php" formtarget="self" value="ELIMINA CLIENTE">

Aggiungiamo il campo password, valgono ovviamente tutti gli attributi per i input type

<tr>
    <td>Password</td> <td><input type="password" name="psw" id="psw"></td>
</tr>