Please Wait
Cosa Cerchi?  

Lezione 06 - Form e Javascript

I Form

In questa lezione vedremo i form, cioé lo strumento che ci consente di richiedere dati all'utente collegato al nostro sito ed eventualmente elaborarli.
In un form posso inserire, oltre a del testo che spiega il significato dei campi da inserire, anche una serie di diversi campi tra i quali:

  • campi di testo
  • checkbox
  • radiobutton
  • liste di selezione
  • bottoni
I form si creano mediante il tag <form> all'interno del corpo della pagina (<body>).
Vediamo subito un esempio completo:

<body>

  <form name="MioForm" action="pagina.asp" method="get">
    Alcuni Campi di testo:<br />
    Nome Utente:
    <input type="text" name="nome_utente" size="15" value="Ugo" maxlength="20" />
    <br />
    Password:
    <input type="password" name="password_utente" size="15" maxlength="20" />

    <hr />

    Una lista di selezione multipla:
    <select name="Interessi" size="5" multiple="multiple">

       <option value="1" selected="selected">Libri</option>
       <option value="2" selected="selected">Musica</option>
       <option value="3">Sport</option>

    </select>

    <hr />

    Una lista di selezione singola:
    <select name="sesso" size="1">

       <option value="M" selected="selected">Maschio</option>
       <option value="F">Femmina</option>

    </select>

    <hr />

    CheckBox: <br />
    <input type="checkbox" name="interes_chk" value="1" />Libri
    <br />
    <input type="checkbox" name="interes_chk" value="2" checked="checked"/>Musica
    <br />
    <input type="checkbox" name="interes_chk" value="3" checked="checked"/>Sport

    <hr />

    Radio Button: <br />
    <input type="radio" name="sesso_rd" value="M" />Maschio
    <br />
    <input type="radio" name="sesso_rd" value="F" checked="checked" />Femmina

    <hr />

    Bottoni:
    <input type="reset"  name="btnReset"   value="Bottone Reset"   onClick="#" />
    <input type="button" name="btnNormale" value="Bottone Normale" onClick="#" />
    <input type="image"  name="btnImage"   src="immagine.gif"      onClick="#" />
    <input type="submit" name="btnSubmit"  value="Bottone Submit"  onclick="#" />

  </form>

</body>

Ecco il risultato:
esempio form

Come possiamo notare dall'esempio precedente il tag che consente di creare campi di input è <input>.
A seconda dell'attributo type specificato, tale elemento si trasforma in campo di testo, password, checkbox, radio button o bottone.
Nella tabella che segue sono riassunti i valori che può assumere l'attributo type:

Valore Risultato
text
password
checkbox
radio
button
reset
submit

Nell'esempio viene fatto riferimento anche ad altri attributi del tag input, vediamoli uno per uno:

Attributo Significato
name serve per dare un nome all'elemento di input per poterlo poi utilizzare negli script (lato server o client, li affronteremo prossimamente)
value indica il valore del campo di input.
size indica la dimensione del campo di input.
maxlength indica il numero massimo di caratteri inseribili in un campo di input.
selected nelle liste indica l'opzione selezionata di default
checked nei checkbox e nei radiobutton indica le opzioni selezionate di default
onClick indica la procedura (script) da eseguire allo scatenarsi dell'evento click sul bottone.

L'altro tag che consente di generare liste di selezione singola o multipla è <select>.
All'interno di questo elemento ogni valore che si può selezionare è indicato mediante l'apposito tag <option>

Migliorare i Form

Esitono altri due elementi (tag) che consentono di organizzare per aree e descrivere meglio i campi dei nostri form.
Il primo tag <label> consente di specificare un'etichetta di testo per un campo di inserimento.
Il secondo tag <fieldset> consente di raggruppare in un rettangolo elementi di input aventi lo stesso significato.
Vediamo un esempio:

<body>

