Corso di HTML

La costruzione dei moduli II

 

Altro tag per definire degli input per l'utente è TEXTAREA; questo si comporta come il tipo di input TEXT, ma consente di inserire il testo su più righe. Infatti come TEXT consente di definire ( ovviamente ) l'attributo name, e come potrete ricordare se avete letto il precedente articolo, questo viene utilizzato per referenziare il contenuto del controllo da parte dello script.
È possibile inoltre definire la dimensione in caratteri del controllo tramite gli attributi rows e cols.
Tramite rows si indica l'altezza del controllo come numero di righe di testo, mentre cols indica la larghezza del controllo come numero di colonne. Attensione alla larghezza del carattere: questa può variare da browser a browser e dipende dal fatto che si scelga un carattere proporzionale o meno.
Con questo tag si richiede il corrispondente </TEXTAREA>; tra i due è possibile definire il testo che apparirà di default nel controllo.

L'ultimo tag che ci resta da analizzare è <SELECT>, questo consente di definire una casella di controllo a discesa.
Un controllo a discesa può essere di due tipi:
1) E' un controllo che visualizza normalmente la voce selezionata, ma se si preme una freccia alla sua destra, mostra una lista con altre opzioni che è possibile selezionare
2) E' un controllo che visualizza tutte le opzioni ( o una parte ) in una lista che è sempre visibile e non richiedere di premere alcun bottone per essere visualizzata.

Questo tag oltre a name accetta ( per le liste di tipo 2 ) anche gli attributi size per definire il numero di elementi visibili contemporaneamente nella lista e l'attributo multiple che se usato consente di selezionare più voci simultaneamente.
Per definire le voci della lista tra i tag <SELECT> e </SELECT> è necessario utilizzare il tag <OPTION> per ogni voce. L'unico attributo di questo tag è selected e che se utilizzato comporta che la voce inizialmente risulta selezionata.

Vediamo qui di seguito come può essere implementato un semplice form:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<form method="post" action="/cgi-bin/MyScript.cgi">
  <p>Modulo di Registrazione:</p>
  <table width="50%" border="0">
    <tr>
      <td width="36%">Nome: </td>
      <td width="64%">
        <input type="text" name="nome">
      </td>
    </tr>
    <tr>
      <td width="36%">Cognome:</td>
      <td width="64%">
        <input type="text" name="cognome">
      </td>
    </tr>
    <tr>
      <td width="36%">Lavoro Autonomo</td>
      <td width="64%">
        <input type="checkbox" name="lavoro">
      </td>
    </tr>
    <tr>
      <td width="36%">Stato familiare</td>
      <td width="64%">
        <input type="radio" name="statoFam" value="radiobutton" checked>
        Celibe
        <input type="radio" name="statoFam" value="radiobutton">
        Sposato </td>
    </tr>
    <tr>
      <td width="36%">Hobby</td>
      <td width="64%">
        <select name="hobby">
          <option value="pesca">Pesca</option>
          <option value="caccia" selected>Caccia</option>
          <option value="niente">Niente</option>
        </select>
      </td>
    </tr>
    <tr>
      <td width="36%">Commenti: </td>
      <td width="64%">
        <textarea name="commenti" cols="40" rows="8">Inserisci qui i tuoi commenti...</textarea>
      </td>
    </tr>
  </table>

  <blockquote>
    <p>
      <input type="reset" name="Submit2" value="Reset">
      <input type="submit" name="Submit" value="Invia">
    </p>
</blockquote>
</form>
</body>
</html>


Come avete potuto osservare nel form è inserita una tabella per poter allineare tutte le descrizioni dei controlli ed i controlli stessi.
Sono stati utilizzati due controlli TEXT, due RADIO, uno di tipo CHECKBOX, uno SELECT, uno TEXTAREA e due pulsanti: uno Submit ed uno Reset.
Come vedete creare un modulo è un'operazione molto semplici, tutt'altro è invece creare lo script che lo gestisce... ma date tempo al tempo che vedremo anche questo!

 

Torna all'indice Generale del corso di Corso di HTML di Software Planet