Creare moduli Web

Nella vista Progettazione, il modulo è indicato da un bordo rosso tratteggiato. Se il bordo non appare, selezionate Visualizza > Riferimenti visivi > Elementi invisibili.

Impostate le proprietà del modulo HTML nella finestra di ispezione Proprietà (Finestra >Proprietà):

a.Nella finestra del documento, fate clic sul bordo del modulo per selezionarlo.

b.Nella casella Nome modulo, digitate un nome univoco per identificare il modulo.

L'assegnazione di un nome consente di fare riferimento al modulo o di gestirlo con un linguaggio di script, ad esempio JavaScript o VBScript. Se non assegnate un nome al modulo, Dreamweaver genera un nome utilizzando la sintassi formn e incrementa il valore di n per ogni modulo aggiunto alla pagina.

c.Nella casella Azione, specificate il percorso della pagina o dello script che verrà utilizzato per elaborare i dati del modulo, digitando il percorso oppure facendo clic sull'icona della cartella per accedere alla pagina o allo script appropriato. Esempio: processorder.php.

d.Nel menu a comparsa Metodo, selezionate il metodo per trasmettere i dati del modulo al server.

Impostate le opzioni desiderate tra le seguenti:

Predefinito Utilizza l'impostazione predefinita del browser per inviare i dati del modulo al server. In genere, il valore predefinito è il metodo GET.

GET Accoda il valore all'URL di richiesta della pagina.

POST Incorpora i dati del modulo nella richiesta HTTP.

Non utilizzate il metodo GET per inviare moduli lunghi. La lunghezza massima degli URL è di 8192 caratteri. Se i dati inviati superano questo limite, possono verificarsi troncamenti che determinano risultati di elaborazione inaspettati o errati.

Le pagine dinamiche generate dai parametri passati dal metodo GET possono essere contrassegnate poiché tutti i valori necessari per rigenerare la pagina sono contenuti nell'URL visualizzato nella casella Indirizzo del browser. Al contrario, le pagine dinamiche generate dai parametri passati dal metodo POST non possono essere contrassegnate.

Per le password o i nomi utente riservati, i numeri di carta di credito o altre informazioni riservate, il metodo POST può risultare più sicuro del metodo GET. Tuttavia, le informazioni inviate dal metodo POST non sono cifrate e potrebbero essere facilmente intercettate da un hacker. Per garantire la sicurezza, utilizzate una connessione protetta a un server protetto.

e.(Opzionale) Nel menu a comparsa Tipo di codifica, specificate il tipo di codifica dei dati inviati al server per l'elaborazione.

L'impostazione predefinita di application/x-www-form-urlencode viene in genere utilizzata insieme al metodo POST. Se state creando un campo di caricamento file, specificate il tipo MIME multipart/form-data.

f.(Opzionale) Nel menu a comparsa Destinazione, specificate la finestra in cui visualizzare i dati restituiti dal programma richiamato.

Se la finestra con il nome non è già aperta, si apre una nuova finestra con quel nome. Impostate i seguenti valori di destinazione:

_blank Apre il documento di destinazione in una nuova finestra senza nome.

_parent Apre il documento di destinazione nella finestra superiore a quella in cui è visualizzato il documento corrente.

_self Apre il documento di destinazione nella stessa finestra in cui è stato inviato il modulo.

_top Apre il documento di destinazione nel corpo della finestra corrente. Questo valore può essere utilizzato per essere certi che il documento di destinazione occupi l'intera finestra anche se il documento originale era visualizzato in un frame.

Inserite oggetti modulo nella pagina:

a.Posizionate il punto di inserimento dove desiderate che venga visualizzato l'oggetto modulo all'interno del modulo.

B.Selezionate l'oggetto nel menu Inserisci > Modulo oppure nella categoria Moduli del pannello Inserisci.

c.Compilate la finestra di dialogo Attributi di accessibilità tag Input. Per ulteriori informazioni, fate clic sul pulsante Aiuto nella finestra di dialogo.

d.Impostate le proprietà degli oggetti.

e.Inserite un nome per l'oggetto nella finestra di ispezione Proprietà.

