Menu de navegación

miércoles, 29 de enero de 2014

Como Hacer un Formulario de Contacto con HTML5 y CSS3

 Curso en vídeo y más detalles en este artículo:


Para los que no habéis visto el artículo anterior os dejo un enlace por que se explica la estructura básica de HTML5 y algunas etiquetas, esa información os será necesaria para seguir con este artículo.
aprende-html5-y-css3

Hoy aprenderemos a hacer un formulario de contacto en Html5, aún no veremos como enviar la información, ahora haremos la estructura del formulario y daremos estilos con CSS3 para que sea muy vistoso. En próximos artículos sobre PHP sí aprenderemos como enviar la información a nuestro servidor de correo.

Para hacer un formulario utilizaremos la etiqueta <form> y dentro de ella incluiremos etiquetas <input> que son las que muestran las cajas de texto donde el usuario puede dejar su información.

Veamos el código que usaremos:

<form id="formulario">
      <label for=”nombre”>Nombre:</label>
      <input type=”text” id=”nombre” required />
      <label for=”email”>Email:</label>
      <input type=”email” id=”email” required />
      <label for=”calificanos”>Calificanos:</label>
      <input type=”range” id=”calificanos” />
      <label for=”edad”>Edad</label>
      <input type=”number” id=”edad” />
      <label for=”fecha”>Fecha:</label>
      <input type=”date” id=”fecha” />
      <textarea id=”texto” cols=”50” rows=”10”></textarea>
      <input type=”submit” id=”submit” value=”Enviar” />
</form>

Bien vayamos por partes, la etiqueta label se utiliza para indicar a un input que esta etiqueta es para él y se debe usar el atributo “for”, el identificador(id) del input tiene que ser igual al atributo for de label que queremos relacionar, os lo explico más claramente con código:

<form id="formulario">
      <label for=”nombre”>Nombre:</label>
      <input type=”text” id=”nombre” />
</form>

Como podemos ver for es igual a nombre, así como id es igual a nombre, así se relaciona la etiqueta label con input, dentro de label incluiremos el texto que queramos que aparezca al lado del input, es decir, en este caso al lado de la caja de texto. Para definir una caja de texto simplemente incluimos dentro de input el atributo “type” que será igual a “text”, es decir 
<input type=”text” />

Hay que tener en cuenta que para cada input hay que escoger el type o tipo adecuado, si en la caja del input quieres que escriban su email usa <input type=”email” /> para que puedan dar una puntación a tu página usa <input type=”range” /> para la fecha usa <input type=”date” /> y para que pongan su edad usa <input type=”number” /> hay que recalcar que Html5 aún no está completamente estandarizado y eso significa que no todos lo navegadores interpretarán nuestro código de igual manera o sí el navegador está desactualizado probablemente no pueda mostrar ciertas partes del código.

La mejor opción para probar los estándares de Html5 es usar el navegador opera o google chrome, en cuanto a navegadores viejos más adelante veremos como implementar una librería llamada “modernizr” con la que hasta IE5 podrá reconocer nuestro código Html5.

Una cosa más sobre la etiqueta input, podemos añadir el atributo “required” así indicamos que el formulario no se envía si no se ha completado ese campo, por ejemplo, si queremos que el email sea obligatorio para enviar el formulario necesitamos este código:

<form id=”formulario”>
      <label for=”email”>Email:</label>
      <input type=”email” id=”email” required />
</form>

Después de añadir todos nuestros input para que dejen su información tenemos que usar la etiqueta <textarea> esta es la clásica área de texto en la que el usuario escribe el mensaje destinado a nosotros. Igual que antes os mostraré el código completo y después lo explico por partes:

<form id="formulario">
      <label for=”nombre”>Nombre:</label>
      <input type=”text” id=”nombre” required />
      <label for=”email”&gtEmail:</label>
      <input type=”email” id=”email” required />
      <label for=”calificanos”>Calificanos:</label>
      <input type=”range” id=”calificanos” />
      <label for=”edad”>Edad:</label>
      <input type=”number” id=”edad” />
      <label for=”fecha”>Fecha:</label>
      <input type=”date” id=”fecha” />
      <textarea id=”texto” cols=”50” rows=”10”></textarea>
      <input type=”submit” id=”submit” value=”Enviar” />
</form>

