60 directrices de usabilidad para formularios

0 COMENTARIOS -  Publicado hace 22 meses -  Clasificado en: , ,

Interesante y extensa recopilación de directrices para realizar formularios usables:

1. Pida sólo la información absolutamente necesaria.
2. Infiera información a partir de otra disponible.
3. Reutilice los campos cuando sea posible.
4. No pida la información dos veces.
5. Proporcione un título al formulario que exprese claramente su función.
6. Si necesita instrucciones, que sean breves y comprensibles.
7. Utilice una nomenclatura clara y familiar, sin tecnicismos ni extranjerismos.
8. Sea consistente en el uso de los términos.
9. No utilice preguntas complejas ni haga pensar al usuario.
10. Redacte siempre las opciones de forma afirmativa

Para seguir leyendo, Formularios usables: 60 Directrices de Usabilidad » »

 

jQuery validation plugin

8 COMENTARIOS -  Publicado hace 23 meses -  Clasificado en: , , ,

JQuery Validation Plugin :

  1. Sitio Oficial » »
  2. Ver ejemplo del tutorial en funcionamiento » »

JQuery Validation es un plugin muy sencillo de utilizar y que tiene la ventaja de ser muy personalizable tanto en la funcionalidad, como en las reglas de validación. El propósito de este tutorial es con unas pocas líneas de Javascript especificar el formulario y aplicar el plugin de validación. Las reglas de validación se espcifican a nivel de metadatos -a nivel general especificando clases-. Algunas consideraciones a nivel general:
1- Después de enviar un formulario no valido, el primer elemento no válido del mismo recoge el foco; lo que permite al usuario corregir su error. En el caso de que el campo donde se encontraba el usuario, antes de enviar el formulario, sea inválido, éste mantendrá el foco aunque no sea el primer campo erroneo. De este modo el usuario podrá corregir primero éste campo, facilitando la usabilidad del formulario.
2.- Antes de que el formulario sea enviado, el plugin no valida por lo que el usuario puede navegar por los distintos campos del formulario evitando molestos mensajes.
3.- Una vez el el campo ha sido marcado como no válido el plugin se vuelve activo y valida tan pronto como el usuario introduce los datos. De este modo, cuando el usuario ha introducido el valor correcto, el mensaje de error desaparece sin necesidad de esperar al nuevo envio del formulario.

Los métodos de validación cubren la mayoría de las necesidades que uno puede tener. En cualquier caso, siempre existe la posibilidad de añadir nuestros propios métodos de validación de un modo sencillo. Los métodos implementados por defecto son:

Name Type
required( ) Returns: Boolean
Makes the element always required.
required( dependency-expression ) Returns: Boolean
Makes the element required, depending on the result of the given expression.
required( dependency-callback ) Returns: Boolean
Makes the element required, depending on the result of the given callback.
remote( url ) Returns: Boolean
Requests a resource to check the element for validity.
minlength( length ) Returns: Boolean
Makes the element require a given minimum length.
maxlength( length ) Returns: Boolean
Makes the element require a given maxmimum length.
rangelength( range ) Returns: Boolean
Makes the element require a given value range.
min( value ) Returns: Boolean
Makes the element require a given minimum.
max( value ) Returns: Boolean
Makes the element require a given maximum.
range( range ) Returns: Boolean
Makes the element require a given value range.
email( ) Returns: Boolean
Makes the element require a valid email
url( ) Returns: Boolean
Makes the element require a valid url
date( ) Returns: Boolean
Makes the element require a date.
dateISO( ) Returns: Boolean
Makes the element require a ISO date.
dateDE( ) Returns: Boolean
Makes the element require a german date.
number( ) Returns: Boolean
Makes the element require a decimal number.
numberDE( ) Returns: Boolean
Makes the element require a decimal number with german format.
digits( ) Returns: Boolean
Makes the element require digits only.
creditcard( ) Returns: Boolean
Makes the element require a creditcard number.
accept( extension ) Returns: Boolean
Makes the element require a certain file extension.
equalTo( other ) Returns: Boolean
Requires the element to be the same as another one

Un primer ejemplo:

La manera más sencilla de especificar reglas de validación es añadiendo clases a los elementos de formulario. 

<form  class="cmxform" id="commentForm" method="post" action="#"> 
  <fieldset> 
  <div id="warning"></div>
  <h5>Ejemplo de maquetación de un formulario </h5>
  <p> 
  <label>Nombre <span class="indicacionform">(requerido)</span></label> 
  <input name="name"  class="required" id="idname" size="35"/> 
  </p><p> 
  <label>E-Mail <span class="indicacionform">(requerido)</span></label> 
  <input name="email"  class="required email" id="idemail" size="35"/> 
  </p><p> 
  <label>URL <span class="indicacionform">(opcional)</span></label> 
  <input name="url" class="url" id="idurl" value="" size="35" /> 
 </p><p>
  <label >Tu comentario <span class="indicacionform">(requerido)</span></label> 
  <textarea name="comentarios" cols="30" rows="7"  class="required" id="idcomentarios"></textarea> 
  </p><p align="center">
  <input name="submit" type="submit" class="submit" value=""/>
  </p> 
  </fieldset> 
