Form javascript:

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ù pratico per manipolare e restituire i dati senza dover sfruttare il traffico sul web, tuttavia rende il codice visibile ad ogni altro webmaster.

Ogni oggetto che costituisce un form ha un nome ed un valore.
A volte il valore è già preinserito dal programmatore (checked o valori hidden), 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:

url
toolbar		width (larghezza):
Tipo di Pop-Up
In entrata		In entrata nascosto

Codice script:

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" action="#">
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(); 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.

Come gestire i form con il linguaggio javascript

Responsabilità
Link amici

W3C validator

W3C validator CSS