jueves, 4 de agosto de 2011

47 elementos importantes a la hora de realizar un Formulario HTML

Formas necesita una sólida estructura visual, una jerarquía profunda de los elementos de formulario(campos y las etiquetas), técnicas de gran alcance y funcionalidad (AJAX) para hacer que el aspectoforma y trabajar de manera creativa. Hay un gran grupo de creativos, excepcional y un diseño individualde las formas de cero.

Gracias a AJAX, podemos proporcionar información en tiempo real a nuestros usuarios que utilizanscripts del lado del servidor de validación y eliminar la necesidad de funciones de validación y procesamiento de datos redundantes.


Vamos a echar un vistazo, esperamos que pueda encontrar nuevas ideas que pueden desarrollarsepor su cuenta.

Usted podría estar interesado en ver algunos de los diseños que se mencionó en los puestos de abajo:


Formas de estilo 
1) Formulario de Uni - un intento de estandarizar la forma de marcado (XHTML) y CSS, "modularizar"que, para tener buen aspecto, bien estructurado, altamente personalizable, formas semánticas,accesible y utilizable.



2) SOLO EN CSS, MENOS EN LAS TABLA, LAS FORMAS, 
Un gran ejemplo de una forma bien diseñada utilizando las modernas técnicas de css. Se trabaja en Win/IE6, Firefox v1.0 +, Win / Opera 8.0, tiene pequeñas diferencias de diseño en Mac / Safari 1.0.3 y Mac / Safari v1.2, y es útil, pero bastante enculada en Mac/IE5. 2.


3) Formas de Tableless - tiene un ejemplo de inicio de sesión muy buena forma, con un gráfico en el campo de entrada.


4) Una forma con estilo - Cómo dejar de estilo y formas de la tela de mirar feo.


Estilo de elementos de formulario

5) Niceforms 1,0 - es una escritura que reemplazará los elementos forma más usual con la costumbre de los diseñados. Una de estas mejoras sería la posibilidad de seleccionar un aparato de radio o casilla de verificaciónhaciendo clic en su etiqueta al lado, también destaca las etiquetas de las cajas seleccionadas para hacer las selecciones más clara y más ...



6) Forma de lujo - FancyForm es un script casilla reemplazo de gran alcancepara proporcionar la máxima flexibilidad en el cambio de la apariencia y función de los elementos de formulario HTML. Es fácil de usar y se degradacon gracia sobre todos los mayores, no apoyo a los navegadores.


7) los controles de formulario con estilo CSS, revisada - 224 imágenes que muestran los efectos de varias reglas CSS se aplica a los controles de formulario. Aunque las capturas son tomadas de 8 navegadores de 4 sistemas operativos, para un total de 14 combinaciones de navegador + OS.



8) Mostrando Buena Forma - Demostracion de complejo acceso, la red de estilo (es decir, la tabla-como) forma con marcado semántico (fieldset, leyendas, etc etiqueta ...) y CSS.



9) El estilo del elemento Button con puertas correderas - Una técnica quedemuestra una técnica cross-browser para los elementos de botón con puertas correderas.



Formulario de Usabilidad y Accesibilidad

10) Más bonita forma que resulte accesible - Nick Rigby echa un vistazo acómo hacer que las formas más accesibles y el uso de CSS en lugar de las tablas de la vieja escuela.



11) Check it, no lo seleccione - Si se intenta utilizar varias casillas de verificación en una lista desplegable - mejor que usar ctrl-click en un estado normal de selección múltiple listbox


12) las formas sensibles - Usabilidad Web - Roger Hudson ofrece un tutorialincreíblemente claras sobre cómo una forma que está bien diseñado, con buendiseño visual se beneficiarán todos los usuarios con visión

Ajax Procesamiento de Formularios

13) Forma AJAX Contacto - Excelente ejemplo de AJAX accesible. Utiliza Javascript discreto. Por Dustin Díaz.


14) AutoSuggest: Un auto-completar AJAX campo de texto - en la que añadeun menú popdown de valores sugeridos para un campo de texto. El usuariopuede hacer clic directamente en una sugerencia para entrar en el campo, onavegar por la lista utilizando las teclas de flecha hacia arriba y hacia abajo, la selección de un valor con la tecla de tabulación.