Ogni campo di testo, campo nascosto, casella di controllo e oggetto elenco/menu deve avere un nome univoco che identifichi l'oggetto nel modulo. I nomi degli oggetti modulo non possono contenere spazi o caratteri speciali. Potete utilizzare qualunque combinazione di caratteri alfanumerici e un carattere di sottolineatura (_). Tenete presente che l'etichetta assegnata all'oggetto rappresenta il nome della variabile che memorizzerà il valore del campo, ovvero i dati immessi. Questo è il valore inviato al server per l'elaborazione.

f.Per associare un'etichetta a un oggetto campo di testo, casella di controllo o pulsante di scelta nella pagina, fate clic accanto all'oggetto e digitate il testo dell'etichetta.

La struttura di un modulo può essere creata con interruzioni di riga, di paragrafo, testo preformattato o tabelle. Non è possibile inserire un modulo in un altro modulo (ovvero, non è possibile sovrapporre i tag), anche se una pagina può contenere più moduli.

Durante la creazione dei moduli, è importante applicare ai campi delle etichette con testo descrittivo per indicare agli utenti le richieste a cui devono rispondere, ad esempio: “Digitare il proprio nome” per richiedere informazioni sul nome.

Le tabelle forniscono la struttura per gli oggetti modulo e le etichette dei campi. Quando inserite delle tabelle in un modulo, assicuratevi che tutti i tag table siano compresi tra i tag form.

Specifica il nome di un oggetto campo file.

Definisce il numero massimo di caratteri che possono essere visualizzati nel campo.

Specifica il numero massimo di caratteri che dovrà contenere il campo. Se l'utente individua il file e lo seleziona, il nome e il percorso del file possono superare il valore specificato per Caratt massimi. Se invece l'utente tenta di inserire il nome e il percorso del file manualmente, il campo di file ammette solo il numero di caratteri specificato per Caratt massimi.

Viene visualizzata la finestra di dialogo Seleziona file di origine immagine.

Specifica il nome del pulsante. Invia e Ripristina, i due nomi riservati, consentono rispettivamente di inviare i dati del modulo all'applicazione o allo script che ne eseguirà l'elaborazione o di ripristinare i valori originali per tutti i campi del modulo.

Specifica l'immagine da utilizzare per il pulsante.

Consente di inserire un testo descrittivo nel caso in cui non sia possibile caricare l'immagine nel browser.

Imposta l'attributo di allineamento dell'oggetto.

Avvia l'editor di immagini predefinito e apre il file di immagine per la modifica.

Consente di applicare le regole CSS all'oggetto.

Selezionate Inserisci > Modulo > Gruppo pulsanti di scelta.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

a.Nella casella Nome, inserite un nome per il gruppo di pulsanti di scelta.

 Se i pulsanti di scelta sono impostati per inviare i parametri al server, i parametri sono associati al nome. Ad esempio, se al gruppo assegnate il nome myGroup e viene impostato il metodo GET, ovvero il modulo deve trasmettere i parametri URL invece dei parametri del modulo quando l'utente fa clic sul pulsante di invio, l'espressione myGroup="CheckedValue" viene passata nell'URL al server.

b.Fate clic sul pulsante più (+) per aggiungere un pulsante di scelta al gruppo. Inserite un'etichetta e un valore selezionato per il nuovo pulsante.

c.Utilizzate la freccia su e la freccia giù per riordinare i pulsanti.

d.Se desiderate che venga selezionato un determinato pulsante di scelta quando la pagina viene aperta in un browser, inserite un valore uguale a quello del pulsante di scelta nella casella Seleziona valore uguale a.

Inserite un valore statico oppure specificatene uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un recordset contenente i possibili valori selezionati. In entrambi i casi, il valore specificato deve corrispondere al valore selezionato di uno dei pulsanti di scelta del gruppo. Per visualizzare i valori selezionati dei pulsanti di scelta, selezionate ogni pulsante e aprite la relativa finestra di ispezione Proprietà (Finestra > Proprietà).

e.Selezionate il formato di layout dei pulsanti di Dreamweaver. I pulsanti possono essere disposti utilizzando le interruzioni di riga o una tabella. Se selezionate la disposizione in tabella, Dreamweaver crea una tabella a una sola colonna con i pulsanti di scelta a sinistra e le etichette a destra.

