FORMULARIOS CON APLICACIÓN DE CSS
Formas nos muestra una sólida estructura visual, una jerarquía profunda de los elementos de un formulario (campos y las etiquetas), (AJAX) técnicas de gran alcance y funcionalidad hacen que la forma y el trabajo sean más creativas. Hay un gran grupo de creativos, excepcionales y un diseño individual de las formas de cero.
Gracias a AJAX, podemos proporcionar información en tiempo real a nuestros usuarios que utilizan scripts 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 encuentren nuevas ideas que pueden desarrollarse por su cuenta.
Usted podría estar interesado en ver algunos de los diseños que se encuentran a continuación:
- 37 + Gran Ajax, CSS Tab interfaces basadas en
- 30 + JavaScript / Ajax Técnicas de deslizadores, controles deslizantes y barras de desplazamiento
- 21 + fresco Ajax tablas CSS
- 13 Awesome JavaScript CSS Menús
Formas de estilo
1) Formulario de Uni - Uni-Form es un marco que estandariza la forma de marcas y estilos con HTML y CSS, para tener buen aspecto, buena estructura, alta personalización, formas semánticas y que sea accesible y utilizable. En pocas palabras: hace la vida de un desarrollador mucho más fácil.
2) Sólo en CSS, menos las formas de mesa - 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 rechazada en Mac/IE5. 2.
3) Formas sin tablas - tiene un ejemplo de inicio de sesión con muy buena forma, con un gráfico en el campo de entrada. Un paso muy importante en el aprendizaje de diseño de páginas web de la manera correcta y directa. CSS ya no es sólo una manera de agregar algunos estilos simples de un elemento en su página. Cada vez más diseñadores de páginas web trabajan mucho con los estilos con el fin de crear un sitio web único y fácil de mantener. Puede ver algunos ejemplos inspiradores, visitando una galería como CSSREMIX o cssdrive . Esas son las galerías CSS que no será un escaparate de cualquier tipo de sitio web .El diseño debe ser único, basado en CSS, válido, XHTML, etc. Es un gran punto de partida si usted quiere aprender a diseñar. ¿Qué hace que un diseño de estilo CSS sea importante? es muy importante aclarar q mantener el diseño de un sitio web es muy difícil. Con sólo cambiar una línea de código en la hoja de estilos puede afectar a todas las páginas de su sitio web. Todos ellos reflejan que la línea ha cambiado. Usted no tendrá que editar cada página por la que se realiza automáticamente por el estilo. Sólo tiene que aplicar clases de elementos de la página. Vamos a hablar de las formas CSS. Para tener éxito diseñando páginas web, hay que tener en cuenta lo siguiente: debe tener una navegación sencilla, buen motor de búsqueda, los colores bien elegidos, buenas fuentes y, por supuesto, un buen contenido y calidad.
<Form id = "dos" acción ="..."method="post"> <fieldset id="personal"> <legend>PERSONAL INFORMATION</legend> <label for="lastname">last name : </label> <input name="lastname" id="lastname" type="text" tabindex="1" /> <br /> <label for="firstname">first name : </label> <input name="firstname" id="firstname" type="text" tabindex="2" /> <br /> <label for="address">address : </label> <input name="address" id="address" type="text" tabindex="3" /> <p>...more personal information...</p> </fieldset> <fieldset id="medical"> <legend>MEDICAL HISTORY</legend> <label for="smallpox">smallpox : </label> <input name="illness" id="smallpox" type="checkbox" value="smallpox" tabindex="20" /> <br /> <label for="mumps">mumps : </label> <input name="illness" id="mumps" type="checkbox" value="mumps" tabindex="21" /> <br /> <label for="dizziness">dizziness : </label> <input name="illness" id="dizziness" type="checkbox" value="dizziness" tabindex="22" /> <br /> <label for="sneezing">sneezing : </label> <input name="illness" id="sneezing" type="checkbox" value="sneezing" tabindex="23" /> <p>...more medical history...</p> </fieldset> <fieldset id="opt"> <legend>OPTIONS</legend> <select name="choice"> <option selected="selected" label="none" value="none"> none </option> <optgroup label="Group 1"> <option label="cg1a" value="val_1a">Selection group 1a </option> <option label="cg1b" value="val_1b">Selection group 1b </option> <option label="cg1c" value="val_1c">Selection group 1c </option> </optgroup> <optgroup label="Group 2"> <option label="cg2a" value="val_2a">Selection group 2a </option> <option label="cg2b" value="val_2a">Selection group 2b </option> </optgroup> <optgroup label="Group 3"> <option label="cg3a" value="val_3a">Selection group 3a </option> <option label="cg3a" value="val_3a">Selection group 3b </option> </optgroup> </select> </fieldset> <fieldset id="current"> <legend>CURRENT MEDICATION</legend> <p>...are you currently taking any medication?</p> <label for="yes">yes : </label> <input name="medication" id="yes" type="radio" value="yes" tabindex="35" /> <br /> <label for="no">no : </label> <input name="medication" id="no" type="radio" value="no" tabindex="35" /> <br /> <p>...if currently taking medication, please indicate it in the space below :</p> <textarea name="current_medication" tabindex="40" cols="40" rows="10"> </textarea> </fieldset> <p> <input id="button1" type="submit" value="Send" /> <input id="button2" type="reset" /> </p> </form>
Estilo de elementos de formulario
5) Niceforms 1,0 - es una escritura que reemplaza los elementos más comúnmente utilizados 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ón haciendo clic en su etiqueta al lado, también destaca las etiquetas de las cajas seleccionadas para hacer las selecciones más claras.
6) Forma de lujo - FancyForm es una escritura de gran alcance, está en reemplazo del checkbox. Es usada para proporcionar la última flexibilidad en el cambio del aspecto y de la función de los elementos de la forma del HTML. Es fácil de usar y no apoya a los viejos 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.
§ Leyendas
Cada página contiene capturas de pantalla de cada una de las plataformas de prueba, así como un conjunto de controles de formulario de estilo que se puede utilizar para comprobar los resultados en los navegadores que no están incluidos.
· 8)
Mostrando Buena Forma: La función de la interfaz de la información de entrada , por lo que semánticamente es una forma , por lo tanto, tenemos que encontrar una manera de construir utilizando los elementos de formulario: fieldset , la leyenda , la etiqueta y la entrada· Nosotros no podemos usar una tabla para maquetar, a pesar de que claramente sería la solución más fácil.
Abusar de tablas para maquetar, nunca es bueno - distribución física no es lo que significa la semántica de mesa. Pero incluso si estos datos pueden ser descritos como una tabla, no hay que mezclar marcado con formas, sino-formas de marcado, debido al impacto del comportamiento que puede tener en un lector de pantalla:
· 9) El estilo del elemento Button con puertas correderas: A menudo se diseñó y se desarrolló aplicaciones complejas con botones que se labran con imágenes de fondo, colores de fondo, iconos y, a veces una combinación de los tres. Lo ideal es que nuestros botones tengan las siguientes funciones:
· utilizar el método de las puertas corredizas introducido en A List Apart, para que podamos utilizar imágenes tridimensionales de fondo en varias formas y permitir que el fondo de la escala con el tamaño del texto hasta cierto punto,
· uso de imágenes de sprites , en varios estados botón se combinan en un solo archivo de imagen y reposicionarse en vuelo estacionario, para limitar el número de descargas de imágenes,
· nos permita utilizar el texto HTML de las etiquetas de botón para que podamos volver a utilizar el estilo de botón una muchas veces sin tener que cortar imágenes únicas para cada uno.
· no requiere JavaScript para envío del formulario o vuelcos para asegurar que los botones se pueden utilizar sin tener JavaScript activado.
El resultado es un método de Cross-browser para labrar elementos botón con el desplazamiento de sprites puerta.
Formulario de Usabilidad y Accesibilidad
10) Más bonita forma que resulte accesible - Nick Rigby echa un vistazo a có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: El mayor problema con las cajas de selección múltiple es que la selección de opciones múltiples es muy dura, especialmente si no son suficientes para crear una barra de desplazamiento dentro de la caja. El lugar más común es en los sistemas de gestión de contenidos.
12) las formas sensibles - Usabilidad Web - Roger Hudson ofrece un tutorial increíblemente claro sobre cómo se hace un buen diseño visual. Hay formularios que pueden presentar problemas para los usuarios Web con discapacidades cognitivas o de aprendizaje. Es muy fácil para alguien con problemas de visión que se basa en un dispositivo de salida de asistencia, tales como un lector de pantalla, navegador de voz o línea braille. Para trabajar con eficacia los dispositivos deben ser capaces de asociar una etiqueta de formulario (solicitud o del sistema) con el control de forma correcta, como un campo de texto o casilla de verificación.
Ajax Procesamiento de Formularios
13) Formulario de Contacto AJAX:
En este ejemplo se ve un formulario de contacto el cual realiza el proceso de envío mediante AJAX. También se incluyen algunos efectos visuales simples como la capa transparente para los mensajes de confirmación y los mensajes de ayuda flotantes que se pueden ver posicionando el cursor en el signo de pregunta de cada campo. La idea de este script es ayudar a comprender el envío mediante POST de varios parámetros y el manejo de las respuestas que el servidor retorna para mostrarlas en cliente.http://www.dustindiaz.com/ajax-contact-form/
Funcionamiento
El funcionamiento de este código es bastante sencillo: al presionar el botón "Enviar" una función JS se encarga de obtener los valores de los campos y validarlos utilizando diferentes criterios. Si algún campo es erróneo, se cambia su className para cambiar su fondo al color rojo y se muestra el mensaje de error correspondiente. Si no existen errores, se llamará a una función también JS que abrirá la conexión XMLHttpRequest con el servidor enviándole los datos que el usuario ha completado. El servidor validará los datos una vez más he intentará enviar mediante la función mail de PHP la información a un correo electrónico configurable. Si todo ha salido bien. Se envía al cliente la cadena "Ok"; caso contrario se enviará un "Error". Para finalizar, el cliente recibirá la cadena de respuesta del servidor y mostrará un mensaje de error o confirmación según corresponda.
14) AutoSuggest: Un auto-completar AJAX campo de texto - en la que añade un menú pop Down de valores sugeridos para un campo de texto. El usuario puede hacer clic directamente en una sugerencia para entrar en el campo, o navegar 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.
Características
· Seleccionar y cargar varios archivos
· Filtrar archivos por tipo en el cuadro de diálogo seleccione
· Una gran cantidad de eventos posible añadir su propio comportamiento
· Mostrar y filtrar la información de archivo útil antes de la carga comienza
· Carga límite por archivo de cuenta, tipo o tamaño
· Plataforma y servidor independiente , sólo necesita Flash Player 9 + ( penetración> 95% )
· Degradación elegante, ya que el elemento se sustituye después de la flash se ha cargado con éxito
· Cancelar correr archivos, agregar archivos durante la carga
· Todo es opcional, documentada y fácil de editar
· Nuevo en 2.0
· Obtener la respuesta del servidor después de subir para mostrar información adicional o una vista previa de la imagen, etc.
· Muestra la actual velocidad de subida y el tiempo que queda
· Enviar solicitud de información adicional a través de las variables GET o POST
· Establecer el nombre del archivo de la petición de carga
· Nuevo en 3.0 (totalmente renovado de la API )
· Totalmente Flash 9 y 10 y un cargador compatible adicional basado en IFRAME
· Busque un botón puede ser una superposición invisible o un sprite de imagen interactiva
· Caso de la comunicación basada en Flash, a prueba de futuro más estable und
· Archivo específico opciones para el establecimiento de url, los datos y el método, inteligentemente combinadas
· Añadir cookies de forma automática a la solicitud de datos
· Las direcciones URL relativas se convierten automáticamente
16) Forma de jQuery Plugin - El plugin de jQuery formulario, le permite actualizar fácilmente y discretamente formularios HTML para usar AJAX . Los principales métodos,
ajaxForm y ajaxSubmit , obtener información de los elementos de formulario para determinar la forma de gestionar el proceso de envío. Ambos métodos son compatibles con numerosas opciones que le permite tener 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 de 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 abierto JavaScript construido para dar a los usuarios información en tiempo real de validación, para llenar formularios.
LiveValidation es una pequeña biblioteca de código abierto de JavaScript para la toma de validación en el cliente rápido, fácil y potente. Se compone de dos partes principales. En primer lugar, proporciona a los desarrolladores un conjunto completo de métodos de validación de base, que también se puede utilizar fuera del contexto de las formas. En segundo lugar, ofrece a sus visitantes con información de validación en tiempo real mientras se llenan los formularios, ayudándoles a hacer las cosas bien la primera vez, por lo que la forma más fácil, más rápido y menos intimidante para completar.
Sobre la base de Mootools como una biblioteca de JavaScript y AJAX para el efecto, el formulario se lleva a la página PHP para procesar y validar las entradas. A partir de aquí el título que representa a la totalidad por encima de la definición: la validación de forma AJAX. Nuestro ejemplo se supone que es una página de registro. No hará nada después de la validación, pero muestra errores o muestra un mensaje de éxito. Si desea combinar y realmente crear una página de registro con la activación del correo electrónico, debe mostrar la pertenencia a la página de inicio de sesión.
21) fValidator - fValidator es un código abierto (libre) discreta herramienta de JavaScript para la validación de forma y de fácil manejo.
Consejos de campos de formulario
22) Consejos de validación para el formulario - En este artículo se explica una manera de hacer validación y efectos, también muestra tipos de usuario de JavaScript y CSS.
23) Forma de Ayuda sin Popups - Una buena técnica para agregar información ayudará a los formularios sin necesidad de utilizar ventanas emergentes. El siguiente formulario es para demostrar la prestación de ayuda en línea de forma que el visitante puede requerir más información acerca de los datos requeridos. Para ilustrar esto, el siguiente podría ser una sección de un formulario para que alguien la transferencia de su número de teléfono móvil a un nuevo proveedor de servicio.
Use los iconos de ayuda para obtener más información acerca de cada campo.
IMEI Código:
PAC Código:
Ocultar campos de formulario
24) Cortar los campos del formulario - Sería una idea genial para dar a los usuarios la opción de ocultar estos campos opcionales a su discreción, y con un uso inteligente de JavaScript, DOM y CSS.
Margen
Configurar un formulario básico que contiene elementos estructurados.
<form id="example-form" method="post" action=""> <fieldset> <legend> </ legend> <label> </ label> <input /> <br /> Etc.
Usted puede notar que hemos agregado <br /> s después de cada elemento del formulario. Estos no son semánticamente es necesario, pero mejorará el diseño cuando se ve con sólo estilos navegador por defecto. Si usted no está preocupado por esta disposición claramente de estilo, estos pueden ser retirados.
Que permite la conmutación de campo: Para permitir alternar campo, escribir los campos opcionales y sus respectivas etiquetas en los párrafos con un valor de atributo de la clase de opción.
<p class="optional"> <label nombre for="fm-forename"> Primero </ label> <input type="text" name="fm-forename" id="fm-forename" /> <br / > </ p>
Ahora agregue un párrafo vacío con un identificador único por encima de la forma, esto se convertirá en nuestro conmutador.
<p id="linkContainer"> </ p>
Aunque vamos a utilizar CSS para identificar visualmente todos los campos requeridos, dicha presentación no sirve a los navegadores de texto o lectores de pantalla. Mientras que el contenido generado sería la solución preferida, la falta de apoyo en Internet Explorer 7 requiere que significa que hay que añadir requeridos para cada etiqueta de elemento requerido.
<p> Apellidos for="fm-surname"> <label (Obligatorio) </ label> <input type="text" name="fm-surname" id="fm-surname" /> <br /> </ p>
Recorte de los campos del formulario
En primer lugar hacer uso de este marcador de posición vacía. El ancla y el enlace de texto sólo se generan si JavaScript. En el guión, generar el texto del enlace que se muestra como se carga la página.
toggle.appendChild (document.createTextNode ('Eliminar los campos opcionales?'));
A continuación, generar la pantalla y quitar el texto campos de enlace.
this.firstChild.nodeValue = (linkText == 'Eliminar los campos opcionales? ")? "Mostrar campos opcionales? : "¿Eliminar los campos opcionales;
Finalmente establecer el nombre de clase para todos los campos opcionales de opcional.
if (tmp.className == "opcional") {tmp.style.display = (tmp.style.display == 'none')? 'Block': 'none';}
Buenos Consejos para la creación de formas
25) Consejos para crear grandes formas Web - consejos para CSS verdaderamente 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 ellos para mejorar y crear uno propio.
Una visita obligada Ejemplos
27) DOM JavaScript barra deslizante
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) Edición instantánea:
37) Nombre de usuario AJAX Compruebe
38) selección AJAX encadenado
Tutoriales
39) Contraseña medidor de intensidad de su formulario de registro:
Un pequeño tutorial sobre cómo construir un medidor de intensidad de contraseñas como el que en el formulario de nueva cuenta de Google.
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 proporcionar informació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 –
Shaun Inman nos muestra una guía para el logro de archivo consistente y elegante subir las entradas a través de un uso inteligente de js y css.
43) Forma de estilos con CSS
Generador de formularios en línea
44) Wufoo Form Builder –
Constructor de Forma Libre HTML - Creación de formularios, encuestas e invitaciones y mucho más.
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.
46) Anote el Formulario –
es una web basada en gran constructor de forma WYSIWYG. 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).
47) Forma de la Asamblea –
una hermosa colección de hojas de estilo CSS para formularios Web Forms
PAGINA ORIGINAL:
No hay comentarios:
Publicar un comentario