15) FancyUpload utilizando Mootools - Swf cumple con Ajax para la subida de archivos hermosa con Mootools.


16) Forma de jQuery Plugin - le permite actualizar fácilmente y discretamenteformularios HTML para usar AJAX para obtener información de los elementos de formulario para determinar la forma de gestionar el proceso de presentar lo que le permite tener un control total sobre cómo se envían los datos.

17) Cforms - Un plugin de forma de contacto AJAX para WordPress, que ofrece la implementación práctica de las formas múltiples contactos a través de su blog o incluso en la misma página.

Validación de formularios impresionante
18) Campo Realmente Fácil validación con Prototype - Aquí hay un script de validación de forma que es muy fácil de usar.




19) Validación en vivo - es una pequeña biblioteca de código abiertoJavascript construido para dar a los usuarios información en tiempo real de validación, ya que llenar formularios.


20) la validación Ajax forma - Aprender a utilizar AJAX para procesar y validarlos formularios.

Consejos de campos de formulario

22) Consejos de validación para el formulario - En este artículo se explica una manera de lograr la validación efecto Consejos, mientras que el tipo de usuariode JavaScript y CSS.


23) Forma de Ayuda sin Popups - Una buena técnica para agregar informaciónayudará a los formularios sin necesidad de utilizar ventanas emergentes.


Ocultar campos de formulario
24) Cortar los campos del formulario - ¿No sería una idea genial para dar a los usuarios la opción de ocultar estos campos opcionales a su discreción, y conun uso inteligente de Javascript, DOM y CSS algunos podemos.





Buenos Consejos para la creación de formas

25) Consejos para crear grandes formas Web - consejos para CSSverdaderamente importante para todos los constructores de la forma que hay.

26) trucos simples para las formas más útil - Una serie de simples trucos para mejorar la usabilidad de las formas, y esperamos que pueda inspirar en ellospara mejorar y crear uno propio.


Una visita obligada Ejemplos

27) DOM Javascript barra deslizante

28) Plugin de entrada enmascarada


29) Formulario de contacto + Ajax YUI

30) Una plantilla de formulario basados ​​en CSS

31) Formas Bonita

32) CAPTCHA AJAX

33) Disposición de anclaje con las formas


34) Archivo Ext. Subir Formulario Ejemplo de Control de


35) Control.TextArea-Prototype

36) Editar instantánea

37) Nombre de usuario AJAX Compruebe

38) encadenados AJAX seleccione


tutoriales

39) Contraseña medidor de intensidad de su formulario de registro - Un pequeño tutorial sobre cómo construir un medidor de intensidad decontraseñas como el que en el formulario de nueva cuenta de Google.

demostración:
http://www.codeassembly.com/examples/passwordstrength.php                                                                 

40) Forma de AJAX POST / GET - Forma de envío HTML con AJAX / Javascript ejemplo / tutorial      
                                                                                                                   


41) degradables Ajax Validación de formularios - Aprenda a proporcionarinformación en tiempo real al usuario mediante secuencias de comandos en el servidor de validación.



42) ENTRADAS EL ESTILO DE ARCHIVOS CON CSS y el DOM - ShaunInman nos muestra una guía para el logro de archivo consistente y elegantesubir las entradas a través de un uso inteligente de js y css.


http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

43) Forma de estilos con CSS





Generador de formularios en línea

44) Wufoo Form Builder - Constructor de Forma Libre HTML - Creación deformularios, encuestas e invitaciones y mucho más ...


http://wufoo.com/gallery/designs/

45) Fábrica de formularios Web - es una web de código abierto generador de formularios que genera automáticamente el código de fondo necesarios para unir el formulario a una base de datos.

http://www.webformfactory.com/ 

46) Anote el Formulario - es una web basada en gran constructor de formaWYSIWYG. Puede seleccionar un tipo de formulario (Contacto, encuesta de satisfacción, solicitud de empleo, Sugerir Sitio Web, registro de miembros, el Partido RSVP, la asistencia de la boda, Reservaciones, Presentar productos, y otros).

http://www.jotform.com/

47) Forma de la Asamblea - una hermosa colección de hojas de estilo CSSpara formularios Web Forms



PAGINA ORIGINAL: 
OTROS LINK: 

No hay comentarios:

Publicar un comentario