</form>

Aunque las clases "required", "email" y "url" pueden ser usadas para dar estilo a los elementos con CSS, no es éste su propósito.

Para validar el formulario necesitamos incluir los archivos necesarios en nuestra página: 

<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.delegate.js" type="text/javascript"></script> 
<script src="js/jquery.validate.js" type="text/javascript"></script>

Ahora únicamente nos queda activar la función de validación, llamándola y estableciendo cuál es el id del formulario a validar. 

<script language="javascript">
$(document).ready(function() { 
          $("#commentForm").validate(); 
});
</script>

Un ejemplo más elaborado en cuanto a la utilización del jQuery y de CSS, a partir del XHTML anterior:

CSS: 

form.cmxform {
        width: 400px; /*Ancho del formulario*/
        color: #666;
        font: 12px "Lucida Sans Unicode", Verdana, Arial;
        color: #666;
        border:1px solid #d8dff2;
        background-color: #F8FDEF;
        padding:0px;
        margin:0px;
}
form.cmxform label {
        float: left;
        width: 160px; /*Ancho de la primera columna*/
}
form.cmxform fieldset {
        border: none;
        margin:0px;
        padding:0px;
        background: url(Imagenes/fieldset.gif) left bottom repeat-x;
        background-color: #F8FDEF;
}
form.cmxform fieldset fieldset {
        background: none;
}
form.cmxform h5 {
        margin:0px;
        padding:10px;
        color:#336699;
}
form.cmxform fieldset p, form.cmxform fieldset fieldset {
        padding: 10px 10px 10px;
        background: url(Imagenes/divisor.gif) left top repeat-x;
}

