Estilizado de formularios

Hola! hoy tengo ganas de programar algo y ando inspirado asi que hare un formulario que podras usar en tus paginas de login o para pedir alguna información, comencemos.

lo primero es conocer la estructura de tu fomulario principal dejando de lado todo lo que tiene que ver con funcionamiento del lado del servidor. tenemos los famosos input text que estan presentes en la mayoria de los formularios, los input radio, los input button, los input checkbox y otros. en este formulario que estilizaremos haremos uno de registro que pida pocos datos y al final se vea atractivo y  llame la atencion del usuario. recordar que dejar una buena experiencia en el usuario hace que este se convierta en un cliente concurrido de tu sitio o una venta(dependiendo de lo que ofrezca tu portal).

empezaremos por crear el formulario sin estilos:

<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='utf-8'>
    <title>Formularios</title>
</head>
<body>
<div id='contenedor'>    
        <form method='' action=''>
            <input type='text' name='nombre'>
<input type='text' name='apellido'>
<select name="grado">
<option value="0">-- Escoge tu grado --</option>
                <option value="1">Primero</option>
                <option value="2">Segundo</option>
                <option value="3">Tercero</option>
            </select>
<label for='materias'>Materias de tu agrado</label>
<input type='checkbox' name='materias[]'>Matematicas
<input type='checkbox' name='materias[]'>Ciencias
<input type='checkbox' name='materias[]'>Español
<label>¿Te gusta este formulario?</label>
<input type="radio" name="respUser" value="yes">Si
            <input type="radio" name="respUser" value="no">No
<input type='submit' value='Envia tus datos'>
        </form></div>
</body>
</html>

tan solo sin estilos se veria algo com eso para que funcione. esteticamente se veria asi:

screenshot-{domain} {date} {time}

ahora que ya tenemos el formulario empezemos a darle estilos a cada uno de los elementos para que vaya luciendo bien. empezemos.

primero tenemos que agregar algunas etiquetas para que nos sea mas facil la estilizacion. nuestro formulario quedaria de la siguiente manera:

<form method='' action=''>
			<input type='text' name='nombre' class="text" placeholder="Ingresa tu nombre"><br>

			<label for='materias'>Materias de tu agrado</label><br>
		   	<input type="checkbox" id="fg"><label for="fg"><span></span> Matematicas</label>
            <input type="checkbox" id="c1"><label for="c1"><span></span> Español</label>
            <input type="checkbox" id="s1"><label for="s1"><span></span> Ciencias</label><br>

            <label for='boton'>¿Te gusto esto?</label><br>
            <input type="radio" name="boton[]" id="r1" value="1" checked><label for="r1"><span></span> Si</label>
            <input type="radio" name="boton[]" id="r2" value="2"><label for="r2"><span></span> No</label><br>

			<input type='submit' value='Envia tus datos' class='boton-submit'>
		</form>

 

1.- input text:

primero empezaremos con este. para los agregaremos una clase ya que de esta manera podemos reutilizarla. esta seria la clase que le daremos.


.text{
 outline: none; /* remueve la linea azul que se pone por default a su alrededor */
 padding: 10px; /* agrega un espacio adentro del input text */
 background: transparent; /* le da un fondo transparente */
 border: solid 1px #01FF00; /* le agregamos una linea de color verde */
 border-radius: 5px; /* da un borde redondo al input */
 margin: 5px; /* espacio a su alrededor */
 color: white; /* color de fuente */
 transition: linear 0.3s; /* esto indica un tiempo de transicion a activo de inactivo y viceversa */
 width: 90%;
}
.text:focus{/* efectos de cuando este escribiendo dentro del input*/
 background: rgba(0,0,0,0.4);/* le agregamos un fondo */
 border: solid 1px #0CFEE6; /* le agregamos una linea de color verde */
 width: 95%;
}

 

2.- input checkbox

