Ejemplo 1: envío de datos del formulario

HTML5 IE Cr Op Sa Fx

El método utilizado se puede determinar fácilmente mediante la barra de direcciones del navegador. Si aparece un signo de interrogación y la dirección se ve así, entonces definitivamente se trata de un GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Una combinación única de parámetros en la barra de direcciones identifica de forma única una página, por lo que las páginas con direcciones ?q=node/add y ?q=node se consideran diferentes. Esta función la utilizan los sistemas de gestión de contenidos (CMS, sistema de gestión de contenidos) para crear muchas páginas de sitios web. En realidad se utiliza un único archivo que recibe una solicitud GET y, según ella, genera el contenido del documento.

A continuación se enumeran las aplicaciones típicas de estos métodos en los sitios.

CONSEGUIR

Transferir pequeños datos de texto al servidor; Búsqueda de sitio.

Los motores de búsqueda y los formularios de búsqueda del sitio siempre se envían mediante el método GET, esto le permite compartir los resultados de la búsqueda con amigos, enviar un enlace por correo o publicarlo en un foro.

CORREO

Transferir archivos (fotos, archivos, programas, etc.); enviar comentarios; Agregar y editar mensajes en el foro, blog.

De forma predeterminada, el formulario se procesa en la pestaña actual del navegador; sin embargo, al enviar el formulario, puede cambiar este parámetro y abrir el controlador de formulario en una nueva pestaña o marco. Este comportamiento se especifica a través del "nombre de contexto", que es el valor del atributo de destino de la etiqueta. . Los valores populares son _blank para abrir el formulario en una nueva ventana o pestaña, y el nombre del marco, que se especifica mediante el atributo de nombre de la etiqueta.

Ejemplo 3: vincular un formulario a campos

HTML5 IE Cr Op Sa Fx

Aunque los parámetros de transferencia de formulario se especifican tradicionalmente en la etiqueta , también se pueden transferir a los botones de envío del formulario ( Y ). Para ello se utiliza un conjunto de atributos formaction, formmethod, formenctype y formtarget, que son análogos de los atributos correspondientes sin el prefijo de formulario. El ejemplo 4 muestra el uso de estos atributos.

Ejemplo 4: enviar un formulario

HTML5 IE Cr Op Sa Fx

Algunos navegadores no admiten todos los atributos de formulario nuevos, en particular Internet Explorer y Safari.

En esta lección crearemos un formulario de registro en cuatro pasos: 1. Ingresando nombre de usuario y contraseña 2. Nombre Apellido y dirección de correo electrónico 3. Edad, sexo y país 4. Información general

HTML

Primero, como siempre, creemos el marcado. HTML. Necesitamos un contenedor con cuatro bloques. DIV, uno para cada paso.
Código principal HTML será así:

Dentro de cada bloque colocaremos campos y simples etiqueta:

Regístrese en el sitio

Usamos tres campos de entrada: Contraseña de inicio de sesión Y confirmación de contraseña, y al final del bloque la etiqueta aporte con tipo entregar para pasar al siguiente paso. Otros bloques funcionan exactamente igual.
Al final del contenedor tenemos una barra de progreso simple, aquí está su código:

0% completado

Lleno HTML el código es así:

Regístrese en el sitio

Al menos 4 caracteres. Sólo letras mayúsculas, minúsculas o números. Al menos 4 caracteres. Utilice una combinación de mayúsculas y minúsculas para mejorar la confiabilidad. Si sus contraseñas no coinciden, no podrá continuar con el registro.

Regístrese en el sitio

Su nombre. Tu apellido. Tu correo electrónico.

Regístrese en el sitio

0 - 17 18 - 25 26 - 40 40+ Su edad.

Hombre Mujer Cuál es tu género.

Rusia Ucrania Bielorrusia Kazajstán Otro Tu país.

Regístrese en el sitio

información general

Acceso
Contraseña
Correo electrónico
Nombre
Edad
Piso
Un país

0% completado

