Tag: form
Form highlighting
Dopo l'autofocus, altro script a mio parere utilissimo è quello dell'highlighting degli input field e delle textarea, ovvero un semplice meccanismo javascript + css che permette di evidenziare il campo della form attualmente in uso. Vi propongo una funzione sviluppata in maniera che sia abbastanza adattabile ai diversi casi.
JavaScript:
-
window.onload = function(){
-
/*applico l'highlight a tutti i campi di input*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
for(i=0; i<inputFields.length; i++){
-
var field = inputFields.item(i);
-
if ( field != undefined){
-
if ( field.type=="text" || field.type=="password" ){
-
/*onfocus cambio la classe corrente con quella focus*/
-
field.onfocus = function(){this.className="focus";}
-
/*onblur ripristino la classe di default*/
-
field.onblur = function(){this.className="";}
-
}
-
}
-
}
-
/*stesso vale per le textarea*/
-
var textareas = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var textarea = textareas.item(i);
-
textarea.onfocus = function(){this.className="focus";}
-
textarea.onblur = function(){this.className="";}
-
}
-
}
Chiaramento a questo script va assocciato un opportuno foglio di stile con almeno una classe focus.
CSS:
-
input.focus{
-
border: 1px solid #a00;
-
}
-
textarea.focus{
-
border: 1px solid #a00;
-
}
-
input, textarea{
-
padding: 1px;
-
background-color: #eee;
-
border: 1px solid #999;
-
}
Visto che sostenere l'utilità di questi script può essere discutibile, vi propongo un esempio completo di una tipica form di contatti.
N.B: Questi script non trattano campi del tipo checkbox, ma in quel caso bisognerebbe studiare una soluzione ad hoc che evidenzi l'intera area contente tutti i radio button o checkbox e non il singolo, poichè la check box o i radio button sono uno o più valori per un campo.
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Autofocus e form usability
Leggendo l'articolo di Diego, Accessibilità ed usabilità nelle form, mi sono risorte in mente alcune questioni sulle form che reputo interessanti.
Prima fra tutte l'autofocus, uno script muove il cursore dell'utente direttamente su uno specifico campo di input al caricamento della pagina, come avviene in Google. Per il form proposto nell'articolo sopra citato lo script sarebbe:
JavaScript:
-
/*window.onload equivale all'evento onload del tag body*/
-
window.onload = document.forms[0].s.focus();
I problemi sorgono in quelle pagine in cui convivo più forms, spesso per esempio una form di login e una di ricerca. Capita quindi che l'utente vorrebbe autenticarsi, lo script sposta il cursore sul campo di ricerca e l'utente finito di digitare lo username compone la password, così oltre alla perdita di tempo si aggiunge magari la vista in chiaro della password nel campo di ricerca. Per risolvere questo problema riporto uno script che ho ritoccato in modo da renderlo più generico.
JavaScript:
-
window.onload=function(){
-
var isfocused = false;
-
/*ottengo tutti i tag input della pagina HTML*/
-
var inputFields = document.getElementsByTagName("INPUT");
-
/*scorro con un ciclo for ogni elemento della nodeList*/
-
for(i=0; i<inputFields.length; i++){
-
var current = inputFields.item(i);
-
/*considero solo gli elementi definiti e di tipo text*/
-
if(current != undefined){
-
if(current.type == "text" || current.type == "password")
-
{
-
/*controllo se nessun valore è stato cambiato*/
-
if(current.value != current.defaultValue){
-
isfocused = true;
-
}
-
}
-
}
-
}
-
var textarea = document.getElementsByTagName("TEXTAREA");
-
for(i=0; i<textareas.length; i++){
-
var current = textareas.item(i);
-
if(current !== undefined){
-
if(current.value != current.defaultValue){
-
isfocused = true;
-
}
-
}
-
}
-
/*se nessun valore di default cambia scatta l'autofocus*/
-
if(!isfocused){
-
inputFields.item(0).focus();
-
}
-
}
Testato su:
Firefox 2.0.0.3 (Linux)
Mozilla 1.7.13 (Linux)
Epiphany 2.16.1 (Linux)
Galeon 2.0.2 (Linux)
IE 6.0 (Linux)
Accessibilità ed usabilità nelle form
Dopo aver visto come creare e far funzionare un semplice motore di ricerca, ora vedremo, usando pochi accorgimenti, come renderlo accessibile via codice HTML.
Form iniziale:
HTML:
Il fatto di usare solo elementi strutturali usando l'elemento "fieldset" aiuta sicuramente l'interpretazione della pagina da parte dei browser testuali e tecnologie assistive. L'elemento "legend" servirà a dare un nome ai vari gruppi della form. Nel caso specifico avremo bisogno di un solo "legend".
HTML:
-
<legend>Modulo di Ricerca</legend>
-
</fieldset>
Occorre associare delle etichette (label) significative ai relativi input e legarle con l'attributo "for" al corrispettivo "id" dell'input.
Occorre controllare, soprattutto in caso di form molto complesse, che vi sia un ordine logico e che questo possa essere seguito anche attraverso la navigazione da tastiera spostando il focus delle azioni con il tasto "tab". Per far questo useremo l'attributo "tabindex".
HTML:
Per far si che le "input" siano accessibili anche usando le combinazioni dei tasti di scelta rapida, daremo loro l'attributo "accesskey" indicando nel label corrispettivo la lettera tra parentesi quadre.
HTML:
NB: IE: tasto ALT + numero o lettera tra parentesi + INVIO. FF: ALT + SHIFT + numero o lettera tra parentesi. Apple: componendo la combinazione del tasto CMD ("tasto mela") + numero o lettera tra parentesi.
Quindi il risultato finale del nostro semplice form sarà :
HTML:
Per approfondire:
Utilizzare il Tab in una Textarea
Nel normale funzionamento di un form il tasto tab passa da un campo all'altro.
Capita però (come in questo blog) di dover dare la possibilità a chi scrive di inserire del codice e tutti sappiamo quanto sia FONDAMENTALE l'indentazione per renderlo comprensibile.
O ci si affida all'intelligenza di chi scrive, sperando che utilizzi in modo coerente gli spazi o il copia e incolla, oppure si utilizza questa funzione (via l4x.org ):
JavaScript:
-
function insertTab(event,obj) {
-
var tabKeyCode = 9;
-
if (event.which) // mozilla
-
var keycode = event.which;
-
else // ie
-
var keycode = event.keyCode;
-
if (keycode == tabKeyCode) {
-
if (event.type == "keydown") {
-
if (obj.setSelectionRange) { // mozilla
-
var s = obj.selectionStart;
-
var e = obj.selectionEnd;
-
obj.value = obj.value.substring(0, s) + "\t" + obj.value.substr(e);
-
obj.setSelectionRange(s + 1, s + 1);
-
obj.focus();
-
} else if (obj.createTextRange) { // ie
-
document.selection.createRange().text="\t"
-
obj.onblur = function() { this.focus(); this.onblur = null; };
-
} else {
-
// unsupported browsers
-
}
-
}
-
if (event.returnValue) // ie ?
-
event.returnValue = false;
-
if (event.preventDefault) // dom
-
event.preventDefault();
-
return false; // should work in all browsers
-
}
-
return true;
-
}
HTML:
-
<textarea onkeydown="return insertTab(event,this);" onkeyup="return insertTab(event,this);" onkeypress="return insertTab(event,this);" rows="30" cols="80"></textarea>