.indicacionform {
        font: 9px Verdana, Arial, Helvetica, sans-serif;
        color: #336699;
}
/* ELEMENTOS INPUT, TEXTAREA, SELECT,... */
textarea, input  {border: 2px solid #d5dae7; font: 11px "Lucida Sans Unicode", Verdana, Arial; color: #666;}
textarea:focus, input:focus{ border: 2px solid #89b21b; }
input.error { border: 2px solid #ffa17f; }
/* BOTONES*/
form .submit { 
        display:block;
        width:68px;
        height:25px;
        background-image:url(Imagenes/Submit.gif);
        border:none;
}
/* CONTEO TOTAL DE ERRORES*/
#warning {
        margin:15px;
        padding:7px;
        text-indent:5px;
        border:1px solid #b8c4e6;
        background: #e6eaf5 url(Imagenes/alert.gif) no-repeat 3px center;
        color:#336699;
        font-weight:bold;
        padding-left:20px;
}
#warning {
        display:none;
}
/* ETIQUETAS DE ERROR Y OK A NIVEL DE ELEMENTO*/
        em.error {
        display:block;
        height:10px;
        background:url("Imagenes/error.gif") no-repeat 0px 0px;
        padding-left:15px;
        font: 9px Verdana, Arial, Helvetica, sans-serif;
        color: #ff5432;
}
em.success {
        display:block;
        height:10px;
        background:url("Imagenes/ok.gif") no-repeat 0px 0px;
        padding-left:15px;
        font: 9px Verdana, Arial, Helvetica, sans-serif;
        color: #336699;
}

Javascript: 

$(document).ready(function() { 
  $("#commentForm").validate ( {
  	
     showErrors: function(errorMap, errorList) {
          $("#warning").html("Tu formulario contiene " + this.numberOfInvalids() + " errores.");
          this.defaultShowErrors();
          },
     debug: false,
     errorElement: "em",
     errorContainer: $("#warning"),
     success: function(label) {
          label.text("ok!").addClass("success");
     }
  }); 
});
 

Tip: Resaltar el campo activo de un formulario

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , ,

Resaltar el campo de formulario en el que está el foco se puede hacer de varias formas. Una muy sencilla sería: 

<input type="text" onFocus="this.style.backgroundColor='#FFFF99'" onBlur="this.style.backgroundColor='white'">
Ejemplo:

Algunas entradas relacionadas:

 

Dando estilo a los formularios con CSS

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: , , ,

Styling form controls with CSS, revisited | 456 Berea Street, probablemente sea la mejor aproximación al problema de dar formato a los controles de un formulario de un modo atractivo pero que al mismo tiempo sea válido para los distintos navegadores y sistemas operativos con los que nos podemos encontrar. Realmente muy completo. Con una página de demostración sobre cada uno de los distentos elementos (inputs, checkboxes, fieldsets,...), encontramos tanto el código XHTML como el CSS, así como distintas muestras de como se vería el elemento en cuestión en los navegadores. En mi opinión un post de lectura obligatoria y directo a favoritos.

Dando estilo a los formularios con CSS » »

Algunas entradas relacionadas:

 

Validar formularios con w3FormValidation

0 COMENTARIOS -  Publicado hace 39 meses -  Clasificado en: ,

Una utilidad simple y sencilla de utilizar para implementar una validación de formularios mediante Javascript. Mi herramienta preferida para estos menesteres es Wforms, que permite la inclusión de expresiones regulares, pero ésta no pinta nada mal.

Wforms

Algunas entradas relacionadas:

 

Control de campos de texto input con Flash

2 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , ,

Para crear un nuevo campo de texto con actionscript lo debemos hacer mediante la instrucción createTextField: Sintaxis: 

createTextField(NombreDeInstancia, Profundidad, PosicionX, PosicionY, Anchura, Altura)

Por ejemplo: 

this.createTextField("miTexto", 1, 100, 100, 300, 100);
miTexto.text ="abc";

Es importante tener en cuenta que el parámetro profundidad determina el nivel de profundidad del nuevo campo de texto (posición de orden z) del clip de película. Cada nivel de profundidad sólo puede contener un objeto. Si se crea un nuevo campo de texto en una profundidad en la que ya hay un campo de texto, el nuevo campo de texto reemplaza al existente. Para evitar sobrescribir campos de texto existentes, es conveniente utilizar MovieClip.getInstanceAtDepth() con el fin de determinar si una profundidad ya está ocupada o el método MovieClip.getNextHighestDepth() para determinar la profundidad más alta no ocupada.

Para que el usuario pueda introducir texto, además, deberemos cambiar la propiedad type de createTextField. La propiedad type especifica el tipo de campo de texto. Existen dos valores: "dynamic", que especifica un campo de texto dinámico que el usuario no puede modificar, e "input", que especifica un campo de introducción de texto. Por ejemplo: 

this.createTextField("miTexto", this.getNextHighestDepth(), 10, 10, 100, 22);
miTexto.border = true;
miTexto.type = "input";
miTexto.maxChars = 16;

Para restringir los caracteres que se pueden introducir en un campo de texto podemos hacer uso de la propiedad restrict. La propiedad restrict indica el conjunto de caracteres que los usuarios pueden introducir en el campo de texto. Si el valor es null, puede introducir cualquier carácter. Si es una cadena vacía, no se puede introducir ningún carácter. Si el valor es una cadena de caracteres, puede introducir caracteres solamente en la cadena del campo de texto. La cadena se examina de izquierda a derecha. Puede especificarse un rango utilizando un guión (-).

El siguiente ejemplo restringe a las letras de la 'a' a la 'e' minúsculas y las letras mayúsculas 'X','Y' y 'Z'. 

miTexto.restrict = "abcdeXYZ";

El siguiente ejemplo especifica un rango de caracteres, haciendo uso del guión. Restringe a caracteres de la 'a' a la 'z' minúsculas y mayúsculas así como valores numéricos. Quedan fuera del rango todo lo que no sean caracteres alfanuméricos como signos de puntuación, comillas, espacios y otros caracteres no alfanuméricos. 

miTexto.restrict ="a-zA-Z0-9";

Tambiñen podemos especificar caracteres que no queremos que entren dentro del rango de permitidos, usando el caracter (^). Todos los caracteres y rangos que sigan a este caracter no serán permitido. Por ejemplo: 

miTexto.restrict = "^a-z"; 
// No permite minusculas pero
// todos los demas caracteres se permiten
// incluyendo mayusculas
miTexto.restrict = "0-9^5";
// Solo permite numeros, con la excepcion del 5

Algunas entradas relacionadas:

 

Crear teclas de acceso con accesskey

4 COMENTARIOS -  Publicado hace 47 meses -  Clasificado en: , , ,

A través del atributo 'accesskey' (tecla de acceso) asignamos el foco al elemento que tenga asignado ese caracter. Los siguientes elementos soportan el atributo 'accesskey': A, AREA, BUTTON, INPUT, LABEL, LEGEND y TEXTAREA. La acción que se produzca cuando un elemento consigue el foco depende del elemento y en algunos casos del navegador. Por ejemplo, cuando un usuario activa un link definido mediante la etiqueta A, el navegador seguirá el enlace; cuando se activa un elemento radio button, estaremos cambiando el valor del radio button; cuando se activa una caja de texto, Ésta permite la introducción del mismo, etc. Sintaxis: 

accesskey = caracter [CN]
Ejemplo: 
<label for="nombre">Nombre:</label> 
<input type="text" name="nombre" accesskey="n">
(tecla de acceso 'n') <br/><br/>
<label for="apellidos">Apellidos:</label> 
<input type="text" name="apellidos" accesskey="a" /> 
(tecla de acceso 'a')

La invocación de las teclas de acceso depende del sistema operativo. Para sistemas Windows, generalmente es pulsando la tecla 'ALT' , más la tecla de acceso. En Mac es la tecla 'Control' más la tecla de acceso.

 
Páginas: 1 2 Siguiente >