Header Ads

Formulario HTML Con Tablas y un poco de CSS

En esta entrada crearemos un Formulario con HTML, aplicando el uso de Tablas y para concretar daremos un poco de CSS , para darle una apariencia personalizada. Si no tienen muy centrada la idea de trabajar con Tablas HTML, pueden tomarse un tiempo por nuestras entradas sobre TABLAS HTML.




Espesaremos creando nuestro formulario, situando cada objeto del formulario dentro de una fila de la tabla:

Código HTML:



Resultado:

Nombre
Apellido Paterno
Apellido Materno
E-mail
edad
sexo Masculino Femenino

Como vemos en el resultado ya tenemos nuestro formulario terminado, si desean pueden agregar mas objetos de formularios dependiendo de los datos que deseen obtener.

Es un formulario un poco muerto y sin gusto, para darle un aspecto mas atractivo aplicaremos un poco de estilos CSS:

Código CSS:



Insertado el CSS en el Documento HTML, tendríamos el código Final.

Código Final:



Resultado:

Nombre
Apellido Paterno
Apellido Materno
E-mail
edad
sexo Masculino Femenino

Ahora ya tenemos nuestro formulario personalizado, con un poco de CSS.

Caulquier duda o Aporte hacerlo por Comentarios. Gracias Por su tiempo!




7 comentarios:

  1. A donde se supone que envias los datos del formulario sino declaraste ningun form?

    ResponderEliminar
    Respuestas
    1. jajajajjajajaa lo mataste con eso.

      Eliminar
  2. a este formulario le falta un form. Este formulario no vale para nada porque no prodrá enviar ningun dato. Pero bueno por lo menos sirve el css

    ResponderEliminar
  3. el CSS sirve, solo le falta meter la tabla dentro de un " < form action = "archivo.php" method = " post "> < /form > " <--(todo junto)
    pero el aporte vale (y) !

    ResponderEliminar
  4. No me gusto.....
    Esta pésimo este formulario, creo que no entiendo por que no le pusiste form , en los comentarios anteriores tienen razón solo nos confundiste mas y eso no sirve ya que hay gente que necesita saber del caso y la terminas confundiendo :) para la próxima se mas completa y ten mejor en cuenta el código ya que en verdad no sirvió para nada fue el peor formulario que vi en todo google
    QUE DECEPCIÓN!
    ;)

    ResponderEliminar
  5. Se me acaban de derretir los ojos por el formulario x diseño ... y encima sin form :v ya uno encuentra cualquier cosa en internet.

    ResponderEliminar
    Respuestas
    1. El diseño, y la programación solo es la parte básica ... aún no hemos entrado a nivel extraterrestre jajaja, pero si ya estas en nivel avanzado estamos preparando buenos tutoriales para ti y otros que comentaron el artículo.

      Eliminar