Potete anche impostare le proprietà utilizzando la finestra di ispezione Proprietà o direttamente nella vista Codice.

Selezionate Inserisci > Modulo > Gruppo caselle di controllo.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

a.Nella casella Nome, inserite un nome per il gruppo di caselle di controllo.

Se le caselle di controllo sono impostate per inviare i parametri al server, i parametri sono associati al nome. Ad esempio, se al gruppo assegnate il nome myGroup e viene impostato il metodo GET, ovvero il modulo deve trasmettere i parametri URL invece dei parametri del modulo quando l'utente fa clic sul pulsante di invio, l'espressione myGroup="CheckedValue" viene passata nell'URL al server.

b.Fate clic sul pulsante più (+) per aggiungere una casella di controllo al gruppo. Inserite un'etichetta e un valore selezionato per la nuova casella di controllo.

c.Utilizzate le frecce su e giù per riordinare le caselle di controllo.

d.Se desiderate che venga selezionata una determinata casella di controllo quando aprite la pagina in un browser, inserite un valore uguale a quello della casella di controllo nella casella Seleziona valore uguale a.

Inserite un valore statico oppure specificatene uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un recordset contenente i possibili valori selezionati. In entrambi i casi, il valore specificato deve corrispondere al valore selezionato di una delle caselle di controllo del gruppo. Per visualizzare i valori selezionati delle caselle di controllo, selezionate ogni casella di controllo e aprite la relativa finestra di ispezione Proprietà (Finestra > Proprietà).

e.Selezionate il formato di layout delle caselle di controllo di Dreamweaver.

Potete disporre le caselle di controllo utilizzando interruzioni di riga o una tabella. Se selezionate la disposizione in tabella, Dreamweaver crea una tabella a una sola colonna con le caselle di controllo a sinistra e le etichette a destra.

Potete anche impostare le proprietà utilizzando la finestra di ispezione Proprietà o direttamente nella vista Codice.

Inserite un oggetto modulo Elenco/Menu HTML nella pagina:

    a.Fate clic all'interno del modulo HTML nella pagina (Inserisci > Modulo > Modulo).

    b.Selezionate Inserisci > Modulo > Elenco/Menu per inserire l'oggetto modulo.

Effettuate una delle operazioni seguenti:

• Selezionate un oggetto modulo Elenco/Menu HTML nuovo o esistente, quindi fate clic sul pulsante Dinamico nella finestra di ispezione Proprietà.

• Selezionate Inserisci > Oggetti dati > Dati dinamici > Elenco a selezione dinamica.

Impostate le opzioni della finestra di dialogo e fate clic su OK.

  a.Nel menu a comparsa Opzioni dal recordset, selezionate il recordset da utilizzare come origine di contenuto. Questo menu consente anche di modificare in un momento successivo le voci di elenco/menu statiche e dinamiche.

  b.Il campo Opzioni statiche consente di inserire una voce predefinita nell'elenco o nel menu. Questa parte della finestra di dialogo permette anche di modificare le opzioni statiche di un oggetto modulo elenco/menu dopo l'aggiunta di contenuto dinamico.

  c.(Opzionale) Utilizzate i pulsanti più (+) e meno (-) per aggiungere ed eliminare le voci dell'elenco. Le voci vengono visualizzate nell'ordine in cui appaiono nella finestra di dialogo Elenco valori. La prima voce dell'elenco è la voce che viene selezionata quando la pagina viene caricata in un browser. Per modificare la disposizione delle voci all'interno dell'elenco, utilizzate la freccia su e la freccia giù.

  d.Nel menu a comparsa Valori, selezionate il campo che contiene i valori delle voci di menu.

  e.Nel menu a comparsa Etichette, selezionate il campo che contiene le etichette per le voci di menu.

  f.(Opzionale) Se desiderate che venga selezionata una determinata voce di menu quando la pagina viene aperta in un browser o quando un record viene visualizzato nel modulo, inserite un valore uguale a quello della voce di menu nella casella Seleziona valore uguale a.

    Potete inserire un valore statico oppure specificarne uno dinamico facendo clic sull'icona del fulmine presente accanto alla casella e selezionando un valore dinamico dall'elenco delle origini dati. In entrambi i casi, il valore specificato deve corrispondere a uno dei valori delle voci di menu.