Como habrás notado, en el cuarto paso la mesa está vacía. Lo llenaremos con información ingresada por el usuario usando jQuery.

CSS

Ahora agreguemos estilos al formulario. aplicaremos la regla @Perfil delantero para utilizar fuentes personalizadas. En nuestro caso esta es la fuente. cantarell. código completo CSS se da a continuación:

/* Restablecimiento de CSS (Eric Meyer) */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address, grande,citar,código,del,dfn,em,fuente,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,centro,dl, dt,dd,ol,ul,li,conjunto de campos,formulario,etiqueta,leyenda,tabla,título,tbody,tfoot,thead,tr,th,td(borde:0;esquema:0;tamaño de fuente:100%;vertical -align:línea de base;fondo:transparente;margen:0;relleno:0)cuerpo(altura de línea:1)ol,ul(estilo de lista:ninguno)blockquote,q(comillas:ninguno):enfoque(esquema:0) ins(decoración de texto: ninguna)del(decoración de texto:renglón)table(colapso de borde:colapso;espaciado de borde:0) @font-face (familia de fuentes: "Cantarell"; src: url(. ./fonts/Cantarell-Regular.eot); src: local("Cantarell"), url("../fonts/Cantarell-Regular.ttf") formato("truetype"); ) cuerpo (color de fondo: # f9f9f9; color: #222; familia de fuentes: Cantarell, Verdana, sans-serif; tamaño de fuente: 12px; ) entrada::-moz-focus-inner, entrada::-moz-focus-inner (borde: ninguno; ) entrada:enfoque, entrada:enfoque ( esquema: ninguno; ) .clear ( claro: ambos; ) #container (fondo: url("../images/container.png") sin repetición; ancho: 754px; alto: 370px; margen: 20px auto; relleno: 50px 0; desbordamiento: oculto; posición: relativa;) #contenedor #primer_paso, #segundo_paso, #tercer_paso, #cuarto_paso ( mostrar: ninguno; ) #contenedor #primer_paso ( mostrar: bloque; ) #contenedor .form ( margen: 66px 72px 0 72px; ) #contenedor h1, #contenedor h2 ( tamaño de fuente: Cantarell, Verdana, sans-serif; alineación de texto: centro; tamaño de fuente: 24px; sombra de texto: 1px 1px 2px #222; ) #container h1 span ( color: #a90329; ) #container h2 ( color: #888; tamaño de fuente: 20px; alineación de texto: izquierda; sombra de texto: ninguna;) #tabla de contenedores (margen: 20px 40px; tamaño de fuente: 14px; peso de fuente: negrita;) #tabla de contenedores td ( relleno: 5px 10px; ) #tabla de contenedor td:nth-child(2) ( color: #a90329; ) #entrada de contenedor, #selección de contenedor (fondo: url("../images/input.png") no- repetir; color: #888; borde: 1px sólido #ccc; familia de fuentes: Cantarell, Verdana, sans-serif; peso de fuente: negrita; tamaño de fuente: 15px; ancho: 300px; altura: 35 píxeles; relleno: 0 25px; margen: 20px 0; flotador izquierdo; radio del borde: 6px; -radio-borde-moz: 6px; -webkit-border-radio: 6px; ) #container input.submit (fondo: url("../images/button.png") sin repetición; borde: ninguno; cursor: puntero; ancho: 85px; alto: 38px; posición: relativa; abajo: 2px; izquierda: 655px; ) #container input.submit:focus ( borde: ninguno; ) #container input.send( fondo: url(". ./images/send.png") sin repetición; ) #container input.error ( borde: 1px rojo sólido; ) #container input.valid ( borde: 1px sólido #1FFF00; ) #container input:focus, #container select :focus ( borde: 1px sólido #a90329; color: #a90329; ) #container select ( padding: 5px 0 5px 25px; ) #container option ( padding: 0 15px; ) #container label ( color: #666; tamaño de fuente : 12px; peso de fuente: negrita; altura de línea: 14px; flotante: derecha; margen: 23px -25px; ancho: 270px; ) #progress_bar (fondo: url("../images/progress_bar.png") no- repetir; ancho: 339px; alto: 24px; margen: 0 auto; posición: relativa; ) #progress ( fondo: url("../images/progress.png") repetir-x; ancho: 0px; alto: 23px; radio de borde: 20 px; -webkit-radio-de borde: 20 px; -moz-radio-de borde: 20 px; ) #progress_text (posición: relativa; altura de línea: 21 px; alineación de texto: centro; peso de fuente: negrita; color: blanco; sombra de texto: 1px 1px 2px #222; ancho: 339px; alto: 24px; arriba: -23px; izquierda: 0; )

js

jQuery Lo usaremos para cambiar bloques (diapositivas) sin problemas, verificar la exactitud de los datos y cambiar el porcentaje de finalización.
Necesitaremos conectar la biblioteca en el encabezado de la página. jQuery y dos complementos más:
interfaz de usuario jQuery Y enfoque de entrada jQuery(utilizado para controlar el enfoque y desenfocar eventos de forma).
jQuery el código está a continuación:

$(función())( //valores de campo originales var field_values ​​​​= ( //id: valor "nombre de usuario" : "Логин", "password" : "Пароль", "cpassword" : "Пароль", "firstname" : "Имя", "lastname" : "Фамилия", "email" : "email" }; //inputfocus $("input#username").inputfocus({ value: field_values["username"] }); $("input#password").inputfocus({ value: field_values["password"] }); $("input#cpassword").inputfocus({ value: field_values["cpassword"] }); $("input#lastname").inputfocus({ value: field_values["lastname"] }); $("input#firstname").inputfocus({ value: field_values["firstname"] }); $("input#email").inputfocus({ value: field_values["email"] }); //reset progress bar $("#progress").css("width","0"); $("#progress_text").html("0% Выполнено"); //first_step $("form").submit(function(){ return false; }); $("#submit_first").click(function(){ //remove classes $("#first_step input").removeClass("error").removeClass("valid"); //ckeck if inputs aren"t empty var fields = $("#first_step input, #first_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length!}<4 || value==field_values[$(this).attr("id")]) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { if($("#password").val() != $("#cpassword").val()) { $("#first_step input").each(function(){ $(this).removeClass("valid").addClass("error"); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $("#progress_text").html("33% Выполнено"); $("#progress").css("width","113px"); //slide steps $("#first_step").slideUp(); $("#second_step").slideDown(); } } else return false; }); $("#submit_second").click(function(){ //remove classes $("#second_step input").removeClass("error").removeClass("valid"); var emailPattern = /^+@+\.{2,4}$/; var fields = $("#second_step input"); var error = 0; fields.each(function(){ var value = $(this).val(); if(value.length<1 || value==field_values[$(this).attr("id")] || ($(this).attr("id")=="email" && !emailPattern.test(value))) { $(this).addClass("error"); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass("valid"); } }); if(!error) { //update progress bar $("#progress_text").html("66% Выполнено"); $("#progress").css("width","226px"); //slide steps $("#second_step").slideUp(); $("#third_step").slideDown(); } else return false; }); $("#submit_third").click(function(){ //update progress bar $("#progress_text").html("100% Выполнено"); $("#progress").css("width","339px"); //prepare the fourth step var fields = new Array($("#username").val(), $("#password").val(), $("#email").val(), $("#firstname").val() + " " + $("#lastname").val(), $("#age").val(), $("#gender").val(), $("#country").val()); var tr = $("#fourth_step tr"); tr.each(function(){ //alert(fields[$(this).index()]) $(this).children("td:nth-child(2)").html(fields[$(this).index()]); }); //slide steps $("#third_step").slideUp(); $("#fourth_step").slideDown(); }); $("#submit_fourth").click(function(){ //send information to server alert("Данные отправлены"); }); });
Aquí tenemos un formulario con registro en varios pasos. Para usar este ejemplo solo necesitas cambiar el formulario acción con un enlace a tu PHP archivo utilizado para almacenar datos y editar la línea 132 para:
$('formulario').unbind('enviar').enviar();. Para ver el formulario en acción, haga clic en el botón Manifestación.

El diseño del formulario de inicio de sesión es realmente importante para cualquier sitio web. Recopilamos una descarga gratuita de plantillas de página de inicio de sesión receptivas. El formulario de inicio de sesión es parte de un sitio web. Cuando vamos a un sitio web y queremos tener acceso completo, debemos registrarnos e iniciar sesión. El formulario de inicio de sesión de cualquier sitio web se puede encontrar en cualquier lado del sitio web. Será del lado derecho o izquierdo. Ningún sitio web sin un formulario de inicio de sesión y registro está completo. Por eso es importante para cualquier sitio web. Es muy difícil crear un formulario de inicio de sesión mediante HTML CSS sin un desarrollador profesional.

HTML es una estructura y CSS es diseño. HTML5 y CSS3 es la versión actualizada para diseño. Algunos de los formularios de inicio de sesión creados mediante esta codificación de actualización se pueden descargar directamente. El desarrollador compartió este formulario de forma gratuita. Estos se pueden utilizar para cualquier necesidad personal o comercial.

Utilice esta plantilla de página de inicio de sesión receptiva de forma gratuita y podrá crearla usted mismo. Puede personalizar y cambiar cualquier color o estilo. También puedes conectar tu base de datos, jquery. Por eso, esta plantilla de inicio de sesión es realmente útil e importante.

Hemos compartido en esta publicación algunas plantillas de formulario de inicio de sesión gratuitas html5 css3. Esta colección se incrementará. Estamos intentando recopilar más plantillas de página de inicio de sesión.

Formulario de diseño de materiales

Este formulario de inicio de sesión se ve realmente impresionante y simple. Puede editar y cambiar el color de la interfaz. Diseño sencillo pero muy profesional.

DESCARGAR DEMOSTRACIÓN

Cuando necesite diseñar cualquier formulario de inicio de sesión de la aplicación, puede utilizar este formulario de inicio de sesión de Material Design. Será perfecto para su aplicación.

DESCARGAR DEMOSTRACIÓN

Avatar SVG animado

La plantilla de inicio de sesión animada tiene una gran demanda. Si quieres utilizarlo tu profesión. Este formulario de inicio de sesión de Avatar SVG animado es mejor para usted.

DESCARGAR DEMOSTRACIÓN

Efecto de agitación del formulario de inicio de sesión

Este es un formulario de inicio de sesión simple, tiene algún efecto y utiliza su negocio profesional.

DESCARGAR DEMOSTRACIÓN

CSS3 Animation Cloud y formulario de inicio de sesión

Si tiene un negocio en la nube o planea cualquier tipo de negocio en la nube, puede utilizar esta CSS3 Animation Cloud y el formulario de inicio de sesión.

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión limpio

Este es un diseño muy limpio y el nombre también es el mismo formulario de inicio de sesión limpio. Utilice este formulario para su sitio web limpio.

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión en HTML5

Este formulario de inicio de sesión está diseñado en HTML5 y se utiliza para su mejor sitio web.

DESCARGAR DEMOSTRACIÓN

Validación únicamente CSS del formulario de inicio de sesión

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión CSS

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión de Batman

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión con Materializecss

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión de material angular

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión responsivo

DESCARGAR DEMOSTRACIÓN

Formulario de inicio de sesión responsivo

DESCARGAR DEMOSTRACIÓN

Forma plana simple con cargador giratorio

DESCARGAR DEMOSTRACIÓN

Iniciar sesión en Everdwell

En el formato de esta lección crearemos Formulario de inicio de sesión CSS, le mostraré cómo conectar íconos de fuentes, cómo configurar la transparencia de los elementos y usar efectos de desplazamiento animados en el formulario.

Marco de formulario en HTML

Primero creamos el marco del formulario. Abra la plantilla html y escriba el siguiente código entre las etiquetas.

Creemos un bloque que servirá como contenedor para el formulario. Asignémosle la clase .container, coloquemos un formulario con entrada, la primera entrada es para ingresar el inicio de sesión. type="text" name="nombre de usuario" placeholder="Ingrese su nombre de usuario" !}, segundo tipo de entrada="contraseña" nombre="contraseña" marcador de posición="Ingrese la contraseña" !} acepta una contraseña seguida de un botón de enviar. A continuación colocamos una inscripción para recuperar la contraseña, lo convertiremos en un enlace simple.

