Nella maggior parte dei siti internet troviamo dei moduli d'iscrizione, dei sondaggi, forum e via dicendo i quali ricevono dell'input dall'utente e lo inseriscono nel database o comunque lo rielaborano, in questa guida andremo a capire come questi valori vengono "passati" da una pagina all'altra. Innanzitutto facciamo una carrellata sul codice HTML che ci permette di inserire nelle nostre pagine i campi di inserimento quali gli input (text,password), le textarea, le select, i radio e i checkbox.
> Input
Text
gli input text sono dei semplici campi di testo i quali vengono creati con il tag <input /> specificando il tipo type="text" tramite un nome name="nomecampo" e se si desidera che abbiano un valore predefinito questo dovrà essere inserito nell'attributo value="valore predefinito"
codice:
Password
gli input password hanno lo stesso identico funzionamento dei text con l'unica differenza che quando si scrive del testo al loro interno questo viene mascherato (provare per credere)
codice:
risultato:
> Textarea
le textarea sono dei campi in cui si inputa testo come negli input text con la differenza che danno la possibilità di avere più righe visualizzabili e se il testo supera l'area di visualizzazione appaiono le scrollbars. Questa tipologia di campo si crea con il tag <textarea<> si identifica con un nome name="testo2" e il valore predefinito va inserito tra il tag di apertura e quello di chiusura (come nell'esempio). Per ingrandire o rimpicciolire la textarea si devono specificare il numero di colonne di larghezza con l'attributo cols="50" e il numero di righe con l'attributo rows="10".
codice:
> Select
Singole
Le select, anche dette "tendine", sono dei campi che non danno la possibilità all'utente di inserire del testo, bensì permettono di scegliere un'opzione da una lista predefinita. Per creare una select il codice da scrivere è un po più articolato perchè dovremmo avere un tag che apre la dichiarazione della select, n tag contenenti le opzioni selezionabili e un tag che chiude la dichiarazione della select.
codice:
Anche per le select l'attributo name assegna un nome del campo che ci permetterà di identificarlo univocamente all'interno del nostro documento HTML, mentre il valore che assumerà questo campo sarà dipendente dall'attributo value della option che l'utente selezionerà. L'opzione con valore 100 verrà selezionata automaticamente al caricamento della pagina come opzione di default perchè all'interno del tag option torviamo l'attributo selected.
Multiple
Le select multiple come codice sono identiche alle select singole a meno della specifica multiple nel tag select e l'attributo name che deve avere una parentesi quadra aperta e una chiusa alla fine ne capiremo poi il motivo.
Queste select a differenza delle select singole ci permettono di selezionare più opzioni contemporaneamente.
> Radio
I Radio sono un'altro tipo particolare di campo che funziona in modo simile alle Select solo che tutte le opzioni sono visibili e selezionabili tramite un pallino detto "radio".
Un'eccezione dei radio è che per poter selzionare solo un'opzione alla volta di un gruppo di radio questi dovranno avere lo stesso nome. Il codice è abbastanza semplice: codice:
risultato:
> Checkbox
Simili ai radiobutton i checkbox sono anch'essi una lista di opzioni, questi però a differenza dei radio permettono all'utente selezioni multiple e sono indipendenti tra loro. Come tutti i campi di input anch'essi hanno l'attributo name che li identifica.
Codice:
Risultato: Opzione1 Opzione 2 Opzione 3
Dopo questa carrellata rapida sui campi di inserimento dati diamo uno sgurado anche alle form che non sono altro che dei "moduli" di inserimento dati dentro ai quali dobbiamo mettere i nostri campi.
Anche le form, come tutti i campi, vengono identificate tramite l'attributo name, mentre a differenza degli altri hanno l'attributo action che specifica la destinazione dove verranno inviati i dati quando la form verrà inviata, e method, che è il metodo con cui verranno inviati i dati alla pagina specificata nell'azione della form, questa proprietà può assumere due valori GET o POST (si proprio loro), dipendentemente dal metodo di invio dei dati questi saranno in chiaro sull'URL se usiamo il metodo GET e nascosti se usiamo il metodo POST.
A questo punto vediamo un pò di codice per creare una form di immissione dati per un login.
Come si può notare ho aggiunto un pulsante che serve ad inviare i dati contenuti nella form, questo pulsante è un'altro tipo di campo e si chiama submit. La sua struttura è molto semplice infatti basta specificargli type ed il gioco è fatto, ovviamente è un pulsante strettamente legato alla form che lo contiene, infatti se mettiamo un submit all'esterno di una form questo non farà assolutamente niente in quanto non sa che form dovrà processare. Un'altro tipo di pulsante è il button che a differenza del submit non è legato a niente e quindi necessita di un'azione da eseguire che dovremo specificare noi. Come al solito è più semplice vedere un'esempio e poi spiegarlo:
risultato:
Come si può vedere anche i button non sono poi così difficili, la proprietà value corrisponde al testo che verrà visualizzato sul pulsante, mentre onclick definisce l'azione (javascript).
Giunti a questo punto analizziamo il passaggio di parametri da una pagina all'altra, ad esempio inviando i dati della form precedente dopo aver inserito dei valori nei due campi (ad esempio "user" e "password") avendo questa form come metodo di invio GET il browser ci reindirizzera alla pagina specificata nell'azione, in questo caso lasciando l'azione vuota la form invierà i dati alla stessa pagina in cui siamo, aggiungendo all'URL i nomi dei campi e i loro rispettivi valori separando questi dall'URL con un ? e concatenandoli tra loro con degli &. Il risultato sarà il seguente: http://tafaz.altervista.org/mostra_articolo.php?utente=user&pass=password
Se invece il metodo della form fosse stato POST l'URL sarebbe semplicemente stato così http://tafaz.altervista.org/mostra_articolo.php e i dati sarebbero stati nascosti (cosa alquanto più sicura per ovvi motivi!!!).
A questo punto il problema che ci poniamo è come possiamo recuperare questi dati nella pagina di destinazione per poterli poi riutilizzare.
La risposta è alquanto semplice e dipendente dal tipo di metodo che la nostra form di invio dati usa, infatti PHP nella pagina che riceve i dati ci fornisce due array superglobali $_POST e $_GET, i quali contengono rispettivamente i dati inviati con i due metodi.
Nelle versioni di PHP precedenti alla 4.0.qualcosa queste variabili si chiamavano $HTTP_POST_VARS e $HTTP_GET_VARS, che per retrocompatibilità ancora esistono ma sono obsolete, che funzionavano allo stesso identico modo.
Per accedere ai valori contenuti in questi array, che altro non sono che i valori che l'utente ha inserito nei campi della form, dovremo semplicemente chiamare l'array specificando come chiave il nome del campo di cui vogliamo avere il valore, e quindi dato che nel nostro esempio la form aveva GET come metodo le due chiavi dell'array $_GET saranno "utente" e "pass" e avranno i rispettivi valori "user" e "password", ma vediamo nello specifico,con un pò di codice, come potremmo salutare il nostro utente che ha effetuato il login.
- per testare il funzionamento e capire meglio eccovi 2 esempi con i 2 diversi metodi di invio dati:
- POST (sorgente)
- GET (sorgetnte)
- e qui i link alle pagine del manuale:
Le Variabili
Le variabili predefinite del linguaggio
Visto le numerose richieste che ho ricevuto ultimamente approfondiamo come accedere ai dati inviati dalle varie tipologie di input, questo perchè certe tipologie ci permettono di fare delle scelte multiple, oppure hanno un modo particolare di passare i dati.
Partiamo dai casi più semplici: - text
- password
- textarea
queste tre tipologie che permettono all'utente di modificare il proprio attributo value tramite inserimento di testo, nella pagina che riceve i dati accederemo al loro valore (supponendo di aver passato i dati con il metodo GET) usando $_GET['nomecampo'].
Se il campo viene lasciato vuoto la chiave 'nomecampo' nell'array $_GET sarà cmq impostata e il valore sarà "" (cioè una stringa vuota).
- select singole
- radio
queste due tipologie che permettono all'utente di selezionare un'opzione di quelle proposte passano il valore dell'opzione selezionata, al quale accederemo semplicemente con $_GET['nomecampo'], allo stesso modo dei tre casi precedenti, con la sola differenza che nel caso precedente l'utente può modificare il valore del campo, mentre in questo caso il valore sarà deciso da chi ha fatto il sito.
A differenza della tipologia precedente il campo di tipo select avrà sempre un'opzione selezionata e passerà sempre il suo valore, mentre i radio se non hanno un defalut checked e non vengono selezionati non passeranno nessun valore e non imposteranno la chiave nell'array $_GET, mentre se ne viene selezionato uno la chiave esisterà e il valore sarà uguale al value del campo (se l'attributo value non è impostato il valore sarà impostato a On).
- select multiple
Le select multiple che come detto prima permettono selezioni multiple se hanno opzioni selezionate impostano una chiave nell'array $_GET corrispondente all valore dell'attributo name (a meno delle parentesi quadre), e grazie alle parentesi imposteranno delle sotto-chiavi nell'array aventi un indice numerico incrementale e come valore il value della stessa.
prendiamo come esempio la seguente select multipla e supponiamo di selezionare la prima e l'ultima opzione
e questo sarà l'array $_GET che avremo dopo l'invio dei dati della form:
- checkbox i checkbox funzionano come i radio con la sola differenza che ovviamente non essendo raggruppati per nome possiamo avere delle selezioni multiple.
Il passaggio del valore avviene allo stesso modo dei radio, cioè, se non sono checkati non impostano la chiave di $_GET, se sono checkati e hanno l'attributo value passeranno questo come valore altrimenti se checkati e senza value passeranno On.
Ora per non incappare in Notice o simili per controllare i valori passati da una form innanzitutto useremo la funzione isset() con la quale andremo a controllare che le chiavi nel nostro array siano impostate.
Ad esempio:
> Input
Text
gli input text sono dei semplici campi di testo i quali vengono creati con il tag <input /> specificando il tipo type="text" tramite un nome name="nomecampo" e se si desidera che abbiano un valore predefinito questo dovrà essere inserito nell'attributo value="valore predefinito"
codice:
<input type="text" value="" name="testo1" />
risultato:Password
gli input password hanno lo stesso identico funzionamento dei text con l'unica differenza che quando si scrive del testo al loro interno questo viene mascherato (provare per credere)
codice:
<input type="password" value="" name="password" />
risultato:
> Textarea
le textarea sono dei campi in cui si inputa testo come negli input text con la differenza che danno la possibilità di avere più righe visualizzabili e se il testo supera l'area di visualizzazione appaiono le scrollbars. Questa tipologia di campo si crea con il tag <textarea<> si identifica con un nome name="testo2" e il valore predefinito va inserito tra il tag di apertura e quello di chiusura (come nell'esempio). Per ingrandire o rimpicciolire la textarea si devono specificare il numero di colonne di larghezza con l'attributo cols="50" e il numero di righe con l'attributo rows="10".
codice:
<textarea name="testo2">Questo è un esempio di textarea</textarea>
risultato:> Select
Singole
Le select, anche dette "tendine", sono dei campi che non danno la possibilità all'utente di inserire del testo, bensì permettono di scegliere un'opzione da una lista predefinita. Per creare una select il codice da scrivere è un po più articolato perchè dovremmo avere un tag che apre la dichiarazione della select, n tag contenenti le opzioni selezionabili e un tag che chiude la dichiarazione della select.
codice:
<select name="select"> questo inizia il codice della select e le assegna il nome
<option value="1">prima opzione</option>
<option value="2">seconda opzione</option> .... le varie opzioni che l'utente potrà scegliere
<option value="100" selected="selected">opzione selezionata</option>
</select>
risultato:<option value="1">prima opzione</option>
<option value="2">seconda opzione</option> .... le varie opzioni che l'utente potrà scegliere
<option value="100" selected="selected">opzione selezionata</option>
</select>
Anche per le select l'attributo name assegna un nome del campo che ci permetterà di identificarlo univocamente all'interno del nostro documento HTML, mentre il valore che assumerà questo campo sarà dipendente dall'attributo value della option che l'utente selezionerà. L'opzione con valore 100 verrà selezionata automaticamente al caricamento della pagina come opzione di default perchè all'interno del tag option torviamo l'attributo selected.
Multiple
Le select multiple come codice sono identiche alle select singole a meno della specifica multiple nel tag select e l'attributo name che deve avere una parentesi quadra aperta e una chiusa alla fine ne capiremo poi il motivo.
Queste select a differenza delle select singole ci permettono di selezionare più opzioni contemporaneamente.
<select name="select[]" multiple> questo inizia il codice della select e le assegna il nome e la definisce come multipla
<option value="1">prima opzione</option>
<option value="2">seconda opzione</option> .... le varie opzioni che l'utente potrà scegliere
<option value="100" selected="selected">opzione selezionata</option>
</select>
risultato:<option value="1">prima opzione</option>
<option value="2">seconda opzione</option> .... le varie opzioni che l'utente potrà scegliere
<option value="100" selected="selected">opzione selezionata</option>
</select>
> Radio
I Radio sono un'altro tipo particolare di campo che funziona in modo simile alle Select solo che tutte le opzioni sono visibili e selezionabili tramite un pallino detto "radio".
Un'eccezione dei radio è che per poter selzionare solo un'opzione alla volta di un gruppo di radio questi dovranno avere lo stesso nome. Il codice è abbastanza semplice: codice:
<input type="radio" name="radio1" value="1"> Opzione 1
<input type="radio" name="radio2" value="2"> Opzione 2
<input type="radio" name="radio3" value="3"> Opzione 3
<input type="radio" name="radio2" value="2"> Opzione 2
<input type="radio" name="radio3" value="3"> Opzione 3
risultato:
> Checkbox
Simili ai radiobutton i checkbox sono anch'essi una lista di opzioni, questi però a differenza dei radio permettono all'utente selezioni multiple e sono indipendenti tra loro. Come tutti i campi di input anch'essi hanno l'attributo name che li identifica.
Codice:
<input type="checkbox" name="c1" value="1" /> Opzione 1
<input type="checkbox" name="c2" value="2" checked="checked" /> Opzione 2
<input type="checkbox" name="c3" value="3" /> Opzione 3
<input type="checkbox" name="c2" value="2" checked="checked" /> Opzione 2
<input type="checkbox" name="c3" value="3" /> Opzione 3
Risultato: Opzione1 Opzione 2 Opzione 3
Dopo questa carrellata rapida sui campi di inserimento dati diamo uno sgurado anche alle form che non sono altro che dei "moduli" di inserimento dati dentro ai quali dobbiamo mettere i nostri campi.
Anche le form, come tutti i campi, vengono identificate tramite l'attributo name, mentre a differenza degli altri hanno l'attributo action che specifica la destinazione dove verranno inviati i dati quando la form verrà inviata, e method, che è il metodo con cui verranno inviati i dati alla pagina specificata nell'azione della form, questa proprietà può assumere due valori GET o POST (si proprio loro), dipendentemente dal metodo di invio dei dati questi saranno in chiaro sull'URL se usiamo il metodo GET e nascosti se usiamo il metodo POST.
A questo punto vediamo un pò di codice per creare una form di immissione dati per un login.
<form name="form1" action="#" method="GET">
Login <input type="text" value="" name="utente" />
Password <input type="password" value="" name="pass" />
<input type="submit" />
</form>
Login <input type="text" value="" name="utente" />
Password <input type="password" value="" name="pass" />
<input type="submit" />
</form>
Come si può notare ho aggiunto un pulsante che serve ad inviare i dati contenuti nella form, questo pulsante è un'altro tipo di campo e si chiama submit. La sua struttura è molto semplice infatti basta specificargli type ed il gioco è fatto, ovviamente è un pulsante strettamente legato alla form che lo contiene, infatti se mettiamo un submit all'esterno di una form questo non farà assolutamente niente in quanto non sa che form dovrà processare. Un'altro tipo di pulsante è il button che a differenza del submit non è legato a niente e quindi necessita di un'azione da eseguire che dovremo specificare noi. Come al solito è più semplice vedere un'esempio e poi spiegarlo:
<input type="button" onclick="alert('Bla bla bla');" value="Premimi!">
risultato:
Come si può vedere anche i button non sono poi così difficili, la proprietà value corrisponde al testo che verrà visualizzato sul pulsante, mentre onclick definisce l'azione (javascript).
Giunti a questo punto analizziamo il passaggio di parametri da una pagina all'altra, ad esempio inviando i dati della form precedente dopo aver inserito dei valori nei due campi (ad esempio "user" e "password") avendo questa form come metodo di invio GET il browser ci reindirizzera alla pagina specificata nell'azione, in questo caso lasciando l'azione vuota la form invierà i dati alla stessa pagina in cui siamo, aggiungendo all'URL i nomi dei campi e i loro rispettivi valori separando questi dall'URL con un ? e concatenandoli tra loro con degli &. Il risultato sarà il seguente: http://tafaz.altervista.org/mostra_articolo.php?utente=user&pass=password
Se invece il metodo della form fosse stato POST l'URL sarebbe semplicemente stato così http://tafaz.altervista.org/mostra_articolo.php e i dati sarebbero stati nascosti (cosa alquanto più sicura per ovvi motivi!!!).
A questo punto il problema che ci poniamo è come possiamo recuperare questi dati nella pagina di destinazione per poterli poi riutilizzare.
La risposta è alquanto semplice e dipendente dal tipo di metodo che la nostra form di invio dati usa, infatti PHP nella pagina che riceve i dati ci fornisce due array superglobali $_POST e $_GET, i quali contengono rispettivamente i dati inviati con i due metodi.
Nelle versioni di PHP precedenti alla 4.0.qualcosa queste variabili si chiamavano $HTTP_POST_VARS e $HTTP_GET_VARS, che per retrocompatibilità ancora esistono ma sono obsolete, che funzionavano allo stesso identico modo.
Per accedere ai valori contenuti in questi array, che altro non sono che i valori che l'utente ha inserito nei campi della form, dovremo semplicemente chiamare l'array specificando come chiave il nome del campo di cui vogliamo avere il valore, e quindi dato che nel nostro esempio la form aveva GET come metodo le due chiavi dell'array $_GET saranno "utente" e "pass" e avranno i rispettivi valori "user" e "password", ma vediamo nello specifico,con un pò di codice, come potremmo salutare il nostro utente che ha effetuato il login.
<?php
echo "Benvenuto ".$_GET['utente']." la password che hai inserito è ".$_GET['pass'];
?>
echo "Benvenuto ".$_GET['utente']." la password che hai inserito è ".$_GET['pass'];
?>
- per testare il funzionamento e capire meglio eccovi 2 esempi con i 2 diversi metodi di invio dati:
- POST (sorgente)
- GET (sorgetnte)
- e qui i link alle pagine del manuale:
Le Variabili
Le variabili predefinite del linguaggio
Visto le numerose richieste che ho ricevuto ultimamente approfondiamo come accedere ai dati inviati dalle varie tipologie di input, questo perchè certe tipologie ci permettono di fare delle scelte multiple, oppure hanno un modo particolare di passare i dati.
Partiamo dai casi più semplici: - text
- password
- textarea
queste tre tipologie che permettono all'utente di modificare il proprio attributo value tramite inserimento di testo, nella pagina che riceve i dati accederemo al loro valore (supponendo di aver passato i dati con il metodo GET) usando $_GET['nomecampo'].
Se il campo viene lasciato vuoto la chiave 'nomecampo' nell'array $_GET sarà cmq impostata e il valore sarà "" (cioè una stringa vuota).
- select singole
- radio
queste due tipologie che permettono all'utente di selezionare un'opzione di quelle proposte passano il valore dell'opzione selezionata, al quale accederemo semplicemente con $_GET['nomecampo'], allo stesso modo dei tre casi precedenti, con la sola differenza che nel caso precedente l'utente può modificare il valore del campo, mentre in questo caso il valore sarà deciso da chi ha fatto il sito.
A differenza della tipologia precedente il campo di tipo select avrà sempre un'opzione selezionata e passerà sempre il suo valore, mentre i radio se non hanno un defalut checked e non vengono selezionati non passeranno nessun valore e non imposteranno la chiave nell'array $_GET, mentre se ne viene selezionato uno la chiave esisterà e il valore sarà uguale al value del campo (se l'attributo value non è impostato il valore sarà impostato a On).
- select multiple
Le select multiple che come detto prima permettono selezioni multiple se hanno opzioni selezionate impostano una chiave nell'array $_GET corrispondente all valore dell'attributo name (a meno delle parentesi quadre), e grazie alle parentesi imposteranno delle sotto-chiavi nell'array aventi un indice numerico incrementale e come valore il value della stessa.
prendiamo come esempio la seguente select multipla e supponiamo di selezionare la prima e l'ultima opzione
<select name="select[]" multiple>
<option value="1">prima opzione</option>
<option value="2">seconda opzione</option>
<option value="3">terza opzione</option>
</select>
<option value="1">prima opzione</option>
<option value="2">seconda opzione</option>
<option value="3">terza opzione</option>
</select>
e questo sarà l'array $_GET che avremo dopo l'invio dei dati della form:
Array
(
[select] => Array
(
[0] => 1 // il valore della prima opzione
[1] => 3 // il valore dell'ultima opzione
)
)
(
[select] => Array
(
[0] => 1 // il valore della prima opzione
[1] => 3 // il valore dell'ultima opzione
)
)
- checkbox i checkbox funzionano come i radio con la sola differenza che ovviamente non essendo raggruppati per nome possiamo avere delle selezioni multiple.
Il passaggio del valore avviene allo stesso modo dei radio, cioè, se non sono checkati non impostano la chiave di $_GET, se sono checkati e hanno l'attributo value passeranno questo come valore altrimenti se checkati e senza value passeranno On.
Ora per non incappare in Notice o simili per controllare i valori passati da una form innanzitutto useremo la funzione isset() con la quale andremo a controllare che le chiavi nel nostro array siano impostate.
Ad esempio:
<?php
if(isset($_GET['checkbox_1'])){ ..... }
?>
if(isset($_GET['checkbox_1'])){ ..... }
?>
Ritorna alla pagina Articoli


Home