L'origine dati deve contenere le informazioni testuali. Se l'elenco non contiene delle origini dati o se le origini dati disponibili non soddisfano le vostre esigenze, fate clic sul pulsante più (+) per definirne una nuova.

• Fate clic sull'icona del fulmine presente accanto alla casella Selezionata se e scegliete il campo dall'elenco delle origini dati.

  L'origine dati deve contenere dati booleani, quali Yes e No o true e false. Se l'elenco non contiene delle origini dati o se le origini dati disponibili non soddisfano le vostre esigenze, fate clic sul pulsante più (+) per definirne una nuova.

• Nella casella Uguale a, inserite il valore che deve essere contenuto nel campo per visualizzare la casella di controllo selezionata.

  Ad esempio, per fare apparire la casella di controllo come selezionata quando il valore di un campo specifico di un record è Yes, inserite Yes nella casella Uguale a.

La casella Valori pulsanti di scelta visualizza i valori di tutti i pulsanti di scelta del gruppo.

Il recordset selezionato contiene valori corrispondenti ai valori selezionati dei pulsanti di scelta. Per visualizzare i valori selezionati dei pulsanti di scelta, selezionate ogni pulsante e aprite la relativa finestra di ispezione Proprietà (Finestra > Proprietà).

Inserite i dati desiderati nella finestra di dialogo Dati dinamici e fate clic su OK.

  a.Selezionate un'origine dati dal relativo elenco.

  b.Opzionale) Selezionate un formato di dati per il testo.

  c.(Opzionale) Modificate il codice che Dreamweaver inserisce nella pagina per visualizzare il testo dinamico.

Accertatevi che i nomi dei campi da convalidare siano univoci.

Ad esempio, potete specificare che il campo di testo relativo all'età delle persone accetti solo valori numerici.

Ad esempio, potete inserire il nome di una funzione che non esiste ancora, quale ad esempio processMyForm().

Ad esempio, definite la funzione JavaScript seguente nella sezione head del documento per visualizzare un messaggio quando l'utente fa clic sul pulsante Invia:

Questa operazione deve essere eseguita una sola volta.

Viene visualizzata la finestra di dialogo Attributi di accessibilità tag Input.

Assegna un ID al campo di modulo. Questo valore può essere utilizzato per fare riferimento al campo da JavaScript; viene anche utilizzato come valore dell'attributo for se selezionate l'opzione "Associa tag Label utilizzando l'attributo for" nelle opzioni Stile.

Racchiude l'oggetto del modulo tra tag Label nel modo seguente:

Utilizza l'attributo for per racchiudere l'oggetto del modulo tra tag Label nel modo seguente:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

Con questa procedura, il browser riproduce il testo associato a una casella di controllo e a un pulsante di scelta attivato mediante un'area rettangolare e consente all'utente di selezionare la casella di controllo o il pulsante di scelta facendo clic in qualsiasi punto del testo associato senza ricorrere al relativo controllo.

Nota: si tratta dell'opzione di accessibilità consigliata; tuttavia, la funzionalità dipende dal browser utilizzato..

Non utilizza alcun tag Label, come illustrato di seguito:

Utilizza un equivalente da tastiera (una lettera) e il tasto Alt (Windows) o Control (Macintosh) per selezionare l'oggetto modulo nel browser. Ad esempio, se inserite B come Chiave di accesso, gli utenti che utilizzano un browser Macintosh potrebbero digitare Ctrl+B per selezionare l'oggetto modulo.

Specifica l'ordine di tabulazione degli oggetti modulo. Se impostate l'ordine di tabulazione per un oggetto, dovete impostarne uno per ciascun oggetto.

L'impostazione dell'ordine delle tabulazioni risulta utile quando la pagina contiene più collegamenti e oggetti modulo che consentono all'utente di utilizzare il tasto Tab per passare da un oggetto all'altro secondo un ordine preciso.

L'oggetto modulo viene visualizzato nel documento.

• Modificate gli attributi appropriati nella vista Codice.

• Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh), quindi selezionate Modifica tag.