los estilos que le agregaremos a los input para que se vean bonitos seran lo siguiente. pondre un comentario para definir las lineas. para esto tenemos que remover el cuadrito que amablemente pone navegador para que no tengas que poner estilos y nosotros lo que haremos sera con una imagen y reglas css hacer que solo se recorra la imagen de su posicion y muestre una seccion de la imagen con la marca de activado. esto suena confuso :s …. veamos en codigo.

input[type="checkbox"]{
	display: none; /* aqui ocultamos visualmente el checkbox */
}

input[type="checkbox"] + label span{ /* aqui diremos que agregaremos un estilos pero al span del label que agregamos al lado checkbox */
	display: inline-block; /* hacemos que ese label se agregue en conjunto con el input en linea */
	width: 19px; /* damos un ancho */
	height: 19px; /* damos un alto */
	background: url(check_radio_sheet.png) left top no-repeat; /* esta imagen tiene las miniaturas con los dos estados pero a la izquierda tiene el icono inactivo por eso el atributo left. el no-repeat es para que no se ponga todo la imagen solo la parte visible */
	margin: -1px 4px 0 0; /* con esto ajustamos el tamaño de la imagen para que se muestre solo el estado inactivo */
	vertical-align: middle; /* con esto se debe de alinear la imagen a la mitad */
	cursor:pointer; /* con esto hace que cuando el usuario ponga el cursor sobre el checkbox se ponga la manita que indique que el usuario puede clickear sobre este span que esta suplantando el verdaderop check que esta oculto */
}

input[type="checkbox"]:checked + label span{ /* estamos trabajando sobre el span recuerden */
	background: url(check_radio_sheet.png) -19px top no-repeat; /* en cuanto sea clickeado la imagen es movida de lugar y entonces con esto da la apariencia que fue clickeada */
}

el tema va para largo pero si tienes duda avisame en un comentario. no tengas miedo. te contestare lo mas rapido. continuemos.

3.- Boton de enviar(input submit)

con esto finalizaremos porque si el articulo se hace demasiado grande :s. bueno este estilo para el boton de envio es mas sencillo y mas rapido, ahora lo veremos.

.boton-submit{
	outline: none; /* remueve la linea azul que se pone por default a su alrededor */
	padding: 10px; /* agrega un espacio adentro del input text */
	background: transparent; /* le da un fondo transparente */
	border: solid 1px #01FF00; /* le agregamos una linea de color verde */
	border-radius: 5px; /* le agregamos bordes redondeados al boton */
	margin: 5px; /* le agrega un espacio alrededor del boton */
	color: white; /* le agregamos un color de fuente blanco */
	transition: linear 0.3s; /* le agregamos el efecto de transicion que ocurrira cuando el boton pase de activo a inactivo y viceversa */
	cursor: pointer; /* le agregamos la propiedad de que cuando este sobre el boton se ponga la manita que indque al usuario que puede clickear */
}

.boton-submit:hover{
	background: rgba(0,0,0,0.4);/* le agregamos un tono de negro con opacidad (entender que la funcion rgba recibe tres parametros: (tono-de-rojo, tono-de-verde, tono-de-azul, opacidad)) */
	border: solid 1px #0CFEE6; /* le agregamos una linea de color verde alrededor */
	position: relative; /* esta propiedad la agregamos para que este fijo al container que estamos usando */
}

.boton-submit:active{
	top: 2px;/* la propiedad de position: relative; es para que cuando al boton se le de clic activara esats reglas y con esta linea decimos que mueva el boton hacia abajo dos pixeles. esto dara el efecto de que se presiono y se movio */
	background: white; /* fondo blanco */
	color: black; /* letras negras*/
	padding-left: 25px; /* le agregamos un espacio a los lados para qeu se note un cambio del lado izquierdo*/
	padding-right: 25px; /* tambien del derecho */
}

bueno, pues con esto terminamos ve como queda. he implementado el mismo efecto de los input radio para los checkbox ya que la regla es igual. espero te haya gustado. si no entiendes algo o quieres los recursos solo decime. la imagen te la dejo en un enlace en la web donde esta la prueba del formulario estilizado.

Anuncios

Un comentario en “Estilizado de formularios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s