Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Forms - Creazione Moduli

Creazione moduli - inserimento dei vari campi - campi speciali - opzioni aggiuntive.
Creazione moduli - inserimento dei vari campi - campi speciali - opzioni aggiuntive.
Link copiato negli appunti

I forms o moduli sono costituiti da un insieme di campi modulo che possono essere compilati dal visitatore per inviare delle informazioni. Visivamente possono essere simili ai campi modulo presenti nei programmi di inserimento dati e disponibili anche all'interno di programmi avanzati di videoscrittura, fogli elettronici ecc. Un modulo presente in una pagina HTML è caratterizzato da un primo tag, FORM, che indica il tipo di invio dei dati da effettuare e la loro destinazione. I dati stessi vengono generalmente spediti grazie all'utilizzo di un apposito programma CGI (Common Gateway Interface) che può essere presente direttamente all'interno del ns. sito o richiamato anche da un qualunque altro sito internet che ce lo mette a disposizione.

Se non si dispone di un programma CGI, i dati possono anche essere spediti direttamente ad un indirizzo e-mail ma in questo caso essi avranno una formattazione piuttosto spartana. Ogni programma CGI può avere delle proprie caratteristiche e dettare delle proprie regole per quanto riguarda le possibili opzioni dei vari campi. Alcuni ad esempio consentono di specificare quali campi sono obbligatori, altri consentono anche di verificarne il corretto inserimento (ad esempio lunghezza minima e massima, presenza di caratteri alfabetici in alcune posizioni e numerici in altre, ecc.). Per maggiori informazioni su tali opzioni è necessario vedere la guida all'utilizzo del programma CGI che si utilizzerà. Per maggiori approfondimenti sui moduli, si può invece fare riferimento al corso HTML.

Inserimento dei campi form

Premettendo che né il menu normale, né quello contestuale, né la barra Easy contengono comandi sui form, passiamo alle altre 2 barre (Expert ed Hardcore) che sono invece piuttosto complete e che contengono ognuna una voce apposita. Anche in questo caso valgono le stesse osservazioni sulla maggior completezza delle opzioni inserite dalla barra Hardcore.
Inoltre i bottoni BUTTON, CHECKBOX, RADIO, IMAGE, BROWSE, PASSWORD, TEXT, HIDDEN TEXT, SUBMIT e RESET della barra Expert corrispondono all'unica opzione INPUT della barra Hardcore. Questo perché si tratta di diverse opzioni dell'unico tag INPUT.
Il bottone CHECKBOX della barra Expert restituisce erroneamente un codice RADIO. Inserendo il tag INPUT da Hardcore, viene inoltre erroneamente riportata l'opzione TEXTAREA che non è un'opzione di INPUT ma un tag a se stante (vedi invece barra Standard per il corretto inserimento).

FORM

Il primo, indispensabile comando che va utilizzato per la creazione di un modulo è FORM presente su entrambe le barre. Tutti gli altri comandi andranno inseriti al suo interno (cioè tra il comando <form> ed il </form>).
Inserendolo dalla barra Avanzata ci viene proposta la sola opzione ACTION che deve indicare il percorso dello script CGI o, in assenza di questo, direttamente l'indirizzo e-mail del destinatario dei dati. Inserendo il comando dalla barra Hardcore, possiamo notare altre opzioni tra cui METHOD che, se impostato su GET, limita il numero massimo di caratteri a 255 e li suddivide in due variabili, se impostato su POST, consente l'invio di un numero di caratteri illimitato.

SUBMIT e RESET semplici e tramite IMAGE

Gli altri elementi indispensabili sono i tasti SUBMIT e RESET che consentono il primo di spedire i dati ed il secondo di cancellarli senza effettuarne l'invio. Mentre sulla barra Expert sono disponibili direttamente i tasti già pronti, da quella Hardcore sarà necessario scegliere un generico comando INPUT in cui si sceglierà come TYPE il Submit o il Reset oltre ad altre opzioni che vedremo più avanti. Per modificare il testo che appare sul bottone basta inserirlo all'interno dell'opzione VALUE.
In alternativa si può anche usare un'immagine a cui abbinare i comandi SUBMIT e RESET, utilizzando sempre il tag INPUT, ma con TYPE="IMAGE". In tal caso andrà anche indicato il percorso dell'immagine in src e andrà utilizzato uno script per dare il comando di invio o di reset.

Opzioni generali

TITLE indica un testo aggiuntivo che su alcuni browser appare sotto forma di tooltip.
Ricordiamoci sempre l'importanza di impostare il campo NAME indispensabile per poter successivamente abbinare il nome del campo al suo contenuto (lavoro effettuato dallo script CGI). Il nome sarà utile inoltre se si vogliono inserire degli script di controllo correttezza dei dati (ad esempio in Javascript).
TABINDEX, se utilizzato, indica la sequenza dei campi premendo il tasto TAB. Va compilato con dei numeri da 1 in poi.
DISABLED rende il campo non attivo e READONLY non consente di effettuare modifiche.

