Come creare un sito web – Lezione 10: Come creare i moduli

Tornano le lezioni di Come creare un sito web. Oggi vediamo come creare i moduli.

Fonte Foto: http://blog.imm.cnr.it

Fonte Foto: http://blog.imm.cnr.it



Benvenuti alla decima lezione di “Come creare un sito web“, oggi vediamo come creare ed inserire i moduli nel nostro sito web. Prima di iniziare vediamo però cosa sono. I Moduli, conosciuti anche come Forms, servono per interagire con i propri visitatori.

Infatti grazie a loro possiamo permettere ai nostri visitatori di inserire o richiedere informazioni tramite caselle di testo, menù a scorrimento, spunte o combo box. Questi strumenti sono molto utilizzati quando vogliamo creare un questionario.

Ok allora siamo pronti per andare a vedere come funzionano i tag per creare un modulo.

 

 

Il TAG  “<form>…..</form>”

Il primo tag che andiamo a vedere è <form>, questo è il tag fondamentale  per creare il nostro modulo. Serve per definire dove inizia e dove finisce il nostro modulo, come al solito il tag di apertura è <form> e quello di chiusura è </form>.  Naturalmente per funzionare ha bisogno di alcuni attributi altrimenti non funziona.

La nomenclatura è la seguente: <form attributi> ….. </form>. Gli attributi che possiamo affiancare a questo tag sono: action, method ed enctype.

 

ACTION

L’attributo action serve per definire “l’azione” che vogliamo far eseguire al nostro modulo. Solitamente le azioni impostate sono un URL che specifica la locazione del file (o eventualmente uno script) al quale vengono inviati i dati del modulo oppure un indirizzo email a cui inviare i dati.

METHOD

Questo attributo definisce le modalità per accedere all’azione definita nell’attributo action, le modalità sono due: post e get. L’opzione “get” è utilizzata quando il nostro modulo non necessita di elaborazioni esterne (esempio: viene eseguita normalmente sull’URL che segue l’attributo HREF di un marcatore <a> all’interno di una pagina HTML generica), mentre l’opzione “post” viene utilizzata in tutti gli altri casi (esempio: viene eseguito dal Client di Posta solo in risposta ad una form).

ENCTYPE

Questo attributo specifica il tipo di media utilizzato per codificare i dati del modulo,  per default è di tipo MINE.

A questo punto vediamo esempio di codice per creare il nostro modulo:

<form method=”get” action=”/cgi-bin/ESEMPIO.xx” enctype=”text/plain”>…..</form>

Ora andiamo a vedere come possiamo riempire quei punti tra i due tag <form>…</form>.

Il TAG  “<label>…..</label>”

Questo tag serve a descrivere un campo input. Anche questo ha bisogno di un tag di chiusura che sarà </label>. Andiamo a vedere un esempio di codice per capire meglio l’utilizzo.

<label for=”nome”> Nome:</label><input id=”nome” type=”text”>
<label for=”maschio”>Maschio : </label><input id=”maschio” name=”sesso” type=”Radio”>
<label for=”femmina”>Femmina : </label><input id=”femmina” name=”sesso” type=”Radio”>

L’attributo “for” specifica per quale nome del campo viene creata la label, mentre l’attributo “input” permette di introdurre o modificare dati in diversi modi a seconda del tipo di input utilizzato. L’input viene definito tramite l’attributo “type”.

Nel campo “input” possiamo definire i seguenti valori: align, checked, maxlength, name, size, src, typevalue. L’HTML5 ne ha introdotti nuovi, se volete vedere quali sono andare qui .

L’attributo “type” per default ha il valore “text” ovvero testo libero, gli altri valori selezionabili sono: button, checkbox, file, hidden, image, password, radio, reset, submit e text. Se volete sapere il loro utilizzo scaricate la “mini-guida” qui .

Se l’articolo è stato di vostro gradimento condividetelo il più possibile su tutte le piattaforme di Social Network.

Ad maiora

 


Andrea Toxiri

Info su Andrea Toxiri

Il mio esordio nel mondo informatico risale al 1994 con un favoloso Amiga 500, invece il mio primo "giro" sul web risale al 1999 grazie a un modem 56k ... dal quel momento la mia vita è sempre stata online. Dal 2009 ho approfondito le mie conoscenze sulla comunicazione digitale (blog, SEO, siti web, Social Media, web marketing). Gestisco due blog dove si parla di Tecnologia, Social Media, Comunicazione e Web Marketing.
Con le parole chiave , , , , , , , , , , , , , , , . Aggiungi ai preferiti : permalink.