Restaurar contraseña

Describir elementos de formulario en CSS

Luego daremos formato a estos elementos del formulario. Creemos un directorio CSS adicional en el que colocaremos los archivos de estilo. En él creamos un archivo style.css y lo conectamos a nuestra página.

Sugiero poner una imagen de fondo; para hacer esto, creemos un directorio img adicional y coloquemos nuestra imagen en él. Incluimos la imagen en style.css para el cuerpo. Anotamos la ruta a la imagen, salimos del directorio actual, vamos a la carpeta img y luego el nombre de la imagen.

Cuerpo (imagen de fondo: url("../img/bg.png"); )

A(color: #fff; ) a:hover(decoración de texto: ninguno; )

Diseñemos el contenedor con el formulario .container. Establezcamos el ancho en 450 píxeles y establezcamos temporalmente la altura en 500 píxeles. Establezcamos el color en #182134 y centrémoslo en el medio del margen de la pantalla: 250px auto 0 auto; . Coloque el texto dentro del bloque en el centro, con una sangría de 20 píxeles en la parte superior.

Contenedor (ancho: 450 px; alto: 500 px; color de fondo: #182134; margen: 250 px automático 0 automático; alineación de texto: centro;)

Luego creemos una entrada para ingresar su nombre de usuario y contraseña. Para no afectar el botón, los seleccionamos por los atributos de texto y contraseña, especificando un ancho de 300 píxeles. , una altura de 50 picos. Amplíe el texto en 18 px, haga sangrías entre ellos de 25 px, redondee las esquinas radio del borde: 4 px; , el texto se moverá a 10 píxeles. A la izquierda.

Entrada, entrada (ancho: 300 px; alto: 50 px; tamaño de fuente: 18 px; margen inferior: 25 px; radio del borde: 4 px; relleno izquierdo: 10 px;)

Luego centraremos los inpyt envolviéndolos en un bloque adicional y asignando la clase .dws-input. Hagamos un salto de línea después del botón e insertemos una imagen con nuestro logo en la parte superior antes del botón. Para hacer esto, cópielo a la carpeta img y escriba la ruta img src="img/men.png".

Restaurar contraseña

A continuación describiremos sus estilos. Asignemos un ancho y alto de 120 píxeles a la imagen. , luego levántelo justo por encima del margen de la forma: -60px 0 30px 0; , haz aproximadamente vodka a 5 picos. borde: 5px sólido #1a394f; , redondea las esquinas al 50%.

Img del contenedor (ancho: 120 px; alto: 120 px; margen: -60 px 0 30 px 0; borde: 5 px sólido #1a394f; radio del borde: 50%;)

Ahora describamos los estilos de los botones. Asignémosle la clase .dws-submit y le asignaremos estilos. Asignamos sangrías, aumentamos el texto en 15 píxeles, lo hacemos blanco y el fondo del botón azul, eliminamos el vodka y hacemos un cuadrado en la parte inferior, así como un cursor de puntero.

Dws-submit (relleno: 13px 30px; margen: 5px 0 20px 0; tamaño de fuente: 15px; color: #fff; color de fondo: #2ca8c6; borde: ninguno; borde inferior: 4px sólido #6ee9fd; cursor: puntero ; )

Para centrar las entradas y el botón, coloquémoslas por separado, cada una en su propio bloque. Describamos los estilos del botón cuando se coloca el cursor sobre él. Hacemos una transición suave, cambiamos el color del botón a blanco y al mismo tiempo la fuente cambiará a oscura.

Dws-submit:hover( transición: todos 0,5 s; fondo: #fff; color: #2c536c; )

Hagamos un bloque azul encima de nuestra forma, box-shadow: 0 -5px 0 #3adbfd; y agréguelo al cuadro de imagen-sombra: 0 -5px 0 #3adbfd; . Hagamos un poco más transparente el fondo del formulario, para ello escribiremos este color en formato RGBA.

Utilizo el servicio w3schools.com, bajo al Selector de color, ingreso nuestro color en el formulario y lo convierto a RGB. Copie y pegue en el estilo del contenedor.

Contenedor (ancho: 450 px; alto: 500 px; color de fondo: rgba (24, 33, 52, 0,7); margen: 250 px auto 0 auto; alineación de texto: centro; sombra de cuadro: 0 -5 px 0 #3adbfd;) .container img( ancho:120px; alto:120px; margen: -60px 0 30px 0; borde: 5px sólido #1a394f; radio de borde: 50%; sombra de cuadro: 0 -5px 0 #3adbfd; )

Para el efecto, redondea las esquinas inferiores, para ello escribiremos border-radius: 0 0 10px 10px; .

Agregar iconos de fuentes

Agreguemos íconos en forma de fuentes, vaya al servicio fontawesome.io y descárguelos a su computadora. Descomprimamos el archivo, copiemos la carpeta de fuentes, que contiene las fuentes, y copiemos el archivo de estilos en el directorio css. Luego conectamos los estilos a la página.

Seleccionemos íconos para nuestras entradas, para esto vamos a la página Iconos, el primero es conectar el estilo para ingresar el inicio de sesión, use usuario, copia su código f007 y describirlo en estilos usando un pseudoelemento.

Conexión de fuentes font-family: "FontAwesome"; , luego el ícono en sí, colócalo absolutamente en los márgenes, auméntalo en 30 píxeles, céntralo y cambia el color.

Dws-input::before( familia de fuentes: "FontAwesome"; contenido: "\f007"; posición: absoluta; tamaño de fuente: 30px; relleno: 10px 0 0 7px; color: #2c536c; )

Movamos un poco el texto en la entrada: padding-left: 40px; .

Seleccionemos el segundo ícono con el nombre. cerrar, copia su código f023 y describir sus estilos.

Para hacer esto, seleccione el segundo elemento. .dws-entrada:nth-child(2)::antes() y escribe el contenido de la imagen: " \f023";.

Dws-input::before( familia de fuentes: "FontAwesome"; contenido: "\f007"; posición: absoluta; tamaño de fuente: 30px; relleno: 10px 0 0 7px; color: #2c536c; ) .dws-input: nth-child(2)::antes( contenido: "\f023"; )

Dws-input:hover::before( color: #319ebc; transición: todos 0,3s; )

Y también, estilos de desplazamiento para las entradas.

Entrada Dws: hover( box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); )

Por conveniencia, envolvámoslos en un bloque con la clase .social y describamos sus estilos. Cambiemos su color a blanco, aumentémoslos en 20 píxeles, hagamos que tengan 20 píxeles de ancho y agreguemos algo de relleno.

Dws-social i (color: #fff; tamaño de fuente: 20 px; ancho: 20 px; relleno: 10 px;)

A continuación, describiremos los estilos de desplazamiento. Hagamos un bloque blanco, cambiemos el fondo del ícono a oscuro, redondeemos las esquinas y muestremos el cursor al pasar el mouse.

Social i:hover(color de fondo: #fff; color: #1a394f; radio de borde: 5px; cursor: puntero;)

Eliminemos la altura del bloque de formulario, que se estableció al principio, y en su lugar agreguemos un padding-bottom inferior: 20px; .

En principio, eso es todo, tenemos un formulario bastante bonito que se puede conectar al sitio y utilizar para autorización.

Intenta hacer algo original usando el ejemplo de esta lección, practica y no olvides compartir este material.