TEXT

L'opzione di utilizzo più immediato è TEXT che serve a creare una semplice casella per l'inserimento di testo. Si può impostare tramite VALUE un valore iniziale, ad esempio se va inserito il nome si può inserire la scritta "nome", ma in genere viene considerato più comodo per l'utente trovarsi lo spazio vuoto in modo da poter iniziare direttamente la digitazione senza dover prima cancellare il testo già presente.
tra le altre opzioni: size consente di impostare la dimensione orizzontale della casella, MAXLENGTH indica il numero massimo di caratteri da accettare.

TEXTAREA

Se il testo da richiedere all'utente può superare la singola riga, allora si ricorre al tag TEXTAREA che può essere dimensionato a piacere tramite indicazione del numero di righe ROWS e di colonne COLS visualizzabili. Il testo inserito dall'utente può però eccedere la parte visibile. Anche qui il campo VALUE può indicare un testo precompilato.

RADIO

RADIO permette di creare tramite dei pulsantini di tipo radio, più possibilità alternative (per cui selezionandone una, le altre si deselezionano in automatico). Tale risultato si ottiene creando più campi RADIO con lo stesso NAME e con diverso VALUE. L'opzione CHECKED indica quale bottoncino è già attivo.

CHECKBOX

CHECKBOX consente di inserire dei quadratini da selezionare o deselezionare; sono utilizzabili da soli per compilare dei campi di tipo vero/falso o in gruppo.
L'utilizzo di più campi CHECKBOX in gruppo è simile a quello dei campi RADIO: infatti va dato un unico NAME a tutti e diversi VALUE. Però in questo caso sono consentite scelte multiple. Qui l'opzione CHECKED può indicare come già contrassegnati uno o più campi (o nessuno se non viene utilizzato).

SELECT e LISTBOX

I tasti FORM SELECT e FORM LISTBOX della barra Expert consentono, come preannunciato dal disegno presente sugli stessi bottoncini, di creare delle liste testuali di selezione in cui, nel primo caso possiamo fare una sola scelta, nel secondo più di una. Il tag che i due tasti richiamano è in realtà lo stesso ed è il tag SELECT, solo che nel secondo caso esso contiene anche l'opzione MULTIPLE. In entrambi i casi sarà necessario dare il NAME e indicare per ogni OPTION il VALUE (testo che apparirà), e l'eventuale scritta SELECTED su una o più opzioni che si desiderano attive al momento della visualizzazione.

OPTGROUP

Il tag OPTGROUP (all'interno di FORM SELECT e FORM LISTBOX) consente inoltre di formare dei gruppi di opzioni. Tale comando non ha effetto sul risultato visibile dall'utente ma può solo rendere più agevole da parte di chi crea la pagina, il raggruppamento di opzioni simili.
Passiamo ora alle opzioni un po' particolari del tag INPUT:

BUTTON

L'opzione BUTTON consente di creare un bottone (tipo quelli submit e reset) con un testo personalizzato (da indicare in VALUE). A tale bottone sarà possibile assegnare uno script.

FILE

L'opzione FILE (FORM BROWSE sulla barra Expert) crea un campo testo seguito da un tasto SFOGLIA e consente di inserire il percorso di un file presente sul nostro computer.

PASSWORD

L'opzione PASSWORD inserisce ancora un campo testo ma in questo caso durante la compilazione dello stesso la visualizzazione del testo effettivo sarà sostituita da degli asterischi. I dati verranno comunque mandati correttamente.

HIDDEN

Infine l'opzione HIDDEN consente di inserire dei campi da spedire che non verranno visualizzati dall'utente. A seconda del CGI utilizzato essi potranno essere diversi. Un utilizzo molto comune consiste nell'impostare l'oggetto dell'e-mail ed il destinatario con un comando di questo tipo:
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Titolo del form">

FIELDSET - Organizzazione visiva dei dati

l tag FIELDSET consente di organizzare visivamente più campi all'interno di un riquadro. Sarebbe poi opportuno inserire un tag LABEL al suo interno in modo da poter identificare l'insieme dei campi con un nome; ad esempio possiamo inserire i campi nome, cognome e codice fiscale all'interno di un Fieldset "Dati Anagrafici" e i campi telefono, fax, e-mail in un Fieldset dal nome "Recapiti".

LABEL

Il tag LABEL, oltre che nell'occasione appena vista, può essere utilizzato per scrivere il testo descrittivo dei vari campi e per impostare eventualmente un tasto di accesso rapido. Esso è presente solo nella barra Hardcore. Per associare un LABEL ad un campo della form basta indicare nell'opzione FOR del label il nome del campo; in alternativa il tag del campo può essere incorporato all'interno di quello del label.


Ti consigliamo anche