Nota:

Il supporto per gli elementi modulo HTML è stato migliorato negli aggiornamenti di Dreamweaver Creative Cloud. Per informazioni, consultate Supporto HTML5 avanzato per gli elementi modulo.

Moduli web

Quando un visitatore inserisce le informazioni in un modulo Web visualizzato in un browser e fa clic sul pulsante di invio, le informazioni vengono inviate a un server ed elaborate da uno script server-side o da un'applicazione. Il server risponde restituendo le informazioni elaborate all'utente (o client) o eseguendo altre azioni in base al contenuto del modulo.

Potete creare moduli che inviano dati alla maggior parte dei server applicazioni, compresi PHP, ASP e ColdFusion. Se utilizzate ColdFusion, potete anche includere nei moduli controlli modulo ColdFusion specifici.

Nota:

potete anche inviare i dati del modulo direttamente a un destinatario di posta elettronica.

Oggetti modulo

In Dreamweaver, i tipi di input modulo sono denominati oggetti modulo. Gli oggetti dei moduli sono i meccanismi che consentono agli utenti di inserire i dati. A un modulo è possibile aggiungere i seguenti oggetti modulo:

Campi di testo

Accettano caratteri alfabetici e numerici. Il testo può essere visualizzato su una sola riga, su più righe e come campo di password in cui il testo immesso viene sostituito da asterischi o da punti per nasconderlo agli altri utenti.

Oggetti modulo

Nota:

le password e le altre informazioni inviate a un server utilizzando un campo di password non sono cifrate. I dati trasferiti possono essere intercettati e letti come testo alfanumerico. Per questa ragione, dovete sempre crittografare i dati che desiderate mantenere protetti.

Campi nascosti

Consentono di memorizzare le informazioni inserite dall'utente, come il nome, l'indirizzo e-mail o le preferenze di visualizzazione e di utilizzarle quando l'utente visita nuovamente il sito.

Pulsanti

Quando vengono selezionati, eseguono l'azione ad essi associata. Potete specificare un'etichetta personalizzata o utilizzare una delle etichette predefinite: Invia o Ripristina. Utilizzate un pulsante per inviare i dati del modulo al server o per ripristinare il modulo. Potete anche assegnare altre attività di elaborazione definite in uno script. Ad esempio, potete impostare un pulsante per calcolare il costo totale degli elementi selezionati in base ai valori assegnati.

Caselle di controllo

Consentono di selezionare più risposte per lo stesso gruppo di opzioni. Potete aggiungere tutte le opzioni che desiderate. L'esempio seguente mostra tre elementi caselle di controllo selezionati: Surfing, Mountain Biking e Rafting.

Caselle di controllo

Pulsanti di scelta

Rappresentano scelte esclusive. Quando si seleziona un pulsante all'interno di un gruppo, tutti gli altri vengono disattivati (un gruppo è composto da due o più pulsanti che condividono lo stesso nome). Nell'esempio che segue, Rafting è l'opzione selezionata. Se l'utente fa clic su Surfing, il pulsante Rafting viene automaticamente deselezionato.

Pulsanti di scelta

Elenco menu

Visualizzano i valori delle opzioni in un elenco a scorrimento che accetta più scelte. L'opzione Elenco visualizza i valori in un menu a comparsa che consente all'utente di eseguire una sola scelta. Utilizzate i menu quando disponete di uno spazio limitato ma avete bisogno di visualizzare diverse opzioni, oppure per controllare i valori restituiti al server. Diversamente dai campi di testo in cui gli utenti possono digitare qualsiasi informazione, anche dati non validi, nei menu modulo è necessario impostare i valori esatti che devono essere restituiti da un menu.

Nota:

il menu a comparsa di un modulo HTML non è uguale al menu grafico a comparsa. Per informazioni su come creare, visualizzare e nascondere un menu grafico a comparsa, consultate il collegamento alla fine di questa sezione.

Menu di collegamento

Elenchi o menu a comparsa di navigazione che consentono di inserire un menu in cui ogni opzione rimanda a un documento o un file specifico.

Campi di file

Consentono di individuare i file desiderati sul computer e di caricarli come dati del modulo.

Campi di immagine

Consentono di inserire immagini nel modulo. I campi di immagine possono essere utilizzati per realizzare pulsanti grafici, ad esempio i pulsanti Invio o Ripristina. Per poter utilizzare un'immagine a scopi diversi dall'invio di dati, è necessario associare un comportamento all'oggetto modulo.

