Moduli HTML (con dreamWeaver)




i form /moduli prendono (in genere) le caratteristiche del sistema operativo



cosa leghiamo ad un modulo

  1. parametri di identificazione ID e NAME
  2. cosa fa ? - Action / Azione ..... ???????
  3. metodo (come la fa) : due opzioni GET o POST



Approfondimenti
Cosa cambia tra get e post


external image slide10.gif
  1. Il metodo GET è più indicato del metodo POST quando sono in gioco pochi parametri, che è quindi sensato passare al programma CGI sulla linea di comando. Se invece i parametri sono troppi o troppo lunghi, passarli sulla linea di comando, oltre che essere poco pratico, potrebbe addirittura essere impossibile, in quanto il sistema operativo del Server potrebbe avere una lunghezza massima per i comandi.
  2. Sulla linea di comando si possono passare solamente parametri testuali, dunque il metodo GET è vincolato ad utilizzare solo tale formato, mentre con il metodo POST qualsiasi altro formato può essere adottato. Possono così essere scambiati tra Client e Server anche files con immagini, sonoro, video, ecc.
  3. Una terza differenza tra il metodo GET ed il metodo POST è nel fatto che una chiamata GET viene eseguita normalmente sull'URL che segue l'attributo HREF di un marcatore <A> all'interno di una pagina HTML generica (come nell'esempio in figura), mentre un POST viene eseguito dal Client solo in risposta ad una form. Questo vuol dire che si può confezionare una pagina web in cuiun link porta ad una pagina generata con un parametro . Questo comporta anchje la visibilità delle pagine generate con parametro GET da parte dei motori di ricerca.


Ecco il codice XHTML che crea un modulo che chiama Google per effettuare una ricerca semplice

<form id="modulo1" name="modulo1" method="get" action="http://www.google.it/search">
  <label>cerca
    <input name="q" type="text" id="q" size="40" maxlength="80" />
  </label>
  <input type="submit" name="OK" id="OK" value="search" />
</form>











Il tag <form> si occupa di definire il modulo, tutto ciò che è tra il suo tag d'apertura e quello di chiusura è parte del modulo stesso. Possiamo definire diversi tipi di elementi: campi di testo, checkbox, area di testo e box di selezione. Gli attributi del tag <form> sono action e method.
  • action: serve per specificare a quale file verranno inviati i dati; solitamente si tratta di uno script lato server, come PHP, ASP o CGI, tanto per citarne alcuni
  • method: serve a indicare il metodo attraverso il quale saranno inviati i dati alla pagina che li elaborerà. Può assumere i valori get e post:
    • con get le informazioni vengono concatenate all'indirizzo del file specificato da action, in questo modo:
      action.php?nome_campo1=valore_campo1&nome_campo2=valore_campo2
    • con post le informazione vengono inviate solo tramite la richiesta HTTP e non sono visibili in maniera evidente all'utente (con appositi programmi è possibile leggere la richiesta HTTP per scovare questi valori, quindi non considerate questo sistema assolutamente sicuro).






La sostanziale differenza tra i due risiede nel fatto che get supporta al massimo 255 caratteri mentre la capacità post è sostanzialmente illimitata.
[modifica]

Tipi di campo

Per poter creare un campo di testo, o una casella ci serviremmo del tag <input>. I principali attributi di <input> sono type (che determina il tipo di elemento), name(che determinano un nome per ogni campo in modo da far comprendere a uno script quali opzioni sono state scelte) e value (per inserire del testo precompilato nei campi).
All'interno dei form è possibile inserire uno o più campi e di vario tipo, facendo uso del tag <input> i cui attributi per definire i tipi di campi sono i seguenti:
Valore
Tipo di campo
text
Campo di testo
radio
Voci da selezionare, mutuamente esclusive
checkbox
Voci per selezione multipla
Il valore text creerà una finestra in cui sarà possibile scrivere ciò che si desidera. Vi sono altri due attributi del tag <input></input> che possono essere molto utili e sono:
  • size: stabilisce la lunghezza del campo da compilare
  • maxlength: stabilisce il numero massimo di caratteri che il campo accetterà
Se si vuole oscurare il contenuto di un campo (ad esempio per permettere di inserire una password senza che essa venga visualizzata da altri) è sufficiente inserire password come valore dell'attributo type.
Ecco un esempio di ciò che si è visto finora:

[modifica]

Menu a scelta

È possibile creare dei menù a discesa all'interno dei moduli; questo permetterà all'utente di scegliere tra voci predefinite. Per creare un menù a discesa si usa il tag <select>, </select> al cui interno verrà definita ogni voce attraverso il tag <option>, </option>.
La sintassi per creare un menù a discesa è la seguente: <select name="nome del menù"><option>Testo che si vedrà nel menù</option></select>
Esempio di menù a discesa:



Si può anche creare un altro tipo di menù in cui non vi è un menù a cascata ma si scorre semplicemente un elenco. La sintassi per creare questo tipo di menù prevede l'uso dell'attributo size, all'interno del tag <select>, che conterrà come valore il numero delle opzioni del menù.
Esempio di elenco da cui scegliere:


[modifica]

Area di testo

Le aree di testo si possono creare utilizzando il tag <textarea> che, a differenza del tag <input>, deve essere chiuso dal suo tag di chiusura </textarea>. Gli attributi del tag <texarea> sono principalmente due:
  • rows: indica il numero di righe che conterrà l'area di testo
  • cols: indica il numero di colonne che conterrà l'area di testo
Ovviamente il valore di questi due attributi sarà un numero a nostra discrezione.
Altri due attibuti sono name che dà un nome all'area di testo e wrap (un attributo senza valore) che manderà automaticamente a capo il testo che verrà scritto all'interno della textarea.
Ecco un esempio di textarea:


Pulsanti

Esistono due pulsanti che si possono definire tramite l'HTML uno per inviare i dati a un'altra pagina e un altro per resettare i campi di un modulo per poterli ricompilare, il primo è contraddistinto dal valore submitnell'attributo type; il secondo dal valore reset sempre nell'attributo type.
Esempio di pulsante che invia i dati:



Esempio di pulsante che cancella i dati:




appendice

elenco delle province italiane per il modulo html

http://www.satollo.com/elenco-delle-province-italiane-pronto-per-il-web-php-jsp-asp