La etiqueta textarea la he colocado justo antes del botón de enviar, es decir, antes del input con type igual a submit: <input type=”submit” id=”submit” value=”Enviar” /> value es el texto que aparecerá en el botón para enviar la información, si usas este atributo en otro input estarás indicando el valor que se enviará por defecto si el visitante no escribe nada, es decir si usas este código:

<form id="formulario">
      <label for=”nombre”>Nombre:</label>
      <input type=”text” id=”nombre” value=”Sin nombre” />
      <input type=”submit” id=”submit” value=”Enviar” />
</form>

Dado que el atributo value toma el valor de “Sin nombre” eso será lo que se envíe a la base de datos si el visitante no lo modifica.

Continuemos con textarea, en esta etiqueta debemos indicar los atributos cols(columnas) y rows(renglones), además de añadirle un identificador “id” quedaría así nuestro código:

<textarea id=”texto” cols=”50” rows=”10”></textarea>

Ahora vamos a trabajar con CSS3.

Muchos utilizan la etiqueta <style></style> dentro de <head></head> para indicar los estilos CSS, yo recomiendo utilizar un nuevo archivo y guardarlo como “nombre.css” donde puedes sustituir la palabra nombre por lo que quieras, pero tiene que acabar en “.css”. Así tendremos un código más limpio lo que hace que sea más fácil seguir escribiendo código. Esto lo comparo con una habitación, si está cada cosa en el mueble que tiene que estar no tendrás dificultades para encontrar lo que busques, por el contrario si dejas las cosas por ahí tiradas vas a tener que quitar todas las cosas e ir mirando una por una, es decir, el trabajo que harías en 1 minuto tardas 15.

Ahora enlazaremos nuestra hoja de estilos CSS con HTML5, para ello dentro head añadimos la etiqueta “link”:

<!DOCTYPE html>
<html lang=”es”>
<head>
      <meta charset=”utf-8” />
      <title></title>
      <link rel=”stylesheet” href=”nombre.css” />
</head>
<body>

</body>

</html>

Si os fijáis en la etiqueta link añadí los atributos “href” y “rel”, href se utiliza para enlazar las distintas páginas de una web o, como en este caso, para enlazar una hoja de estilos, rel se utiliza para indicar que relación tiene el código HTML5 con el enlace que vamos a añadir, en este caso colocamos “stylesheet” dado que es “hoja de estilos” en inglés. En href tendremos que indicar la ruta de nuestra hoja de estilos, si la tienes en la misma carpeta que el archivo ".html" solo tendrás que poner el nombre con la extensión ".css".

