html519
Corso html 5, lezione 19.
Roberto Abutzu su uiciechi.it, 2014-05.
Diciannovesima parte: "I Moduli Form - Introduzione".
I Moduli.
Quando in una pagina web indichiamo un modulo, intendiamo un settore della pagina dove vengono
contenuti degli elementi con cui l'utente ha la possibilità di interagire.
Nello specifico, nei moduli ci sono dei campi dove è possibile scrivere, fare delle scelte, dove
troviamo dei pulsanti da attivare.
Per darvi una idea più precisa, in questi campi sono presenti tutti quegli elementi che
abitualmente troviamo nelle finestre di dialogo del sistema operativo Microsoft. Questi elementi
sono:
- Campi di editazione.
- Caselle combinate, dette anche a tendina.
- Pulsanti radio.
- Caselle di controllo.
- I pulsanti di conferma invio dati.
Come nelle finestre di dialogo, anche qui i pulsanti servono prevalentemente per confermare,
annullare o inviare i dati inseriti nei campi precedenti.
Sicuramente vi state chiedendo: perché questi campi nelle pagine web?
Semplice! Man mano che la rete si è evoluta, è sempre stato più necessario un dialogo tra il sito e
il visitatore. Nell'evoluzione dei siti, questi moduli, conosciuti anche come form, hanno permesso
sempre di più di operare in rete. Il web non è solo lettura di intere pagine ma anche interazione
col web stesso.
Infatti, partiamo da un form composto dal solo campo di ricerca come può essere quello di un motore
di ricerca, per esempio Google, per finire a un modulo di registrazione o di pagamento in uno
store, form composti da molti più campi interattivi. I campi che più spesso incontriamo sono:
- La ricerca.
- L'iscrizione ad una newsletter.
- User e password in aree riservate.
- Campi di richiesta informazioni in aeroporti o sulle tratte ferroviarie.
Oggi con l'aumento di blog e social network, troviamo aree per inserimento di commenti, possibilità
di dare preferenze, risposte ad articoli di altri, eccetera. Quindi, mentre sino a 15 anni fa erano
davvero pochi e molto ridotti, ora troviamo form praticamente ovunque e, opinione personale, anche
dove realmente non è necessario.
Quando bisogna affrontare la creazione di un modulo form, di solito bisogna prepararsi ad un duro
lavoro nel linguaggio.
Importante:
1. Questo è un corso base di html 5 e và considerato tale.
2. Partendo dal presupposto che chi legge questo corso non è a conoscenza delle versioni precedenti
di questo linguaggio, cercherò di partire dall'inizio dei form, implementando le nuove specifiche
html 5 individuando le differenze con quelle specifiche ancora valide e quindi utilizzabili.
3. Questo è necessario dato che in molti manuali di html 5, viene solo specificato la differenza
tra html 4 e html 5.
Ciò premesso, terrò questo profilo perché spesso mi sono imbattuto in tag nuove senza le
spiegazioni di quelle vecchie a cui andavano collegate. Inoltre, vi devo dire che in html 5 le
specifiche inerenti ai form sono tantissime, quindi, dato il livello base del corso, vedremo solo
quelle fondamentali, le più usate, lasciando ad un approfondimento futuro i dettagli e le
specifiche particolari.
Nota che:
- I moduli lavorano insieme ad altri file per l'invio dei dati immessi.
- Per questo lavoro di interazione si ha la possibilità di usare diversi tipi di file, creati con
vari linguaggi di programmazione, tra cui anche il PHP.
- Il buon funzionamento di questi file e, quindi, dei form, può dipendere anche dai servizi
presenti sul server dove viene installato il sito.
- Questo corso non si occupa di linguaggio PHP o di altri sistemi di invio dei dati, quindi, ci
limitiamo solo ed esclusivamente alla creazione delle pagine web e della loro formattazione con i
file Css.
- Al termine del corso, sicuramente creerò dei form aggiungendoci anche dei file per farli
funzionare, ma non posso dare nessuna garanzia, perché può accadere benissimo che lo stesso file di
invio dati, se caricato su due server diversi, non è certo che sia funzionante allo stesso modo.
Ora che abbiamo dato queste informazioni, possiamo iniziare.
La tag che delimita un modulo è: `` simbolo di minore form simbolo di maggiore ``
E si chiude inserendo una barra dopo il minore, così: `` simbolo di minore /form simbolo di
maggiore ``
Quando si effettua la creazione di questi Form, dobbiamo dare ad essi un nome, insomma, un
identificativo.
Ecco il codice:
`` simbolo di minore form name="provaForm" simbolo di maggiore ``
`` simbolo di minore p simbolo di maggiore campi del form simbolo di minore /p simbolo di maggiore
``
`` simbolo di minore /form simbolo di maggiore ``
Come precisato sopra, i dati raccolti dai form vengono inviati al server che li elabora. Quando i
dati devono essere inviati, Abbiamo due attributi da assegnare, e li dobbiamo assegnare
obbligatoriamente.
Il primo è: action="paginaDati.php". Questo attributo indica la pagina o il file di riferimento con
il quale vengono mandati i dati al server.
Il secondo è: method="get". Oppure è: method="post". Entrambi indicano il metodo con il quale
possono essere inviati questi dati al server.
Il metodo get viene utilizzato per dati ridotti. Con questo metodo, alcuni server non accettano più
di 255 caratteri. Il metodo post, invece, accetta molti più dati. Non analizzeremo qui la
differenza, quindi, utilizzate come consigliato il metodo più adatto a seconda del vostro form,
anche se il post è preferibile. Comunque, potrebbe essere necessario anche fare delle
configurazioni particolari sul server per far funzionare uno di questi due metodi.
Quindi, per continuare a completare il codice, avremo:
`` simbolo di minore form name="provaForm" action="paginaDati.php" method="GET" simbolo di maggiore
``
oppure:
`` simbolo di minore form name="provaForm" action="paginaDati.php" method="POST" simbolo di
maggiore ``
Quindi, il codice visto in precedenza diventa:
`` simbolo di minore form name="provaForm" action="paginaDati.php" method="POST" simbolo di
maggiore ``
`` simbolo di minore p simbolo di maggiore campi del form simbolo di minore /p simbolo di maggiore
``
`` simbolo di minore /form simbolo di maggiore ``
Ovviamente, anche se precedentemente non è stato indicato, il paragrafo inserito all'interno della
tag form è solo per indicare il contenuto, poi successivamente inseriremo i veri campi con le
relative tag.
Procediamo, quindi, dando una spiegazione semplificativa nell'introdurre i primi campi.
Dicevamo che nei form noi dobbiamo inserire dati, quindi, un input sia sotto forma di caratteri,
sia sotto forma di scelte. Procediamo gradualmente dando importanza prima alla comprensione di
questi campi, introducendo il campo utilizzato per inserire del testo.
Per prima vediamo una text area formata da una sola riga di testo: `` simbolo di minore input
type="text" simbolo di maggiore ``
Questa è una tag che non ha chiusura e, tra le virgolette, notiamo il valore dell'attributo type.
Scriviamo un esempio semplice di questa tag, simulando un campo di ricerca:
`` simbolo di minore h2 simbolo di maggiore cerca nel sito simbolo di minore /h2 simbolo di
maggiore ``
`` simbolo di minore form name="ricerca" simbolo di maggiore ``
`` simbolo di minore label simbolo di maggiore cosa cerchi?``
`` simbolo di minore input type="text" simbolo di maggiore ``
`` simbolo di minore /label simbolo di maggiore ``
`` simbolo di minore input type="submit" value="cerca" simbolo di maggiore ``
`` simbolo di minore /form simbolo di maggiore ``
Notate questa tag: `` simbolo di minore label simbolo di maggiore ``
Questa è l'etichetta che compare a fianco del campo ed è quella etichetta che viene letta dallo
screen-reader quando ci posizioniamo sul campo.
Vi sarà capitato un form dove veniva richiesta, per esempio, una data. La label, nel caso delle
date, sono le etichette che indicano il giorno, il mese e l'anno, quando il cursore si posiziona
sui vari campi.
Attenzione a non confondere la label con il nome del campo o con il suo contenuto. La label è solo
l'etichetta del campo.
Racchiude fisicamente il campo stesso, infatti si apre prima del campo e si chiude dopo che il
campo viene completato.
Un altro campo input che troviamo nel nostro esempio è: `` simbolo di minore input type="submit"
simbolo di maggiore ``
Questo indica un pulsante, un bottone, e questo tipo di comando indica "invia" e diciamo che
conferma o spedisce i dati inseriti nell'area di testo.
L'attributo "value", specifica il testo visualizzato nel pulsante stesso. Il testo che viene
associato al pulsante è quello racchiuso tra virgolette, quindi, per l'esempio fatto, il testo è
cerca.
Attenzione: Value indica valore e in questo caso il valore del pulsante non cambia.
In alcuni contesti questo attributo può essere sostituito da altri attributi. Desidero farvi notare
che utilizziamo una tag nominata "input", quindi, già la tag significa inserire qualcosa. Inoltre,
utilizziamo l'attributo "type" che indica esattamente che tipo di dati inseriamo nel campo del form
rappresentato da quella tag. In pratica, è questa la logica dei campi di un form.
Facciamo un altro esempio semplice sull'utilizzo di un pulsante:
`` simbolo di minore h2 simbolo di maggiore Nunziante Esposito simbolo di minore /h2 simbolo di
maggiore ``
`` simbolo di minore p simbolo di maggiore Tecnico che pubblica queste lezioni sul giornale
Uiciechi.it, grazie al contributo dell'Unione Italiana dei Ciechi e degli Ipovedenti simbolo di
minore /p simbolo di maggiore simbolo di minore br / simbolo di maggiore ``
`` simbolo di minore form action="www.uiciechi.it"
target="_blank" simbolo di maggiore ``
`` simbolo di minore input type="submit" value="visita Uiciechi.it" simbolo di maggiore ``
`` simbolo di minore /form simbolo di maggiore ``
Copiate queste stringhe in un file html e provatelo. Niente di strano, perché abbiamo solo inserito
un pulsante che ci consente di aprire una nuova pagina web direttamente al sito dell'unione.
Sicuramente avrete notato l'attributo: ``target="_blank"``
indica al programma di navigazione di aprire un'altra pagina nel browser, quindi di non chiudere
quella dove siamo ma aprirne direttamente una nuova, navigando per schede.
Di seguito, inseriamo un altro form semplice, sempre un'area di testo su unica riga, aggiungendo
qualche attributo. Ipotizziamo di dover inserire il nostro indirizzo, via e numero civico. Ecco il
codice che copierete poi in una vostra pagina html:
`` simbolo di minore form simbolo di maggiore ``
`` simbolo di minore input name="mioIndirizzo" type="text" placeholder="via Rossi 3" size="40"
maxlength="200" / simbolo di maggiore ``
`` simbolo di minore /form simbolo di maggiore ``
In pratica, ho dato il nome al form e ho inserito text come tipo di input. Inoltre, ho inserito
l'attributo "placeholder". Questo mi consente di far visualizzare nel campo di testo,
un'indicazione che permetta al navigatore di comprendere esattamente cosa inserire. Molto
semplicemente, gli indico un esempio che scomparirà non appena il focus viene portato nell'area di
editazione tramite il tasto Tab o dal click del mouse.
Notate che l'attributo completo è: placeholder="via Rossi 3" e che, come tutti gli attributi, dopo
il suo nome, si mette un uguale e tra le virgolette il valore dell'attributo.
In questo form incontriamo altri due attributi: "size" e "maxlength". Vediamo a cosa servono:
- "size": indica la larghezza della nostra area e viene espressa in caratteri. Io ho inserito 40
caratteri e ripeto che questa è la larghezza nella pagina della nostra area di testo. Scusate se lo
specifico, ma a volte ci si confonde con il numero massimo dei caratteri che è possibile inserire
in una area di testo.
- "maxlength": questo è il secondo attributo, quello che indica il numero massimo di caratteri
consentiti in questo campo di testo. Il limite che ho inserito è 200. Ecco l'attributo completo:
``maxlength="200"``
Riassumendo, per precisare e far capire meglio il concetto di utilizzo di questo tipo di campo di
testo di un form, devo dire che questa area ha le dimensioni di una riga di 40 caratteri, ma è
possibile inserirne in essa fino a 200 caratteri. Qualcuno può pensare: e come si fa?
Semplice! Visto che queste misure sono fisse e non possono variare, quindi, se si continua ad
inserire il testo, superati i 40 caratteri, quello già scritto viene spostato a sinistra e viene
nascosto, come se il testo stesso scorresse verso il bordo sinistro dell'area di testo,
nascondendosi sotto agli eventuali oggetti che si trovano a sinistra.
Si specifica questo per le persone non vedenti che, tra l'altro, non si possono rendere nemmeno
conto visivamente di questo slittamento del testo se ci si sposta a sinistra, come fa un vedente.
Infatti, se si porta il cursore verso sinistra con i comandi di movimento, man mano che ci si
sposta a sinistra, un vedente osserva che il testo ricompare e quello che prima era a schermo,
scompare a destra del campo editazione.
Per completare il form, sarebbe stato opportuno inserire una label e un pulsante di invio del
nostro indirizzo. Lascio a voi questo compito. Da tener presente che, se qualche volta e
soprattutto nella spiegazione di questi form, alcuni campi vengono ridotti, è solo per
semplificare il codice e per far risaltare maggiormente gli attributi nuovi da spiegare.
Infatti, fate mente locale e provate ad immaginare un form formato da 4 aree di testo e 3 pulsanti,
magari a formare una pagina di codice assieme a label, attributi e altri elementi, e capirete
meglio il perché di queste semplificazioni.
Sicuramente più avanti vedremo anche dei form completi, ma per rendere le spiegazioni più chiare,
meglio se procediamo pian piano, incrementando i contenuti gradualmente.
Nota importante: nelle nuove specifiche del linguaggio html 5 esistono veri input per gli
indirizzi, per le mail, per i numeri telefonici eccetera. L'esempio sopra riportato ha l'unico
scopo di spiegare i campi di testo.
In base a quanto sopra riportato, cominciate a fare delle prove ad inserire qualche form di quelli
visti sopra, inserendoli nelle pagine del sito che man mano state programmando. Nella prossima
lezione procederemo con altri campi da inserire nei form e altri attributi, inserendo direttamente
le nuove specifiche di programmazione di questo nuovo linguaggio.
Vi rimando alla prossima lezione per continuare questo discorso che diventa sempre più interessante
per arricchire sempre di più le pagine del nostro sito.
`***********`
Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu simbolo di minore roberto@evyweb.it simbolo
di maggiore `_
Torna all'indice