Nella lezione precedente abbiamo parlato dei frames. Adesso tratteremo i froms.
Che cosa è un form?
In una pagina web un form è un'interfaccia con la quale un utente può interagire con un sito. Su forumfree, un form è lo spazio dove inseriamo le risposte, cosìcome un form è anche il bottone con cui inseriamo la risposta. Possono avere dei nomi diversi, ma sono sempre forms.
Questi form si limitano comunque a "catturare" i dati immessi dagli utenti ma non li elaborano per dare una risposta. Questi dati vengono solo inviati al server che tramite PHP, ASP, ASP.NET ecc. vengono interpretati, elaborati e restitituiti dal server stesso sotto forma di contenuto o pagina web. E' come quando fate un log-in su un sito. Voi immettete la mail e la password nei forms, questa mail e questa password vengono mandati al server e il server controlla che l'username sia corretto ed associato a quella password per l'identificazione dell'utente. Se entrambi sono corretti il server manda indietro al browser una pagina di risposta, come ad esempio: ti sei connesso come $user.
Questo è solo un esempio di uso dei forms, in realtà ce ne sono molti altri.
Il tag FORM
Il tag form assegna di fatto un'area della pagina affinchè venga riconosciuta come form.
Il tag può contenere anche altri tag come immagini e tabelle, ma principalmente è fatto per inserire dei tag per l'inserimento dei dati. Potete inserire più forms in una pagina ma non è possibile annidarli tra di loro. Il tag form possiede inoltre degli attributi che stabiliscono come i dati verranno usati e interpretati.
Se un form è stato scritto correttamente, i dati vengono associati in coppie nome valore e spedite al server dopo la pressione del bottone submit.
Gli attributi action e method
L'attributo action da l'url del programma che verrà usato per processare i dati.
L'attributo method, invece, specifica un metodo, get o post, per inviare i dati al server. I due metodi fanno sì che i dati vengano inviati in maniera diversa al server. I dati vengono inseriti in alcune variabili, anche queste passate tramite html attraverso l'attributo name nei vari elementi interni del form.
Attraverso il metodo get, questi dati vengono passati dal browser attraverso l'url stesso. Questi dati sono messi in fondo all'indirizzo separati dal resto da un ?.
Il metodo post invece trasmette le informazioni in modo separato dall'url. Il messaggio di richiesta viene dunque diviso in due parti, la prima contiene l'url combinato alla richiesta post e la seconda parte con i dati dei form. Leggendo la prima parte della richiesta vede che è un post e si aspetta dei dati in arrivo dal browser per poterli elaborare dunque.
Se usare get o post dipende esclusivamente dalle vostre esigenze. Se avete pochi form o uno piccolo get è sufficiente, per forms complessi andrebbe usato post. Post andrebbe usato anche per ragioni di sicurezza, dato che con post non appaiono i dati nell'url e quindi nemmeno le eventuali password, anche se magari vengono criptate. Ricordatevi che le pagine che fanno uso di metodo get possono essere salvate nei preferiti, proprio perchè le informazioni stanno direttamente nell'url e quindi non vanno reinserite e reinviate. Ecco un esempio di form:
Come potete notare, scrivendo dentro password i caratteri vengono nascosti automaticamente dal browser, è un tipo di input fatto appositamente per le password. Una volta cliccato sul bottone a regola il browser manda al server i dati contenuti nelle variabili nick e pass. Se ci cliccate dovreste vedere l'url che cambia. Ovviamente, non essendoci nessuna pagina dietro che elabora questi dati non fa assolutamente niente. Però potete notare come, anche se la pass è oscurata nell'area di testo, una volta cliccato il pulsante questa venga mostrata in modo completo. Per impedirlo va criptata tramite codice, ma non tratteremo questo argomento. Adesso passeremo invece a vedere i vari tipi di campi interni dei form.
Form di controllo
I form di controllo comprendono tutti quei tag interni del form che servono per catturare i dati da spedire poi al server. Ricordatevi sempre che ognuno di loro ha bisogno del suo attributo name per essere usato, ad eccezione di submit e reset, che hanno per altro delle funzioni predefinite per il loro funzionamento. Ad esempio, cliccando sul bottone di invio dei dati l'url cambiava in automatico prendendo i dati dei vari input senza che io abbia dovuto scrivere una riga di codice per farglielo fare. Reset è un bottone simile, ovvero una volta cliccato ripulisce i vari campi. Ma per tutti gli altri va inserito il name perchè devono passare dei dati, name è il nome delle variabili a cui verrà associato il contenuto inserito dall'utente.
Input
Input è un tag molto versatile. Dentro un input si possono ottenere diversi tipi di dato, come campi di testo di una riga, password, controlli nascosti, checkbox e bottoni monorisposta, submit e reset, bottoni per il caricamento di files e bottoni generici. Per specificare di quale input abbiamo bisogno si usa l'attributo type, come nell'esempio sopra. Ecco l'elenco dei valori di type:
"text" per i testi di una riga
"password" per le password
"checkbox" per le checkbox a risposta multipla
"radio" per risposte singole
"submit" per il bottone di submit
"reset" per il bottone reset
"hidden" per i campi nascosti
"file" per l'inserimento dei files
"button" per i bottoni generici
"image" per cambiare grafica al submit
Ecco la spiegazione dei vari tipi con gli esempi pratici. input type="text". Serve ad inserire una linea di testo. Normalemente viene visualizzata della larghezza di una 20ina di caratteri ma è possibile dargli un attributo size per aumentarne la dimensione o diminuirla. Per quanto riguarda il numero di caratteri inseribili, questo è virtualmente illimitato, è possibile inserire un massimo di caratteri tramite l'attributo maxlenght. Ecco un altro esempio più completo di testo input:
CODICE
<input type="text" name="nome" maxlenght="25" value="scrivi qui il tuo nome" />
L'attributo value, come vedete, inserisce un valore dentro l'area di testo.
input type="password".Come nell'esempio di sopra, l'attributo password rende i caratteri inseriti nel campio di testo dei pallini o asterischi. Per il resto è uguale al campo text a cui potete dare sempre un numero massimo di caratteri con maxlenght. Ad esempio se volete creare un campo per l'inserimento password con un numero di caratteri non superiore a 32.
input type="hidden". Questo particolare tipo di input non viene visualizzato dal browser ma serve allo sviluppatore per mandare delle informazioni assieme ai dati da processare con degli script. Ad esempio, se voglio stampare a schermo una pagina tramite codice php, posso utilizzare questo campo nascosto per controllare se questo è già stato inserito o meno. E' una specie di interruttore nascosto per far svolgere agli script determinate cose a seconda della sua presenza:
input type="checkbox". Le checkbox sono quei quadrettini per la scelta multipla, ma anche per validare delle scelte, come: accetto le condizioni e i termini del servizio, oppure per segnare che si è letto tutte le informative del sito prima di accettare. I checkbox possono essere usati per mandare al server dei dati particolari su puù scelte che perl non ne escludano un'altra. Tipo un elenco di riviste che si leggono per delle indagini di mercato. Di base una casella non è selezionata, volendo è possibile inserire un attributo checked="checked" per spuntarla automaticamente. Ecco un esempio:
input type="radio". I bottoni radio, sono simili ai checkbox, solo prevedono una scelta singola ed una scelta esclude l'altra. Nell'esempio precedente, se non voglio sapere tutte le riviste che leggete ma solo una di queste, userà il radio:
Reset e button li ho spiegati sopra, submit invia i dati e reset resetta tutto il form cancellando i valori o mettendo i valori di default definiti dallo sviluppatore.
inpunt type="button". Button è un tipo di input che crea un bottone generico che non ha funzioni predefinite come i due sopra, ma che può far partire dei codici di scripting lato client come JavaScript. Per dare un nome al bottone si usa l'attributo value come mostrato nell'esempio:
CODICE
<input type="button" value="Sono un bottone!" />
Attenzione: Quando si preme il tasto submit il valore dei bottoni generici non viene inviato al server. Questo tipo di bottone è usato per far partire dei codici dal browser e non dal server.
input type="image". Se volete inserire un bottone personalizzato al posto dell'input tipo un'immaginetta a forma di busta con scritto sotto mandami, potete usare questo tag. Bisogna specificare l'url dell'immagine tramite l'attributo src e sarebbe meglio inserire anche un testo alternativo:
CODICE
<input type="image" src="url immagin" alt="invia il form">
input type="file". Se volete realizzare un sito che prevede il caricamento di qualche file avete a disposizione questo tag. Esso permette all'utente di selezionare un file da inviare al server quando viene inviato il form. E' il classico campo di testo accompagnato dal bottone "Browse". Se è previsto l'uso di questo input dovete specificarlo in un attributo di form:
Come fare se si deve inserire del testo su più righe come un commento o un post di un forum che hanno bisogno di essere visualizzati bene quando si scrive? Si usa il textarea che crea un'area di testo multilinea scrollabile.
CODICE
<textarea></textarea>
Ecco la lista dei suoi attributi principali:
cols="#" per modificare il numero delle colonne
rows="#" per modificare il numero delle righe
readonly="readonly" specifica se la textarea non può essere modificata dall'utente, è opzionale
name="text" necessario se il suo contenuto deve essere inviato via form assieme al suo contenuto.
Menù a tendina
Per creare un menù a tendina si usa il tag select:
CODICE
<select></select>
select ha un suo attributo name che va specificato per inviare i suoi dati attraverso il form. Ha anche un attributo multiple="multiple" che serve a creare menù a tendina a scelta multipla, un po' come quello per inserire i +1 -1 su forumfree quando si scelgono le sezioni. All'interno di select si aprono i vari tag option per indicare le scelte. Esiste anche un tag optgroup per creare dei sottogruppi concettuali ovvero delle sottodivisioni.
Option ha questi attributi fondamentali:
value="text" per inserire un valore da far elaborare quando si invia il form
selected="selected" per farlo autoselezionare come scelta base. Se è impostata il primo valore visualizzato sarà quello altrimenti il primo inserito
Mentre optgroup ha un attributo fondamentale ovvero label="text" per indicarne un'etichetta.
Di tipi di select ce ne sono due. Uno è quello classico a tendina con una sola scelta, l'altra è a scorrimento dove si possono selezionare più opzioni. Per fare ciò possiamo usare un attributo di select ovvero size="#" per stabilire quante option visualizzare e aggiungere multiple per far in modo che se ne possano selezionare più di una.
Ecco un esempio di come viene una select completa:
Per selezionare più di un risultato si tiene permuto ctrl mentre si clicca, ricordatevi di farlo presente.
I bottoni
Oltre agli input type="button" generici spiegati sopra esistono degli specifici tag buttons con funzione base. Il tag button può contenere immagini che non siano mappe immagine ed altri tag ad eccezione dei links e di altri forms.
CODICE
<button>Cliccami tutto!</button>
I bottoni possono essere generici come quello di cui sopra oppure avere due funzioni principali che sono type="reset|submit". Submit è abbastanza chiaro cosa fa. Una volta creato il form ed inserito il bottone questo spedisce i dati. Ovviamente il tag button deve avere un attributo name che lo indentifica al momento della spedizione all'interno dei vari codici. Reset invece al click non invia i dati ma resetta tutti i campi. Provate a scrivere qualcosa nel campo di testo, cliccate e vedete che succede che succede:
Ecco il codice per poterlo provare, su forumfree non è possibile:
Ed ecco in sintesi i form. Ovviamente c'è molto di più da sapere e da approfondire, ma credo non sia il caso di mettere troppa carne sul fuoco, visto che comunque queste cose sono utili se si usano javascript e php e non è lo scopo del corso.
Con questa lezione finisce il corso sull'HTML di WebDesign for Dummies! Nella prossima lezione vedremo i fondamenti del css.
.
form1.png
CODICE<input type="text" name="nome" maxlenght="25" value="scrivi qui il tuo nome" />
.
