Input
Il tag input è il più usato in diversi casi, specialmente per quanto riguarda i campi dei form, oltre a tante altre opzioni.
Con il tag input si possono quindi creare diversi elementi del form, specificando i diversi valori per gli attributi.
Qui un elenco dei vari attributi dell'input:
| Attributo | Descrizione |
|---|---|
| class | la classe CSS |
| id | identifica l’elemento; necessario per certe restrizioni XHTML |
| lang | la lingua |
| style | lo stile css da applicare |
| title | il titolo |
| tabindex | l'indice di tabulazione |
| accept | i tipi mime accettati |
| align | l'allineamento del testo (funziona solo se type="image") i valori applicabili sono: - left - right - top - texttop - middle - absmiddle - baseline - bottom - absbottom Non utilizzabile nell'XHTML Strict |
| alt | testo alternativo (funziona solo se type="image") |
| checked | se ceckato (solo con type="checkbox" e type="radio" ) |
| disabled | per disabilitare l'input |
| maxlength | numero massimo di caratteri (solo con type="text") |
| name | il nome del campo |
| readonly | di sola lettura |
| size | la dimensione (in numero di caratteri) |
| src | l'URL dell'immagine (funziona solo se type="image") |
| type | il tipo di input i Valori applicabili sono: - button - checkbox - file - hidden - image - password - radio - reset - submit - text |
| value | il valore contenuto |
Per creare un semplice input di testo è sufficiente specificare
<input type="text">
ed aggiungendo del testo nel campo
<input type="text" id="tuoTesto" value="testo dell'input">
mentre per creare un input button scriveremo
<input type="button">
ed aggiungendo un collegamento ipertestuale
<form action="http://scriptingweb.com" method="post"> <input type="submit" value="accedi su scriptingweb" class="codebuttons"> </form>
Per aggiungere un bottone reset, cioè per cancellare il contenuto dell'input, adopereremo
<form action=scrw>
<input type="text">
<input type="reset" value="cancella">
</form>
E' possibile selezionare un limite massimo di lettere per l'input, ovvero con l'attributo maxlenght
<input type="text" id="scrw" name="name" value="script" maxlength="10" />
In questo caso è stato preimpostato un limite di 10 caratteri, che potrà variare in base alle preferenze.
Grazie all'attributo readonly si potrà impostare l'input in sola lettura, cioè non sarà possibile modificare nulla nemmeno in locale.
<input readonly="readonly" size="25" value="input readonly" id="scrw" />
Per disabilitare un input si ricorre all'attributo disabled
<input disabled="disabled" size="30" value="input disabled" id="scrw" />
e lo stesso su un bottone, come ad ogni altra forma di input
<form action="http://scriptingweb.com" method="post"> <input type="submit" value="accedi su scriptingweb" disabled="disabled" class="codebuttons"> </form>
L'input checkbox serve a dare la possibilità all'utente di effettuare anche o solo scelte multiple.
<form action=scrw> <fieldset> <legend>Titolo legend</legend><br> <input type="checkbox" id="scrw1" value="xml"/> xml <br> <input type="checkbox" id="scrw2" value="javascript"/> javascript <br> <input type="checkbox" id="scrw3" disabled="disabled" value="ajax"/> ajax <br> <input type="checkbox" id="scrw4" value="dtd"/> dtd </fieldset> </form>In questo caso abbiamo utilizzato la forma checkbox, riconoscibile dai punti quadrati, ed abbiamo disabilitato un opzione, precisamente l'opzione Ajax.
La forma radio button consente di effettuare una scelta unica, quindi automaticamente una scelta esclude l'altra, ricordandosi che per ottenere questo effetto i campi devono avere lo stesso nome e differente valore.
Di seguito un ulteriore esempio racchiudendo ancora gli input tra i tag legend e fieldset
<form> <fieldset> <legend>Titolo legend</legend> DHTML <input type="radio" name="scrw" value="dhtml"/> STYLESHEET <input type="radio" name="scrw" value="stylesheet"/> FILTERS <input type="radio" name="scrw" value="filters"/> XHTML <input type="radio" name="scrw" value="xhtml"/> </fieldset> </form>
Senza dilungarsi troppo nel discorso form e moduli torniamo alla base degli input specificando il campo password.
Il campo password mostra degli asterischi (o palline) al posto dei caratteri inseriti.
La codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell'utente. L'invio dei dati attraverso il Web, se non vengono adottate altre misure di sicurezza, avviene in chiaro.
<input type="password" maxlength="12" size="20" value="mia_password" id="scrw" />
In questo caso abbiamo impostato un limite massimo di 12 caratteri per l'input, ma esso potrà logicamente variare per ogni circostanza.
Per utilizzare un immagine nell'input si adopererà:
<form action=http://www.scriptingweb.com> <input id="Invia" type="image" src="link_immagine" alt="invia il modulo" title="invia il modulo"> </form>Non specificando il tipo di input, esso automaticamente si sottoporrà come submit.
Nel caso ci sia la necessità di passare dei parametri "di servizio", senza far percepire la loro presenza all'utente, sarà possibile utilizzare dei campi nascosti, presenti all'interno del form ma invisibili all'utente.
Questo grazie all'attributo input type="hidden" (hidden ha lo stesso valore di nascosto)
<input type="hidden" name="scrw" value="www.scriptingweb.com">
L'attributo file permette di inviare un file al server, nel caso in cui la pagina di risposta sia stata programmata correttamente.
<form action=scriptingweb> <input name="fileUtente" type="file" size="22"> </form>
Ecco la lista degli eventi applicabili al tag input:
| Attributo | Valore | Descrizione | DTD |
|---|---|---|---|
| onblur | script | Quando un elemento perde il focus | all |
| onchange | script | Quando un elemento cambia | all |
| onclick | script | Quando ci si clicca | all |
| ondblclick | script | Quando avviene il doppio click del mouse | all |
| onfocus | script | Quando un elemento prende il focus | all |
| onmousedown | script | Quando un pulsante del mouse viene premuto | all |
| onmousemove | script | Quando il puntatore del mouse si muove | all |
| onmouseout | script | Quando il puntatore del mouse esce dall'elemento | all |
| onmouseover | script | Quando il puntatore del mouse è dentro l'elemento | all |
| onmouseup | script | Quando un pulsante del mouse viene rilasciato | all |
| onkeydown | script | Quando una lettera della tastiera viene premuta | all |
| onkeypress | script | Quando una lettera della tastiera viene premuta e poi rilasciata | all |
| onkeyup | script | Quando una lettera della tastiera viene rilasciata | all |
| onselect | script | Quando un elemento viene selezionato | all |
Per visualizzare l'elenco completo degli eventi XHTML entra qua.
top