Creare un modulo HTML

(Solo per gli utenti di Creative Cloud) Nell'ambito del supporto HTML5 sono stati aggiunti nuovi attributi al pannello Proprietà per gli elementi modulo. Inoltre, quattro nuovi elementi modulo (e-mail, ricerca, telefono, URL) sono stati inseriti nella sezione Moduli del pannello Inserisci. Per ulteriori informazioni, consultate Supporto HTML5 avanzato per gli elementi modulo.

  1. Aprite una pagina e posizionate il punto di inserimento dove desiderate che venga visualizzato il modulo.
  2. Selezionate Inserisci > Modulo o scegliete la categoria Moduli nel pannello Inserisci e fate clic sull'icona Modulo.

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

  3. 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.

  4. 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.

    Nota:

    se la finestra di dialogo Attributi di accessibilità tag Input non è visualizzata, è possibile che il punto di inserimento si trovasse nella vista Codice quando avete tentato di inserire l'oggetto modulo. Assicuratevi che il punto di inserimento sia nella vista Progettazione, quindi riprovate. Per ulteriori informazioni su questo argomento, consultate l'articolo di David Powers Creating HTML forms in Dreamweaver (Creazione di moduli in Dreamweaver).

    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.

    Nota:

    Tutti i pulsanti di scelta di un gruppo devono avere lo stesso nome.

    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.

  5. Modificate il layout del modulo.

    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.

Per un'esercitazione sulla creazione dei moduli, consultate www.adobe.com/go/vid0160_it.

Per un'esercitazione sulla gestione degli stili con CSS, consultate www.adobe.com/go/vid0161_it.

Proprietà di un oggetto Campo di testo

Selezionate l'oggetto campo di testo e impostate le opzioni seguenti nella finestra di ispezione Proprietà:

Larghezza caratteri

Definisce il numero massimo di caratteri che possono essere visualizzati nel campo. Questo valore può essere inferiore a quello del campo Caratt massimi, che specifica il numero massimo di caratteri che il campo può contenere. Ad esempio, se Largh caratt è impostato su 20 (il valore predefinito) e l'utente inserisce 100 caratteri, solo 20 di questi caratteri saranno visualizzabili nel campo di testo. Anche se i caratteri non vengono visualizzati, vengono riconosciuti dall'oggetto campo e vengono inviati al server per l'elaborazione.

Caratt massimi

Definisce il numero massimo di caratteri che possono essere immessi nei campi a riga singola. Specificando il numero massimo di caratteri potete limitare la lunghezza dei codici postali a 5 cifre, quella delle password a 10 caratteri e così via. Se nella casella Caratt massimi non inserite alcun valore, gli utenti possono inserire il testo senza limiti di lunghezza. Se il testo inserito dall'utente supera la larghezza caratteri del campo, il testo scorre. Se l'utente supera il numero massimo di caratteri consentiti, viene emesso un segnale acustico.

N. di righe

Definisce l'altezza dei campi a più righe, disponibile se è selezionata l'opzione Multiriga.

Disabilitato

Disabilita l'area di testo.

Sola lettura

Imposta l'area di testo come area di sola lettura.

Tipo

Indica il tipo di campo (Riga singola, Più righe o Password).

Riga singola

Applica un tag input con l'attributo type impostato su text. L'impostazione Largh caratt viene mappata sull'attributo size e l'impostazione Caratt massimi viene mappata sull'attributo maxlength.

Multiriga

Applica un tag textarea. L'impostazione Largh caratt viene mappata sull'attributo cols e l'impostazione N. di righe viene mappata sull'attributo rows.

Password

Applica un tag input con l'attributo type impostato su password. Le impostazioni Largh caratt e Caratt massimi vengono mappate sugli stessi attributi dei campi a riga singola. Le informazioni inserite nei campi di password vengono visualizzate sotto forma di punti o asterischi per tutelare la riservatezza.

Val iniz

Indica il valore visualizzato nel campo quando si carica il modulo per la prima volta. Ad esempio, si potrebbe indicare che l'utente deve inserire le informazioni nel campo includendo una nota o un valore di esempio.

Classe

Consente di applicare le regole CSS all'oggetto.

Opzioni di un oggetto pulsante

Nome del pulsante

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.

Valore

Specifica il testo che appare sul pulsante.

Azione

Indica l'azione che viene eseguita quando l'utente fa clic sul pulsante.

