Guida ai tag form e input, e al tag select, elementi di base

« Older Newer »

1Dan

Posted on 26/2/2008, 21:14

Senior Member

Group:: NB Developers

Posts:: 19,328

Status:

Anche se non esiste diritto d'autore sull'HTML, si ringrazia comunque il sito HTML.it, fonte di ispirazione per questa guida

Il tag form & input

Tag form
Una delle caratteristiche più importanti per un eccellente pagina web è la possibilità di interagire tra gli utenti.
Per rendere possibile ciò bisogna fare uso del tag

,ovvero di moduli che hanno come scopo principale,quello di raccogliere informazioni.

Per inserire un modulo,come abbiamo già detto dobbiamo utilizzare il tag ,al quale potremmo aggiungere alcuni attributi per il corretto funzionamento.

Name
Cominciamo dal name.
Inserendo l'attributo name potremmo così dare un nome al nostro modulo.

HTML

<form name="dati">
...
</form>

Action
Con action indicheremo semplicemente la pagina di risposta del modulo,o in casi particolari potremmo inviare i dati di input ad un destinatario impostando la propria email.
Nel primo caso avremmo

HTML

<form name="dati" action="pagina.php">
...
</form>

Nel secondo avremmo:

HTML

<form action="mailto:tuamail@nomeDominio.it?subject=Oggetto" method="POST">
....
</form>

Method
Questo attributo,può assumere due valori:GET e POST.
Nel primo caso avremmo i dati nella barra degli indirizzi poichè i dati verrano inviati alla pagina in un unico step.
Questo metodo però non consente di inviare più di 255 caratteri,quindi è consigliabile per moduli di pochi campi.

HTML

<form action="pagina.php" method="GET">
...
</form>

Nel secondo caso invece i dati non verranno visualizzati dagli utenti nella barra degli indirizzo,ma verranno inviati direttamente alla pagina di risposta.

HTML

<form action="pagina.php" method="POST">
...
</form>

Enctype
Normalmente di default nei form viene riconosciuto come tipo di codifica,quella di testo,per cui se noi intendiamo rimanerlo tale,possiamo anche ignorare quanto segue.
Se vogliamo invece inviare qualcosa di diverso da un testo dovremmo quindi specificare il tipo di codifica.
Nel caso ad esempio volessimo inviare un immagine,utilizzeremo:

HTML

<form name="dati" action="pagina.php" method="post" enctype="multipart/form-data">
...
</form>

A titolo informativo riportiamo anche la versione per il testo:

HTML

<form name="dati" action="pagina.php" method="post" enctype="text/plain">
...
</form>

Target
Come per i semplici collegamenti,è possibile far aprire i dati del form in un altra pagina dal momento che si aggiunge: target="_blank",ovvero:

HTML

<form name="dati" action="pagina.php" method="post" enctype="text/plain" target="_blank">
...
</form>

Tag input
Come avrete potuto vedere tra il tag di apertura e chiusura di form abbiamo lasciato fin ora dei punti sospensivi.
Ora andiamo ad analizzare cosa andrebbe a sostituire a quest'ultimi.Solitamente per compilare un modulo viene usato il tag input,in paerticolare un bottone d'invio..
Il tag input è un particolare tag (come quello delle immagini) che non richiede chiusura e sono dotati di attributi che indicano il nome,tipo e valore.

Come abbiamo già detto ,per inviare i dati di un modulo,si necessita di un bottone d'invio.
La sintassi per tale bottone generico è la seguente:

HTML

<input type="submit" value="Invia">

Come vedete abbiamo attribuito a type il valore submit.

Vi sarà capitato sicuramente di vedere in qualche pagina web un botton di reset,il quale una volta premuto appunto,vi riporta l'input al valore iniziale.
Per ottenere cio possiamo inserire appunto a type il valore reset,in questo modo:

HTML

<input type="text"><input type="reset" value="cancella">

E'possibile inoltre disabilitare i bottoni,o aree di testo inserendo nel tag disabled="disabled".
Un esempio:

HTML

<input disabled="disabled" type="submit" value="Invia">

Oppure

HTML

<input disabled="disabled" type="text" value="Testo">

Avremmo rispettivamente

Potrebbe capitare di volere il proprio input con lo stile del CSS.In tal caso non si dovrà fare altro che inserire l'attributo class come in ogni altro tag,che richiamerà lo stile di qualche selettore.
Es:

HTML

<input name="nome" type="submit" value="Invia" class="forminput">

In questo modo non abbiamo fatto altro che prendere lo stile del selettore del CSS di questo forum:.forminput

Possiamo inoltre sostituire il nostro tipo di bottene/testo con un immagine mettendo type="image" e aggiungendo ogni attributo come il tag img.Avremmo qualcosa di questo tipo:

