Header Ads

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:



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:




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:

  1. Respuestas
    1. Hola miller, Tienes razón, pero eso ya lo realizaremos en otra entrada no te preocupes. Gracias por Comentar!

      Eliminar
  2. mira teng un gran priblema kiero aser una stablas de registros par mi sitio

    ResponderEliminar
  3. 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
  4. a para que veas mi sitio web www.ultrawap.wapego.lt

    ResponderEliminar
  5. hola...quisiera saber como hacer que el segundo select me sake todos los datos cuando seleccione una cosa en el priemr select....:D

    ResponderEliminar
  6. pero no funciona noregistra la idea es que funcione

    ResponderEliminar