Invia modulo

Invia i dati del modulo per l'elaborazione quando l'utente fa clic sul pulsante. I dati vengono inviati alla pagina o allo script specificato nella proprietà Azione del modulo.

Reimposta modulo

Cancella il contenuto del modulo quando viene fatto clic sul pulsante.

Nessuno

Specifica l'azione da eseguire quando viene fatto clic sul pulsante. Ad esempio, potete aggiungere un comportamento JavaScript che apre un'altra pagina quando l'utente fa clic sul pulsante.

Classe

Applica le regole CSS all'oggetto.

Opzioni di un oggetto Casella di controllo

Valore selezionato

Imposta il valore da inviare al server quando viene selezionata la casella di controllo. Ad esempio, in un sondaggio potete impostare un valore pari a 4 per opinioni estremamente favorevoli e un valore pari a 1 per opinioni estremamente contrarie.

Stato iniziale

Determina se la casella di controllo è selezionata o meno quando il modulo viene caricato nel browser.

Dinamico

Lascia che sia il server a determinare in modo dinamico lo stato iniziale della casella di controllo. Ad esempio, potete utilizzare le caselle di controllo per presentare visivamente le informazioni Sì/No memorizzate in un record di database. Nella fase di progettazione, queste informazioni non sono disponibili. In fase di runtime, il server legge il record di database e seleziona la casella di controllo se il valore è Sì.

Classe

Applica le regole CSS (Cascading Style Sheets) all'oggetto.

Opzioni di un oggetto pulsante di scelta singolo

Valore selezionato

Imposta il valore da inviare al server quando viene selezionato il pulsante di scelta. Ad esempio, nella casella Valore selezionato potete digitare sci per indicare che l'utente ha selezionato l'opzione “sci”.

Stato iniziale

Determina se il pulsante di scelta è selezionato o meno quando il modulo viene caricato nel browser.

Dinamico

Lascia che sia il server a determinare in modo dinamico lo stato iniziale del pulsante di scelta. Ad esempio, potete utilizzare i pulsanti di scelta per presentare visivamente le informazioni memorizzate in un record di database. Nella fase di progettazione, queste informazioni non sono disponibili. In fase di runtime il server legge il record di database e seleziona il pulsante di scelta se il valore corrisponde a quello specificato.

Classe

Applica le regole CSS all'oggetto.

Elenco/menu

Specifica il nome del menu. Il nome deve essere univoco.

Tipo

Indica se il menu deve essere visualizzato quando selezionato (opzione Menu) o visualizzato come elenco di voci (opzione Elenco). Selezionate l'opzione Menu affinché sia disponibile una sola opzione quando il modulo viene visualizzato in un browser. Per visualizzare le altre opzioni, l'utente deve utilizzare la freccia giù.

Selezionate l'opzione Elenco per elencare alcune o tutte le opzioni quando il modulo viene visualizzato in un browser e per consentire la selezione di più voci.

Altezza

(solo Tipo di elenco) Imposta il numero di voci visualizzate in un menu.

Selezioni

(solo Tipo di elenco) Indica se l'utente può selezionare più voci dall'elenco.

Elenco valori

Apre una finestra di dialogo che consente di aggiungere voci al menu:

  1. Utilizzate i pulsanti più (+) e meno (-) per aggiungere ed eliminare le voci dell'elenco.

  2. Inserite il testo dell'etichetta e un valore opzionale per ciascuna voce di menu.

    Ogni voce dell'elenco dispone di una propria etichetta, ovvero il testo che viene visualizzato nell'elenco e un valore che viene inviato all'applicazione di elaborazione quando si seleziona la voce. Se non viene specificato alcun valore, all'applicazione di elaborazione viene inviata l'etichetta.

  3. Per modificare la disposizione delle voci all'interno dell'elenco, utilizzate la freccia su e la freccia giù.

    Le voci vengono visualizzate nel menu nello stesso ordine con il quale sono riportate nella finestra di dialogo Elenco valori. La prima voce dell'elenco è la voce che viene selezionata quando la pagina viene caricata in un browser.

Dinamico

Consente al server di selezionare in modo dinamico una voce dal menu quando viene visualizzato per la prima volta.

Classe

Consente di applicare le regole CSS all'oggetto.

Selezione iniziale

Per impostazione predefinita, imposta le voci selezionate nell'elenco. Fate clic sulla voce o sulle voci nell'elenco.