HTML

<input name="nome" type="image" src="indirizzo_immagine" alt="testo" title="titolo" width="50"
height="50">

Ovviamente ogni attributo è personalizzabile.

Approfondiamo ora l'area di testo.
Come abbiamo visto è possibile ottenere un area di testo con una sintassi molto semplice,tuttavia è possibile inserire altri attributi.
Ad esempio:

HTML

<input type="text" value="qui il tuo testo" size="50" maxlength="100">

In questo caso abbiamo definito con "size" la larghezza dell'area e "maxlength" il numero massimo di caratteri.

Nel caso dovessimo inserire un testo molto più lungo per convenzione,useremo una textarea

HTML

<textarea name="testo" rows="4" cols="50">
Qui puoi scrivere il tuo testo
</textarea>

Questo tag a differenza dell input come vedete deve essere chiuso.
Passiamo ad analizzarlo.
Rows,rappresenta il numero di righe dell'area.Cols indica i numeri di caratteri per riga.

Possiamo inoltre creare un input da password,ovvero un input che mostra degli asterischi al posto dei caratteri:

HTML

<input type="password" maxlength="10" size="20">

Se vogliamo invece rendere la nostra area si sola lettura,inseriamo readonly="readonly"

HTML

<input readonly="readonly" value="Non è possibile scrivere">

Vediamo ora alcuni modi per effettuare delle scelte.
Il primo che vedremo è il checkbox che consente di effettuare scelte multiple,e presenta la seguente sintassi

HTML

<input type="checkbox" >checkbox

checkbox

HTML

<input type="checkbox" checked="checked">checkbox selezionato

checkbox selezionato

HTML

<input type="checkbox" disabled="disabled>checkbox disabilitato

checkbox disabilitato

I "radio button" invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l'altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:

HTML

<input type="radio" name="utenti" value="gruppo1">
<input type="radio" name="utenti" value="gruppo2">

Esempio default

HTML

<input type="radio" name="utenti" value="gruppo1" checked="checked">Radio selezionato

Radio selezionato

HTML

<input type="radio" name="utenti" value="gruppo1" disabled="disabled">Radio disabilitato

Radio disabilitato

Approfondimento:il tag select
Grazie al tag <select> è possibile costruire dei menu a tendina di cui ogni voce deve essere compresa all'interno del tag <option>,il quale non necessita di chiusura e il valore deve essere specificato attravero l'attributo "value" come in ogni caso. Con l'attributo "selected" si può indicare una scelta predefinita:

HTML

<select name="sezioni" >
<option value="http://newsboard.forumfree.net/?f=1509088" selected="selected">Nonsolotabelle </option>
<option value="http://newsboard.forumfree.net/?f=2320877">Guide e codici </option>
<option value="http://newsboard.forumfree.net/?f=2747226">Webtools </option>
</select>

Nel caso di vogliano fare delle suddivisioni in categoria è possibile farlo tramite il tag <optgroup> agendo in questo modo:

HTML

<select name="sezioni" >
<optgroup label="gruppo1">
<option value="http://newsboard.forumfree.net/?f=1509088" selected="selected">Nonsolotabelle </option>
<option value="http://newsboard.forumfree.net/?f=2320877">Guide e codici </option>
<optgroup label="gruppo2">
<option value="http://newsboard.forumfree.net/?f=2747226">Webtools </option>
</select>

E' possibile infine effettuare delle scelte multiple tramite il medesimo tag,ma aggiungendo l'attributo "multiple":

HTML

<select name="sezioni" multiple="multiple">
<option value="http://newsboard.forumfree.net/?f=1509088" selected="selected">Nonsolotabelle </option>
<option value="http://newsboard.forumfree.net/?f=2320877">Guide e codici </option>
<option value="http://newsboard.forumfree.net/?f=2747226">Webtools </option>
</select>

In questo caso tuilizzando il tasto "ctrl" si possono effettuare delle scelte multiple.

Nota Bene

Ricordo che gli attributi "name" sono filtrati sia nei post che in gestione HTML di forumfree.L'attributo "label" è filtrato nei post,ma utilizzabile in gestione HTML.Infine la textarea è utilizzabile solo nei post,ma non in gestione HTML.

Un esempio generale di tutti i tag illustrati e non illustrati,potete trovarli al seguente link:
http://primodan.altervista.org/input_form.html

Questa guida riporta il minimo indispensabile perl'utilizzo del tag form e input.Ovviamente inizialmente potrà sembrare difficile ricordarli,ma con un pò di esercizio tutto dovrebbe diventare più semplice.

"Guida al tag form e input" realizzata da 1Dan in esclusiva per NewsBoard Forum.
E' severamente vietata la copia senza autorizzazione

0 replies since 26/2/2008, 21:14 4119 views