HTML Form

Linguaggio HTML e moduli


Prof. Giuseppe Sportelli

Introduzione ai Form HTML , Linguaggio di Script
lato Client, Applicazione di Stili CSS

Il problema

In internet sono presenti
spessi moduli come questo
che richiedono l'inserimento di dati.
Questi dati una volta elaborati sono inviati
Al sito web che propone il modulo.

Che cos'è il Form


Un modulo ove l'utente inserisci delle
informazioni

L'utente ha la possibilità di inviare le
informazioni o di cancellarle

Le informazioni possono dopo l'invio avere due
tipi di elaborazioni o entrambe:

Esecuzione programma client javascript, action
script, vbscript

Esecuzione programma server php, asp, perl, c##,
java

Tipi di interazioni Form HTML


Ogni modulo HTML può essere utilizzato per:

Inviare un ordine di acquisto

Inviare una e-mail via Web

Inviare Foto su Facebook, Twitter, ecc

Scrivere e inviare un articolo al proprio blog

Eseguire una transazione bancaria

In tutti questi casi le informazioni sono
elaborate dal sito Web e la risposta viene
inviata all'utente

Tag <Form>


Il tag per aprire in una pagina HTML un modulo
è il tag <FORM> … </FORM>
All'interno del tag <FORM>
è possibile inserire i controlli di modulo che
sono distinti in:

Caselle di testo e Aree di Testo

Pulsanti di comando Button

Controlli Casella Combinata e Lista per più elemeti

Pulsanti di scelta singola o multipla

Controllo Upload di File

Attributi del Tag <FORM>
p

Il tag <FORM> prevede una serie di attributi che sono:

Action ovvero il nome del programma server da eseguire
per esempio programma.php, programma.java

Method che può essere POST o GET, quando l'utente
invia i dati con il GET i dati sono inviati sotto forma di URL
nella barra indirizzi, mentre con il POST sono codificati e
inviati come flusso dati e quindi anche se in chiaro più
sicuro

Target ovvero in quale pagina deve essere aperto la
risposta all'invio

Name il nome del FORM che può essere utilizzato in un
programma per richiamarne il suo contenuto.

Tag per i controlli


Tutti i tag di modulo si codificano con <INPUT> che in HTML
non prevede chiusura
La sintassi del Tag <INPUT> è:
<INPUT name=”nome” id=”nome simbolico anche uguale a quello
del name” type=”tipo controllo” value=”testo iniziale”
size=”dimensione”>

In tipo controllo possiamo scegliere: text, button, subchmit,
reset, combobox, listbox, chuneckbox, radio,label e altri,
L'attributo size indica la dimensione in caratteri del controllo,

L'attributo value il valore iniziale del testo del controllo se
controllo testo, o l'etichetta di un pulsante, o di un'etichetta.

L'attributo id identifica un controllo in uno script

Un primo modulo in HTML

Scrivere in un documento HTML
Per provare il codice non
<html> Fare copia e incolla
<head>Primo Form</head>
<title> Primo modulo</title>
<body><table>
<form name=”primo”>
<tr><td>Nome</td><td><input id=”nome” type=”text” name=”nome”
value=”digita un testo” size=”30”></td></tr>
<tr><td>Messaggio </td><td><textarea id=”mess” name=”mess”
rows=”3” cols=”30”>Digita Messaggio</textarea></td></tr>
<tr><td><input type=”submit” id=”invia” name=”invia”
value=”invia></td><td><input type=”reset” name=”cancella”
id=”cancella” value=”cancella tutto”></td></tr></table>
</form></body></html>

Come costruire l'azione ?


Occorre scrivere un programma in javascript o
vbscript per lato client (in genere per convalida
dell'input ovvero se i dati inseriti sono del giusto
formato)

Oppure scrivere un programma in linguaggio
PHP, Java, ASP da far eseguire sul server
all'invio del modulo

Il nostro primo Script

Dopo il tag <HEAD> occorre inserire il tag <SCRIPT> ..
</SCRIPT>
Nel Tag <SCRIPT> è sempre obbligatorio l'attributo
language=JavaScript o Vbscript a seconda del
linguaggio da utilizzare.
Un esempio di script è
<script language="JavaScript">
function saluto (){
alert("ciao "+ nome.value)
return true;};
</script>

Come Modificare la pagina Web

Per eseguire il codice Javascript nel tag
<FORM> occorre inserire l'attributo Onsubmit
che permette di dire al Browser che quando
l'utente fa clic su Invia si esegue lo script

In altri termini alla pagina HTML aggiungere
<FORM … Onsubmit=”return saluto()” action=””
method=”post”

Questa modifica consente di eseguire lo script

Spiegazione dello Script

<script 
Ogni script deve dichiarare un
nome di funzione;
language="JavaScript">
function saluto (){ 
L'apertura della funzione avviene
con le parentesi graffe;
alert("ciao "+ nome.value)
return true;}; 
La funzione alert è una finestra di
dialogo che invia il messaggio
</script> ”ciao” più il nome che è stato
inserito nel primo campo del form;

La chiamata return restituisce se lo
script è andato a buon fine il
controllo al Browser;

E' utile notare la chiamata del
controllo <INPUT> viene effettuata
con il nome del suo ID seguito
dall'attributo value.

Fine Lezione
Grazie per l'attenzione
Prof. Giuseppe Sportelli
Www.giuseppesportelli.it
Revisione 1.0 Feb2013

HTML Form

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a HTML Form

Semelhante a HTML Form (20)

Mais de I.S.I.S. "Antonio Serra" - Napoli

Mais de I.S.I.S. "Antonio Serra" - Napoli (20)

HTML Form