Inserire campi di caricamento file

Potete creare un campo di caricamento file che consenta agli utenti di selezionare un file sul computer, ad esempio un file di elaborazione testo o un file grafico e di caricarlo sul server. I campi di file hanno lo stesso aspetto degli altri campi di testo, con l'aggiunta di un pulsante Sfoglia. L'utente inserisce manualmente il percorso del file che desidera caricare oppure lo individua e lo seleziona mediante il pulsante Sfoglia.

Per poter utilizzare i campi di caricamento file, dovete disporre di uno script server-side o di una pagina in grado di gestire l'invio di file. Consultate la documentazione relativa alla tecnologia server utilizzata per elaborare i dati dei moduli. Ad esempio, se utilizzate PHP, consultate “Handling files uploads” (Gestione degli upload dei file) nel Manuale PHP online, all'indirizzo http://us2.php.net/features.file-upload.php.

I campi di file richiedono l'utilizzo del metodo POST per trasmettere i file dal browser al server. Il file viene inviato all'indirizzo impostato nella casella Azione del modulo.

Nota:

prima di utilizzare un campo di file, chiedere all'amministratore del server se il caricamento anonimo dei file è consentito.

  1. Inserite un modulo nella pagina (Inserisci > Modulo).
  2. Selezionate il modulo per visualizzare la relativa finestra di ispezione Proprietà.
  3. Impostate il metodo del modulo a POST.
  4. Dal menu a comparsa Tipo di codifica, selezionate multipart/form-data.
  5. Nella casella Azione, specificate lo script server-side o la pagina in grado di gestire il file inviato.
  6. Posizionate il punto di inserimento all'interno del bordo del modulo e selezionate Inserisci > Modulo > Campo di file.
  7. Impostate le seguenti opzioni nella finestra di ispezione Proprietà:

    Nome campo file

    Specifica il nome di un oggetto campo file.

    Larghezza caratteri

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

    Caratt massimi

    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.

Inserire un pulsante di immagine

Potete utilizzare le immagini come icone dei pulsanti. Per poter utilizzare un'immagine a scopi diversi dall'invio di dati, è necessario associare un comportamento all'oggetto modulo.

  1. Nel documento, posizionate il cursore all'interno del bordo del modulo.
  2. Selezionate Inserisci > Modulo > Campo di immagine.

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

  3. Selezionate l'immagine per il pulsante nella finestra di dialogo Seleziona file di origine immagine e fate clic su OK.
  4. Impostate le seguenti opzioni nella finestra di ispezione Proprietà:

    CampoImg

    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.

    Orig.

    Specifica l'immagine da utilizzare per il pulsante.

    Altern.

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

    Allinea

    Imposta l'attributo di allineamento dell'oggetto.

    Modifica immagine

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

    Classe

    Consente di applicare le regole CSS all'oggetto.

  5. Per associare al pulsante un comportamento JavaScript, selezionate l'immagine e scegliete il comportamento nel pannello Comportamenti (Finestra > Comportamenti).

Opzioni di un oggetto campo nascosto

HiddenField

Specifica il nome di un campo.

Valore

Specifica il valore del campo. Questo valore viene passato al server quando il modulo viene inviato.

Inserire un gruppo di pulsanti di scelta

  1. Posizionate il cursore all'interno del bordo del modulo.
  2. Selezionate Inserisci > Modulo > Gruppo pulsanti di scelta.

  3. 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.

Inserire un gruppo di caselle di controllo

  1. Posizionate il cursore all'interno del bordo del modulo.
  2. Selezionate Inserisci > Modulo > Gruppo caselle di controllo.

  3. 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.

Informazioni sugli oggetti modulo dinamici

Un oggetto modulo dinamico è un oggetto modulo il cui stato iniziale è determinato dal server al momento della richiesta della pagina dal server e non dal progettista al momento della creazione del modulo. Ad esempio, quando un utente richiede una pagina PHP contenente un modulo con un menu, uno script PHP nella pagina compila automaticamente il menu con i valori archiviati in un database. Il server quindi invia la pagina completata al browser dell'utente.

Rendere dinamici gli oggetti modulo può semplificare la manutenzione del sito. Ad esempio, molti siti utilizzano i menu per presentare le opzioni agli utenti. Se il menu è di tipo dinamico, potete aggiungere, rimuovere o cambiare le voci di menu in un solo punto, ovvero nella tabella di database in cui sono archiviate tali voci; ciò consente di aggiornare tutte le ricorrenze dello stesso menu nell'intero sito.

