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.
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”>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>
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”>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>
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;
}
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
.png)
.jpg)