|
|
Form:
N.B.
Per capire l'esempio prodotto dovete sapere come creare i
form in HTML.
Ad ogni webmaster capita di dover interagire con i form. Sicuramente è il metodo più valido
e sicuro (a volte..) per manipolare e restituire i dati.
Ogni oggetto che costituisce un form ha un nome ed un valore.
A volte il valore è già preinserito dal programmatore (checked o valori hidden (nascosti)),
spesso è quello inserito dall'utente.
La cosa più importante da comprendere è che per manipolare i dati inseriti in un form
dobbiamo conoscere la 'strada' per arrivare ai dati.
Una volta che conosciamo la 'strada' la inseriamo nel programma javascript al posto
dei dati reali.
Per capire cosa abbiamo appena detto analizziamo una parte del codice javascript che abbiamo
inserito in un form che rilasciava
(prima di modificarlo) del codice js per produrre finestre pop-up.
ESEMPIO:
Vediamo il codice, ma non vi impressionate!!
P.S.Il codice del form è posto sotto il codice del programma javascript.
SCRIPT:
<script> Inizio script
<!--
function crea(key){ Crea la funzione
var a La variabile 'a' guarda se toolbar è cliccato
if (key.primo.checked) Ciclo if su 'a'
a=1;
else
a=0;
var g='Risultato:\r\n\n'; Creo la variabile 'g' e gli associo un messaggio
g+='Hai scelto in entrata Url='+key.undici.value+' Toolbar='+a+' Width='+key.settimo.value+''; Sommo questo messaggio al precedente, ora g è più lunga..
var h='Risultato:\r\n\n'; Creo la variabile 'h' e gli associo un messaggio
h+='Hai scelto in entrata nascosto Url='+key.undici.value+' Toolbar='+a+' Width='+key.settimo.value+''; Sommo questo messaggio al precedente, ora h è più lunga..
if (key.simo[0].checked) Se 'in entrata' è cliccato il valore di areatext è 'g'
key.sorgente.value = g ;
if (key.simo[1].checked) Se 'in entrata nascosto' è cliccato il valore di areatext è 'h'
key.sorgente.value = h;
}
-->
</script>
FORM:
Il form è organizzato con una tabella.
<FORM name=key action=webdesign>
<TABLE border="1" bgColor="#085664">
<TR>
<TD align="right">
url
</Td>
<TD colspan="3">
<INPUT type="text" size=25 value="http://"name=undici>
</TD>
</TR>
<TR>
<TD align="right">
toolbar
</TD>
<TD>
<input name="primo" type="checkbox">
</TD>
<td align="right">
width (larghezza):
</td>
<td>
<INPUT type="text" size=3 value="300" name=settimo>
</td>
</TR>
<TR>
<TD align="center" colspan="4">
Tipo di Pop-Up
</TD>
</TR>
<TR>
<TD align="right" colspan="2">
In entrata
<input name="simo" type="radio" value="uno" checked>
</TD>
<TD align="right">
In entrata nascosto
<input name="simo" type="radio" value="due">
</TD>
</TR>
<TR>
<TD align="center" colspan="4">
<TEXTAREA name=sorgente rows=5 cols=50>
</TEXTAREA>
</TD>
</TR>
<TR>
<TD align="center" colspan="4">
<INPUT onclick=crea(key); type=button value="Crea codice">
<INPUT type=reset value=Reset name=cancella>
</TD>
</TR>
</TABLE>
</form>
Spiegazione:
Con questo semplice esempio possiamo già intuire il funzionamento, l'unico problema è che
per ogni tag che influenza un form c'è una procedura ed una 'strada' diversa.
Analizziamo ogni tag:
Form:
<FORM name=key>
Con questo tag inizializziamo un form e gli associamo un nome. Il nome dato può servire a
trovare il percorso dati.
- Come si accede (strada): document.nomeform
- Proprietà: action, elements[], encoding, length, method, name, target.
- Metodi: handleEvent(), reset(), submit().
- Gestori di eventi: onReset, onSubmit.
Text:
<INPUT type="text" size=25 value="http://"name=undici>
Text è una casella di una sola colonna in altezza dove possiamo inserire del testo, solitamente
dall'utente, ma non è detto.
- Come si accede (strada): document.nomeform.nometext
- Proprietà: defaultValue, form, name, type, value.
- Metodi: blur(), focus(), handleEvent(), select().
- Gestori di eventi: onBlur, onChange, onFocus, onSelect.
Checkbox:
<input name="primo" type="checkbox">
Il checkbox è soltanto una casella cliccabile, pertanto può avere solo due valori.
- Come si accede (strada): document.nomeform.nomecheckbox
- Proprietà: checked, defaultChecked, form, name, type, value.
- Metodi: blur(), click(), focus(), handleEvent().
- Gestori di eventi: onBlur(), onClick(), onFocus().
Radio:
<input name="simo" type="radio" value="uno" checked>
<input name="simo" type="radio" value="due">
if (key.simo[0].checked)
key.sorgente.value = g ;
if (key.simo[1].checked)
key.sorgente.value = h;
Il pulsante radio è una scelta che dobbiamo fare, comunque vada almeno uno risulterà sempre
cliccato.
- Come si accede (strada): document.nomeform.nomeradio oppure document.nomeform[numero radio partendo da zero]
- Proprietà: checked, defaultChecked, form, name, type, value.
- Metodi: blur(), click(), focus(), handleEvent().
- Gestori di eventi: onBlur, onClick, onFocus.
Textarea:
<TEXTAREA name=sorgente rows=5 cols=50>
</TEXTAREA>
Textarea è una casella dove possiamo inserire del testo, sia per farlo leggere sia per dare
il risultato dello script. Un esempio sono le leggi che in ogni form di registrazione dobbiamo
convalidare.
- Come si accede (strada): document.nomeform.nometextarea
- Proprietà: defaultValue, form, name, type, value.
- Metodi: blur(), focus(), handleEvent(), select().
- Gestori di eventi: onBlur, onChange, onFocus, onSelect.
Button:
<INPUT onclick=crea(key); type=button value="Crea codice">
- Come si accede (strada): document.nomeform.nomepulsante
- Proprietà: form, name, type, value.
- Metodi: blur(), click(), focus(), handleEvent().
- Gestori di eventi: onBlur, onClick, onFocus, onMouseDown, onMouseUp.
Reset:
<INPUT type=reset value=Reset name=cancella>
- Come si accede (strada): document.nomeform.nomepulsante
- Proprietà: form, name, type, value.
- Metodi: blur(), click(), focus(), handleEvent().
- Gestori di eventi: onBlur, onClick, onFocus.
|
|
|
Script
| |
Motore di ricerca script
|
|