Inserire o modificare un menu modulo HTML dinamico

Potete inserire in modo dinamico le voci di un database in un menu elenco o menu modulo HTML. Per la maggior parte delle pagine, potete utilizzare un oggetto menu HTML.

Prima di iniziare, dovete inserire il modulo HTML in una pagina ColdFusion, PHP o ASP e definire un recordset o un'altra origine di contenuto dinamico per il menu.

  1. 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.

  2. 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.

  3. 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.

     

Rendere dinamici i menu modulo HTML esistenti

  1. Nella vista Progettazione, selezionate l'oggetto modulo elenco/menu.
  2. Nella finestra di ispezione Proprietà, fate clic sul pulsante Dinamico.
  3. Impostate le opzioni della finestra di dialogo e fate clic su OK.

Visualizzare contenuto dinamico nei campi di testo HTML

Potete visualizzare il contenuto dinamico nei campi di testo HTML quando il modulo viene aperto in un browser.

Prima di iniziare, dovete creare il modulo in una pagina ColdFusion, PHP o ASP e definire un recordset o un'altra origine di contenuto dinamico per il campo di testo.

  1. Selezionate il campo di testo nel modulo HTML della pagina.
  2. Nella finestra di ispezione Proprietà, fate clic sull'icona del fulmine accanto alla casella Val iniz per visualizzare la finestra di dialogo Dati dinamici.
  3. Selezionate la colonna del recordset che deve fornire un valore al campo di testo e quindi fate clic su OK.

Opzioni della finestra di dialogo Campo di testo dinamico

  1. Selezionate il campo di testo da rendere dinamico nel menu a comparsa Campo testo.
  2. Fate clic sull'icona del fulmine presente accanto alla casella Imposta valore a e selezionate un'origine dati dal relativo elenco, quindi fate clic su OK.

    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.

Preselezionare dinamicamente una casella di controllo HTML

Potete lasciare che sia il server a decidere se selezionare una casella di controllo quando il modulo viene visualizzato in un browser.

Prima di iniziare, dovete creare il modulo in una pagina ColdFusion, PHP o ASP e definire un recordset o un'altra origine di contenuto dinamico per le caselle di controllo. L'ideale sarebbe che l'origine del contenuto contenesse dati booleani, ad esempio Yes/No o true/false.

  1. Selezionate un oggetto modulo casella di controllo nella pagina.
  2. Nella finestra di ispezione Proprietà, fate clic sul pulsante Dinamico.
  3. Inserite i dati desiderati nella finestra di dialogo Casella di controllo dinamica e fate clic su OK.
    • 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.

    Nota:

    questo valore viene restituito al server anche se l'utente fa clic sul pulsante Invia del modulo.

Preselezionare dinamicamente un pulsante di scelta HTML

Potete preselezionare dinamicamente un pulsante di scelta HTML quando un record viene visualizzato nel modulo HTML in un browser.

Prima di iniziare, dovete creare il modulo in una pagina ColdFusion, PHP o ASP e inserire almeno un gruppo di pulsanti di scelta HTML (selezionando Inserisci > Modulo > Gruppo pulsanti di scelta). Dovete definire anche un recordset oppure un'altra origine del contenuto dinamico per i pulsanti di scelta. L'ideale sarebbe che l'origine del contenuto contenesse dati booleani, ad esempio Yes/No o true/false.

  1. Nella vista Progettazione, selezionate un pulsante di scelta nel gruppo.
  2. Nella finestra di ispezione Proprietà, fate clic sul pulsante Dinamico.
  3. Inserite i dati desiderati nella finestra di dialogo Gruppo pulsanti di scelta dinamico e fate clic su OK.

Opzioni della finestra di dialogo Gruppo pulsanti di scelta dinamico

  1. Nel menu a comparsa Gruppo pulsanti di scelta, selezionate un modulo e un gruppo di pulsanti di scelta presenti nella pagina.

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

  2. Selezionate il valore da preselezionare in modo dinamico dall'elenco dei valori. Questo valore viene visualizzato nella casella Valore.
  3. Fate clic sull'icona del fulmine accanto alla casella Seleziona valore uguale a e selezionate un recordset contenente i possibili valori selezionati per 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à).

  4. Fate clic su OK.

