Formulario de Registro con HTML y CSS

En esta entrada crearemos un Formulario de Registro Con HTML y CSS, de una manera muy fácil y concreta, no me pasare la entrada explicando detalladamente las lineas de código que utilizaremos ya que en entradas anteriores vimos los Objetos de Formulario, sus propiedades y como usarlos; Si aun no tienen idea de como funcionan, les recomiendo visitar las entradas respecto a Objetos de Formulario.

Creando formulario de registro:

Para empezar con la creación de nuestro Formulario de registro primero crearemos la estructura HTML, que sera el entorno y cuerpo del formulario:
Código HTML:
<html> <head> <title>Formulario de Registro</title> </head> <body> <form name="form" method="post" action="http://neytortec1.blogspot.com/feeds/posts/default"> <table width="393" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#999999"><tr> <td colspan="2" align="center" bgcolor="#0066CC"> <span class="Estilo1">Registro de postulante</span> </td> </tr><tr> <td width="110" bgcolor="#D7D7FF"><strong>Nombres</strong></td> <td width="260" bgcolor="#FFFFFF"> <input name="nombres" type="text" id="nombres" /> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Apellido Paterno </strong></td> <td bgcolor="#FFFFFF"><input name="apellidopaterno" type="text" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Apellido Materno </strong></td> <td bgcolor="#FFFFFF"><input name="apellidomaterno" type="text" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Sexo</strong></td> <td bgcolor="#FFFFFF"> <input name="sexo" type="radio" /> Masculino <input name="sexo" type="radio" /> Femenino </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>DNI</strong></td> <td bgcolor="#FFFFFF"><input name="dni" type="text" size="8" maxlength="8" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Dirección</strong></td> <td bgcolor="#FFFFFF"><input name="direccion" type="text" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Email</strong></td> <td bgcolor="#FFFFFF"><input name="email" type="text" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Ciudad</strong></td> <td bgcolor="#FFFFFF"> <select name="ciudad" id="ciudad"> <option value="">Seleccione</option> <option value="1">Lima</option> <option value="2">Tarapoto</option> <option value="3">Cusco</option> <option value="4">Iquitos</option> <option value="5">Tacna</option> <option value="7">Piura</option> <option value="8">Chiclayo</option> <option value="9">Tumbes</option> </select> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Carrera</strong></td> <td bgcolor="#FFFFFF"> <select name="carrera" id="carrera"> <option value="">Seleccione</option> <option value="1">Ingeniería de Sistemas e Infromática</option> <option value="2">Ingeniería Civil</option> <option value="3">Arquitectura</option> <option value="4">Ingeniería Agroindustrial</option> <option value="5">Medicina Humana</option> <option value="6">Medicina Veterianaria</option> </select> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Colegio</strong></td> <td bgcolor="#FFFFFF"><input name="colegio" type="text" id="colegio" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Tipo Colegio </strong></td> <td bgcolor="#FFFFFF"><input name="tipocolegio" type="radio" value="radiobutton" />Nacional <input name="tipocolegio" type="radio" value="radiobutton" /> Privado</td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Intereses</strong></td> <td bgcolor="#FFFFFF"> <input type="checkbox" value="checkbox" />Matemáticas<br /> <input type="checkbox" value="checkbox" />Literatura<br /> <input type="checkbox" value="checkbox" />Historia<br /> <input type="checkbox" value="checkbox" />Botánica<br /> <input type="checkbox" value="checkbox" />Medicina<br /> <input type="checkbox" value="checkbox" />Agro </td> </tr><tr> <td colspan="2" align="center" bgcolor="#0066CC"> <input name="enviar" type="button" id="enviar" value="Enviar" /> </td></tr></table></form></body> </html>
Este es el código de nuestro Formulario, el cual al ser ejecutado, nos dará un resultado igual a este:

Registro de postulante

Nombres

Apellido Paterno

Apellido Materno

Sexo Masculino Femenino

DNI

Dirección

Email

Ciudad Seleccione Lima Tarapoto Cusco Iquitos Tacna Piura Chiclayo Tumbes

Carrera Seleccione Ingeniería de Sistemas e Infromática Ingeniería Civil Arquitectura Ingeniería Agroindustrial Medicina Humana Medicina Veterianaria

Colegio