Ahora unos conceptos básicos para trabajar con CSS:

  • Los identificadores “id” se usarán para dar estilos en css, si el identificador es igual a nombre, id=”nombre”, entonces tenemos que escribir en CSS un almohadilla(#) delante del identificador de esta forma:

#nombre
{


}

Dentro de las llaves es donde añadiremos los estilos para la etiqueta que tenga el identificador nombre.

  • Para darle estilos a una etiqueta en concreto simplemente escribiremos el nombre, si queremos darle estilos a la etiqueta <body> escribiremos:

body
{

}

Y aunque en este caso no las utilizaremos, para añadir clases tenemos que poner el atributo class dentro de la etiqueta que queramos en HTML5 de esta forma:

<label class=”etiqueta”></label>

En CSS se escribiría de esta forma:

.etiqueta
{

}

La diferencia entre“id” y “class” radica en que este último se puede añadir a varias etiquetas para crear una clase y que los estilos modifiquen a todos los que estén dentro de esa clase, en cambio id como su nombre indica, identifica a una sola etiqueta y por tanto solo se puede tener una id igual, es decir, este código sería incorrecto:

<input type=”text” id=”nombre” />
<input type=”email” id=”nombre”/>

No pueden haber dos ids iguales, tendría que ser de esta forma:

<input type=”text” id=”nombre” />
<input type=”email” id=”email”/>

Ahora daremos estilos a nuestro formulario, pondré de nuevo el código HTML5 para que podáis ver a que etiqueta vamos aplicando los cambios:

<form id="formulario">
      <label for=”nombre”>Nombre:</label>
      <input type=”text” id=”nombre” required />
      <label for=”email”&gtEmail:</label>
      <input type=”email” id=”email” required />
      <label for=”calificanos”>Calificanos:</label>
      <input type=”range” id=”calificanos” />
      <label for=”edad”>Edad:</label>
      <input type=”number” id=”edad” />
      <label for=”fecha”>Fecha:</label>
      <input type=”date” id=”fecha” />
      <textarea id=”texto” cols=”50” rows=”10”></textarea>
      <input type=”submit” id=”submit” value=”Enviar” />
</form>

El primer problema que veremos es que nuestro formulario aparece de forma horizontal y en este caso queremos que aparezca vertical. Para cambiarlo tenemos que añadir estilos a la etiqueta label de esta forma:

label
{
      display: block;
}

Con display: block; conseguiremos que nos muestre todas las etiquetas label como un bloque y quedará de forma vertical el formulario, también ten en cuenta que en todas las propiedades de CSS al final tenemos que cerrarlas con punto y coma(;).

También pondremos un color de fondo a nuestra página de esta forma:

body
{
      background-color: #FFD24A;
}

Podéis ver en esta página los códigos de cada color en HTML5: http://html-color-codes.info/codigos-de-colores-hexadecimales/

Añadiremos un selector para que nuestros input cambien el color de su borde cuando ponemos el cursor encima y cuando hacemos clic.

Antes de nada vamos a centrar nuestro formulario y ha definir cuantos píxeles ocupara su ancho, usaremos la id de nuestra etiqueta form:

#formulario
{
      width: 960px;
      margin: 0 auto;
      text-align: center;
}

La propiedad width indica cuanto de ancho va a ser nuestro formulario, margin con su valor “0 auto” sirve para centrar un bloque de contenido y text-align con su valor “center” centra el texto.
Os habréis dado cuenta de que aún no está centrado, para hacerlo añadiremos propiedades a nuestros input:

input
{
      margin: 0 auto;
      display: block;
      border-color: black;
}

Display block lo añadimos para que el botón de enviar se coloque debajo de textarea y no al lado como estaba antes, border-color sirve para cambiar el color de los bordes, en este caso a negro.

Ahora vamos a hacer el formulario más interactivo haciendo que cambie el color del borde de los input al poner el cursor encima y hacer clic.

input:hover    /*El selector hover se activa cuando el usuario coloca el cursor encima*/
{
      border-color: red;
}

input:focus    /*El selector focus se activa cuando el usuario hace clic encima*/
{
      border-color: blue;
}
Lo siguiente será hacer que nuestro textarea tenga sombra e impedir que los visitantes puedan modificar su tamaño con el cursor:

textarea
{
      min-width:500px;
      max-width:500px;
      min-height:300px;
      max-height:300px;
      box-shadow:inset 0px 0px 20px rgba(0,0,0,1);
      padding:15px;
}

La palabra min quiere decir mínimo y max máximo, son los valores mínimos y máximos que tomará nuestro textarea, como no queremos que se pueda modificar tienen que ser iguales el mínimo que el máximo.

Con box-shadow definiremos la sombra, si añadimos “inset” como hice yo quiere decir que la sombra estará por dentro, si no ponéis nada estará por defecto fuera. Los valores en píxeles se aplican el primero al desplazamiento horizontal de la sombra y el segundo al desplazamiento vertical, como no queremos desplazarla los dejamos en 0px, el último define cuanto se difuminará la sombra, a lo que se refiere básicamente es cuantos píxeles ocupará la sombra, la idea es como cuando pintamos con carboncillo y luego frotamos con el dedo, lo que hacemos es difuminar las lineas que hayamos pintado.

Por último el color de la sombra, podéis poner el color que queráis, aunque dado que en el mundo real las sombras son negras he preferido usar el canal rgba(0,0,0,0)(rojo, verde, azul y alfa), de aquí nos interesa el canal alfa que se ocupa de la transparencia dado que las sombras no son completamente opacas sino que son un poco transparentes, esto se imita muy bien añadiendo un 1 al canal alfa. Hay que tener en cuenta que el canal alfa solo puede tomar valores entre 0 y 1.

Padding se utiliza, en este caso, para marcar la anchura que separará los bordes con el texto.

Si tenéis alguna duda podéis descargar los archivos .html y .css que he hecho con lo aprendido en este curso y así lo comparáis con vuestro código para ver los fallos:

Si quieres ayudar al autor usa este enlace:
http://adf.ly/cwc1M

Descargar sin publicidad:
https://www.mediafire.com/?x8pwm2w48jsvlow

PASSWORD DEL RAR: http://informaticayfinanzas.blogspot.com/

Os agradezco que hayáis leido este artículo, si os ha sido útil escribidme un comentario y compartidlo para seguir haciendo cursos de calidad para vosotros.

Twitter: @Charlie_IF

0 comentarios:

Publicar un comentario