<form name="MioForm">
<fieldset>
<legend>
Sesso:
</legend>
<input type="radio" name="sesso" id="male" value="M" />
<label title="individuo di sesso maschile" for="male">Maschio</label>
<br />
<input type="radio" name="sesso" id="female" value "F" />
<label title="individuo di sesso femminile" for="female">Femmina</label>
</fieldset>
</form>

</body>

Risultato:
altro esempio form

Come si può notare dall'esempio proposto, è possibile effettuare uno o più raggruppamenti di campi di input (nell'esempio i radio button per la scelta del sesso) mediante l'apposito tag <fieldset> e specificare (opzionale) il titolo del raggruppamento mediante il tag <legend>.
Con il tag <label invece si possono specificare delle etichette esplicative per ogni singolo campo di input (una e una sola per ogni campo). Ogni etichetta può altresì indicare al passaggio del cursore del mouse altre informazioni aggiuntive (nell'esempio appare la scritta "individuo di sesso maschile/femminile").
Si noti anche che con le label, si ha lapossibilità di cliccare su di esse per selezionare il radio button o il checkbox associato rendendo più comoda per l'utente la selezione del campo stesso.
L'associazione tra label e campo di input avviene mediante l'attributo for del tag <label>. Il valore dell'attributo deve essere identico a quello specificato nell'attributo id del tag <input>.

Javascript

Con il termine Javascript si indica un linguaggio di programmazione interpretato direttamente dal browser in uso (come avviene per i tag e gli stili) che consente di creare piccole porzioni di "codice" di programmazione per modificare e rendere interattivo il contenuto delle nostre pagine.
Si tratta di un vero e proprio linguaggio di programmazione, cioé un vocabolario di istruzioni che possiamo dare al nostro browser per fargli eseguire determinate operazioni.
Cominciamo con un esempio facile per capire meglio. Supponiamo di voler creare una maschera (form) di accesso al sito mediante nome utente e visualizzare un messaggio di benvenuto all'utente collegato.

<html>
<head>
<title>Prova Javascript</title>
<script language="Javascript">
	function Benvenuto()
	{
		var utente;
		utente = document.MioForm.InputUtente.value;
		alert('Benvenuto ' + utente);
	}
</script>

</head>

<body>
<form name="MioForm">
  Nome Utente:
  <input type="text" id="InputUtente" size="20" />
  <input type="button" name="btnEntra" value="Entra" onClick="Benvenuto()" />
</form>
</body>
</html>

Il risultato è una pagina con un campo di testo nel quale l'utente può inserire il suo nome e un bottone che visualizza il messaggio di benvenuto come mostrato nella seguente immagine:
esempio javascript
Vediamo di capire meglio cosa abbiamo scritto. Come si può notare nella testata del documento (head) abbiamo inserito il tag <script> che ci permette di dichiarare le istruzioni javascript che ci servono.
L'attributo language di <script> indica il linguaggio utilizzato per dare istruzioni; normalmente si usa Javascript.
Nel codice Javascript abbiamo definito una Funzione (function) il cui nome è "Benvenuto" che verrà richiamata al verificarsi dell'evento click (attributo onClick) del bottone.
Nella funzione viene dichiarata una variabile (var) chiamata "utente" che è un area di memoria che ci serve per contenere il valore del campo di input. Infatti nella linea successiva con l'operatore di attribuzione "=" indichiamo che la variabile "utente" vale il valore del campo InputUtente della form MioForm del documento (document).
Infine visualizzamo il messaggio con l'apposita funzione alert che richiede come parametro il messaggio da visualizzare. Il messaggio è costituito da una "somma" (+) di parole (stringhe) che sono la costante "Benvenuto " e il valore della variabile "utente".
 

Prossimamente

Alcuni concetti relativi alla programmazione ed al linguaggio Javascript possono risultare un po' complessi inizialmente.
Nelle prossime lezioni verranno approfonditi meglio i significati di variabile, di tipo di variabile e una serie di istruzioni del linguaggio javascript.

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!