Opzioni della finestra di dialogo Gruppo pulsanti di scelta dinamico (ColdFusion)

  1. Selezionate un gruppo di pulsanti di scelta e un formato dal menu a comparsa Gruppo pulsanti di scelta.
  2. Fate clic sull'icona del fulmine accanto alla casella Seleziona valore uguale a.
  3. 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.

  4. Fate clic su OK per chiudere la finestra di dialogo Gruppo pulsanti di scelta dinamico e inserite il segnaposto del contenuto dinamico nel gruppo di pulsanti di scelta.

Convalidare i dati di un modulo HTML

Dreamweaver può aggiungere codice JavaScript che controlla il contenuto dei campi di testo specificati per verificare che l'utente abbia immesso dati validi.

I widget di moduli Spry possono essere impiegati per creare i propri moduli e convalidare i contenuti di specifici elementi modulo. Per ulteriori informazioni, consultate l'argomento Spry che segue.

In Dreamweaver potete inoltre creare moduli ColdFusion che convalidano il contenuto di campi specifici. Per ulteriori informazioni, consultate il capitolo ColdFusion che segue.

  1. Create un modulo HTML che include almeno un campo di testo e un pulsante Invio.

    Accertatevi che i nomi dei campi da convalidare siano univoci.

  2. Selezionate il pulsante Invio.
  3. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante più (+) e selezionate il comportamento Convalida modulo dall'elenco.
  4. Impostate le regole di convalida per ciascun campo di testo e fate clic su OK.

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

    Nota:

    il comportamento Convalida modulo è disponibile solo se nel documento è stato inserito un campo di testo.

Associare comportamenti JavaScript agli oggetti modulo HTML

Potete associare i comportamenti JavaScript memorizzati in Dreamweaver agli oggetti modulo HTML, ad esempio ai pulsanti.

  1. Selezionate l'oggetto modulo HTML.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante più (+) e selezionate un comportamento dall'elenco.

Associare script personalizzati ai pulsanti modulo HTML

Alcuni moduli utilizzano JavaScript o VBScript per eseguire l'elaborazione o alcuni tipi di altre azioni sul client anziché inviare i dati al server. Potete utilizzare Dreamweaver per configurare un pulsante modulo per eseguire uno script sul client quando l'utente fa clic sul pulsante.

  1. Selezionate un pulsante Invia in un modulo.
  2. Nel pannello Comportamenti (Finestra > Comportamenti), fate clic sul pulsante più (+) e selezionate Chiama JavaScript dall'elenco.
  3. Nella casella Chiama JavaScript, inserite il nome della funzione JavaScript che deve essere eseguita quando l'utente fa clic sul pulsante, quindi fate clic su OK.

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

  4. Se la funzione JavaScript non è ancora presente nella sezione head del documento, aggiungetela ora.

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

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

Creare moduli HTML accessibili

Quando inserite un oggetto modulo HTML, potete renderlo accessibile e modificare gli attributi di accessibilità in seguito.

Aggiungere un oggetto modulo accessibile

  1. La prima volta che aggiungete oggetti modulo accessibili, attivate la finestra di dialogo Accessibilità per gli oggetti modulo (consultate Ottimizzazione dell'area di lavoro per lo sviluppo visivo).

    Questa operazione deve essere eseguita una sola volta.

  2. Nel documento, collocate il punto di inserimento nel punto in cui desiderate visualizzare l'oggetto modulo.
  3. Selezionate Inserisci > Modulo, quindi scegliete un oggetto modulo da inserire.

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

  4. Impostate le opzioni della finestra di dialogo e fate clic su OK. Di seguito è riportato un elenco parziale delle opzioni:

    Nota:

    lo screen reader legge il nome inserito come attributo Etichetta dell'oggetto.

    ID

    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.

    Racchiudi tra tag Label

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

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    Associare tag Label utilizzando l'attributo for

    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..

    Nessun tag Label

    Non utilizza alcun tag Label, come illustrato di seguito:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Chiave di accesso

    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.

    Indice tabulazione

    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.

  5. Fate clic su Sì per inserire un tag di modulo.

    L'oggetto modulo viene visualizzato nel documento.

    Nota:

    se fate clic su Annulla, l'oggetto modulo viene visualizzato nel documento ma Dreamweaver non associa i relativi tag e attributi di accessibilità.

Modificare i valori di accessibilità di un oggetto modulo

  1. Selezionate l'oggetto modulo nella finestra del documento.
  2. Effettuate una delle operazioni seguenti:
    • 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online