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:

<title>Formulario de Registro</title>

</head>

<body>

<form name="form" method="post" action="">
  
            <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
Carrera
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:

Ahora uniendo los códigos en un mismo archivo tendremos lo siguiente:

Código HTML y CSS:

<title>Formulario de Registro</title>

.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>

</tr>
<tr>
      <td bgcolor="#D7D7FF"><strong>Carrera</strong></td>
      <td bgcolor="#FFFFFF">

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

Registro de postulante
Nombres
Apellido Paterno
Apellido Materno
Sexo	Masculino Femenino
DNI
Dirección
Email
Ciudad
Carrera
Colegio
Tipo Colegio	Nacional Privado
Intereses	Matemáticas Literatura Historia Botánica Medicina Agro

Aunque no hicimos mucha diferencia con los estilos CSS, conseguimos tener un formulario algo mas elegante que el formulario creado solo con HTML, espero que les sea de utilidad esta entrada, conociendo los diferentes Objetos de Formularios podemos generar diversidad de Formularios ya sean de contacto, registro, etc.

Cualquier duda o aporte hacerlo por comentarios!. Gracias por su tiempo!

7 comentarios:

Unknown07 mayo
te falta validarlos xD
ResponderEliminar
Respuestas
uruguay24 junio
mira teng un gran priblema kiero aser una stablas de registros par mi sitio
ResponderEliminar
Respuestas
uruguay24 junio
y como te desia las tabals kieron q sean a este tipo de esta pagina www.encuentra.antel.com.uy.lacima.ownwap.eu osea qisiera los diseños de usuario registroentrar y eso asi por afuera de mi sitio entendes?¿?y las ulktimas fotyos de los que subieron lo usuario q se vea por fuera gracias alguna sujerencia mi mail es jairosaimon13@hotmail.com o contesta a este foro y te agradesco
ResponderEliminar
Respuestas
uruguay24 junio
a para que veas mi sitio web www.ultrawap.wapego.lt
ResponderEliminar
Respuestas
Unknown01 febrero
hola...quisiera saber como hacer que el segundo select me sake todos los datos cuando seleccione una cosa en el priemr select....:D
ResponderEliminar
Respuestas
Las Gráficas06 diciembre
pero no funciona noregistra la idea es que funcione
ResponderEliminar
Respuestas

Añadir comentario

Formulario de Registro con HTML y CSS

Creando formulario de registro:

COMUNIDAD NEYTUTORIALES:

7 comentarios:

Artículos más leídos