Tipo Colegio Nacional Privado

Intereses Matemáticas
Literatura
Historia
Botánica
Medicina
Agro

Los colores fueron aplicados individualmente en cada celda de la tabla, si desean pueden optimizar esto creando clases y dando estilos de color a esas clases por medio de CSS, pero eso ya queda a criterio de cada uno.
Ahora para dar un poco mas de atractivo, maquillaremos nuestro formulario con un poco de CSS.
Código CSS:
.Estilo1 { color: #FFFFFF; font-weight: bold; } body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } input:hover { background-color:#FFFF99 } input { background-color:#D7D7FF; text-transform:uppercase; }
Ahora uniendo los códigos en un mismo archivo tendremos lo siguiente:
Código HTML y CSS:

<html> <head> <title>Formulario de Registro</title> <style type="" text="text"> .Estilo1 { color: #FFFFFF; font-weight: bold; } body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } input:hover { background-color:#FFFF99 } input { background-color:#D7D7FF; text-transform:uppercase; } </style> </head> <body> <form name="form" method="post" action="http://neytortec1.blogspot.com/feeds/posts/default"> <table width="393" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#999999"><tr> <td colspan="2" align="center" bgcolor="#0066CC"> <span class="Estilo1">Registro de postulante</span> </td> </tr><tr> <td width="110" bgcolor="#D7D7FF"><strong>Nombres</strong></td> <td width="260" bgcolor="#FFFFFF"> <input name="nombres" type="text" id="nombres" /> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Apellido Paterno </strong></td> <td bgcolor="#FFFFFF"><input name="apellidopaterno" type="text" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Apellido Materno </strong></td> <td bgcolor="#FFFFFF"><input name="apellidomaterno" type="text" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Sexo</strong></td> <td bgcolor="#FFFFFF"> <input name="sexo" type="radio" /> Masculino <input name="sexo" type="radio" /> Femenino </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>DNI</strong></td> <td bgcolor="#FFFFFF"><input name="dni" type="text" size="8" maxlength="8" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Dirección</strong></td> <td bgcolor="#FFFFFF"><input name="direccion" type="text" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Email</strong></td> <td bgcolor="#FFFFFF"><input name="email" type="text" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Ciudad</strong></td> <td bgcolor="#FFFFFF"> <select name="ciudad" id="ciudad"> <option value="">Seleccione</option> <option value="1">Lima</option> <option value="2">Tarapoto</option> <option value="3">Cusco</option> <option value="4">Iquitos</option> <option value="5">Tacna</option> <option value="7">Piura</option> <option value="8">Chiclayo</option> <option value="9">Tumbes</option> </select> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Carrera</strong></td> <td bgcolor="#FFFFFF"> <select name="carrera" id="carrera"> <option value="">Seleccione</option> <option value="1">Ingeniería de Sistemas e Infromática</option> <option value="2">Ingeniería Civil</option> <option value="3">Arquitectura</option> <option value="4">Ingeniería Agroindustrial</option> <option value="5">Medicina Humana</option> <option value="6">Medicina Veterianaria</option> </select> </td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Colegio</strong></td> <td bgcolor="#FFFFFF"><input name="colegio" type="text" id="colegio" size="40" /></td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Tipo Colegio </strong></td> <td bgcolor="#FFFFFF"><input name="tipocolegio" type="radio" value="radiobutton" />Nacional <input name="tipocolegio" type="radio" value="radiobutton" /> Privado</td> </tr><tr> <td bgcolor="#D7D7FF"><strong>Intereses</strong></td> <td bgcolor="#FFFFFF"> <input type="checkbox" value="checkbox" />Matemáticas<br /> <input type="checkbox" value="checkbox" />Literatura<br /> <input type="checkbox" value="checkbox" />Historia<br /> <input type="checkbox" value="checkbox" />Botánica<br /> <input type="checkbox" value="checkbox" />Medicina<br /> <input type="checkbox" value="checkbox" />Agro </td> </tr><tr> <td colspan="2" align="center" bgcolor="#0066CC"> <input name="enviar" type="button" id="enviar" value="Enviar" /> </td></tr></table></form></body></html>

Una ves unido los códigos ya sea en el mismo documento o usando un archivo CSS externo el resultado sera el siguiente: