Ir al contenido



Foto

formulario con 2 columnas y 5 filas


  • Por favor identifícate para responder
12 respuestas en este tema

#1 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 25 febrero 2018 - 07:59

hola foro !!!
esperando me puedan ayudar por si no me voy a volver LOCO he esta viendo mucho videos de como hacer formularios con html 5 y css 3 pero todos dan casi el mismo ejemplo los input van en una sola columna uno abajo de otro pero lo que necesito es poner input en dos columnas con 6 filas ejemplo envio imagen

me podrían AYUDAR ?

GRACIAS


  • 0

#2 Agustin Ortu

Agustin Ortu

    Advanced Member

  • Moderadores
  • PipPipPip
  • 831 mensajes
  • LocationArgentina

Escrito 26 febrero 2018 - 03:57

No se ve la imagen

Yo te diria que no te compliques la existencia haciendo esto vos mismo, ya que es algo que ya ha sido resuelto. Usa un framework CSS. Basicamente lo que hacen es darte unas clases CSS aplicas a tus elementos del HTML y obtienes una mejor apariencia/diseño/caracteristicas; y ademas son web responsive (de acuerdo al tamaño de la pantalla, se ajustan)
 
El mas utilizado, el de facto es Bootstrap. A mi me tiene bastante podrido, porque practicamente lo usa todo el mundo y por eso todas las paginas web se ven iguales. Ultimamente he estado usando Bulma, que es mas nuevo, tiene "menos cosas", pero es extremadamente sencillo, y no te obliga a usar Javascirpt (practicamente el 90% es aplicar clases CSS a los elementos)
 
La documentacion es super clara y con ejemplos que ves el codigo en pantalla, listo para copiar y pegar, y el resultado del mismo. En particular para lograr lo que comentas, a vos te interesa utilizar columnas. Tambien pegale un vistazo a la seccion dedicada a los formularios. Al principio te puede resultar raro si nunca usaste un framework CSS, sobre todo porque te hacen anidar elementos (un div de tal clase, y adentro pon un p de esta clase y luego un span) pero te aseguro que el resultado es muchisimo mejor que cualquier cosa hecha a mano.
 
Tu caso seria algo entre estas lineas:
 

html5
  1. <div class="columns">
  2. <div class="column">
  3. <!-- esta seria la "primer columna", dentro de este div pones un input -->
  4. </div>
  5. <div class="column">
  6. <!-- esta seria la "segunda columna", dentro de este div pones un input -->
  7. </div>
  8. </div>
  9. </form>

 
 
 
Hay muchos mas frameworks para utilizar: tenes MaterializeCSS (inspirado en Material Design de Google), SemanticUI, UIKit, ... son infinitos, estos son apenas unos pocos de los que conozco, aunque como te decia, el unico que realmente he usado es Bulma
  • 1

#3 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.262 mensajes
  • LocationArgentina

Escrito 27 febrero 2018 - 09:58

 El mas utilizado, el de facto es Bootstrap. A mi me tiene bastante podrido, porque practicamente lo usa todo el mundo y por eso todas las paginas web se ven iguales. Ultimamente he estado usando Bulma, que es mas nuevo, tiene "menos cosas", pero es extremadamente sencillo, y no te obliga a usar Javascirpt (practicamente el 90% es aplicar clases CSS a los elementos)

 Y yo que estoy empezando a ver cosas con Bootstrap...

Por lo que estuve metiendo mano, me lleva a meter divs y abundancia de clases. Y se me hace que es inevitable esto. Con cualquier framework que se use.

 

A mi eso es lo que no me agrada de como ha evolucionado el desarrollo web. Esto de tener que poner tantos divs, que clases sólo porque nos interesa dar un aspecto/funcionalidad a x cosa... Pero bue, ya se volvieron "estándar" y no queda otra.

Siento que se hubieran evitado esta pesadilla si en lugar de añadir capitas, rediseñar el estandar completamente y pensar las cosas de mejor modo. Esa mezcla de HTML + CSS + JS (y sus hijitos) en principio pareció buena. Y en parte respeta el principio del patrón Layers pero hoy ya se fue de las manos.

Se tendría que haber sometido a rediseño el mundo web.

 

Les hizo falta la evolución madurativa similar a la que experimentó el desarrollo de escritorio. Que fue más ordenado, cuidado.

 

Saludos,


  • 0

#4 Agustin Ortu

Agustin Ortu

    Advanced Member

  • Moderadores
  • PipPipPip
  • 831 mensajes
  • LocationArgentina

Escrito 27 febrero 2018 - 12:54

El tema es que si tenes que meter html "pelado", puedo entender que se vuelva un quilombo
 
La mayoria de los desarrollos webs hoy en dia (lease, frameworks) utilizan un motor de plantillas. Es muy similar a lo que hacen Delphi/Lazarus, pero sin el WYSIWYG. A grosso modo, creo que para crear "layouts", html es mas sencillo/efectivo/productivo que la propuesta de Delphi. Ahora el problema es cuando tenes que darle "vida" o comportamiento a ese html. Ahi tenes que meter mano con Javascript. Y ademas de que es un asco, es complicado (o costoso) hacer cosas sencillas, como compartir logica entre cliente/servidor.
En este aspecto Delphi lo pasa por arriba, cuestion tan sencilla de asignar eventos y escribir el codigo que se antoje (esto puede ser tan positivo como negativo, en fin, si quien programa lo hace mal, no es totalmente la culpa de la herramienta, aunque podria ser un poco mas "sosa" y facilitar las buenas practicas y no que cada uno haga lo que quiera)
 
Ahora volviendo  a lo primero, el tema de las plantillas. No necesariamente tenes que usar el framework en su totalidad para utilizar el motor de plantillas. Un motor de plantillas es simplemente una DSL que entiende los elementos del HTML y te permite "escupir" cualquier codigo, expresion, funcion del lenguaje de turno. Hay millones de motores para los distintos lenguajes. Por ejemplo en PHP tenes Twig, que es el motor que utiliza Symfony; tambien tenes Blade que es el que usa Laravel. En fin, ls dos son muy similares y ofrecen caracteristicas y una sintaxis muy comun. Entonces vos le decis al motor "toma esta plantilla, procesala y dame el html final como respuesta" y eso es lo que le mandas al cliente como respuesta
 
Por ejemplo, en Blade, para hacer "eco" de una expresion, simplemente se escribe algo como esto:
 


html5
  1. {{ unaFuncion() }}
  2.  
  3. {{ $variable }}
  4.  
  5. {{ $objeto->unMetodo() }}
  6.  
  7. {{ $objeto->unaPropiedad }}
  8.  
  9. {{ Clase::metodoEstatico() }}

 
Tambien permite escribir condicionales, bucles, en fin.. es practicamente una "mezcla" entre el lenguaje de turno que soporta el motor (sea PHP, Ruby, Python, etc) y HTML. Ademas tiene otra ventajas como por ejemplo te "limpia" las cosas que imprimas (al menos, por defecto, usando {{ }}, aunque existe la forma de decirle que no lo haga) de los tags html, script, etc, para evitar vulnerabilidades, como la XSS. Por ejemplo, si de alguna manera alguien te mete en la base un registro con el nombre "<script>Alert('hola')</script>" y eso es algo que lo mostras haciendo simplemente un php echo($variable) ejecuta el script; los motores limpian esos tags y te ayudan a defenderte de estos problemas
 
Ahora, lo mas interesante para el hilo en cuestion, es que soportan herencia y composicion. Osea, yo puedo definir un HTML general y extenderlo y agregarle cosas, hasta tambien es posible dejar huecos, lo que seria el equivalente en OO a metodos abstractos, para que las plantillas hijas completen con lo necesario; o tambien puedo definir partials (asi se los conoce en la jerga) e incluirlos en donde corresponda. Algunos motores soportan incluso el concepto de componentes
 
De esta manera se elimina la duplicacion de codigo HTML y se incrementa drasticamente la legibilidad. Podes hacer desaparecer (bueno, la expresion mas correcta seria "hacer mas ameno") el problema de los div anidados. Osea, es mucho mas legible esto:

 

Un ejemplo en Blade
 
master.html
 


html5
  1.  
  2. importar estilos
  3. importar bibliotecas js que son usadas en todas las paginas
  4. improtar fuentes
  5. etc..
  6.  
  7. </head>
  8. @include('navigation') // template HTML en donde esta implementado la navegacion de la pagina, se supone que
  9. // en todas vamos a mostrar el mismo menu..
  10.  
  11.  
  12. @section('content') // este es el "hueco" en donde los hijos pueden redefinir y agregar el html necesario
  13. // la forma sencilla de entenderlo es como un metodo virtual en OOP
  14.  
  15. @include('footer'); // idem navegacion, el pie de pagina es siempre el mismo
  16. </body>

form.html


html5
  1. @extends('master.html') // heredamos todo el head, con los estilos y la navegacion y el footer.
  2. // Completamos el contenido con un formulario
  3.  
  4. @section('content')
  5. <form>
  6. // puedo si quiero meter includes aca, o sections.. se pueden anidar sin problemas
  7.  
  8. // tambien se pueden hacer cosas como esta
  9. @component('input', ['type' => 'text', 'value' => $nombre])
  10. 'Introduce tu nombre'
  11. @endcomponent
  12. </form>
  13. @endsection

En fin, es cierto que parece abrumador al principio, pero soluciona y agiliza muchas cosas y practicando (y no tanto leyendo) te pones al dia en muy poco tiempo.


  • 0

#5 egostar

egostar

    missing my father, I love my mother.

  • Administrador
  • 13.999 mensajes
  • LocationMéxico

Escrito 27 febrero 2018 - 10:38

Excelente la forma como explicas amigo Agustín.  Mis respetos. (y)

 

Saludos


  • 0

#6 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 01 marzo 2018 - 08:18

imagen del formulario

Archivos adjuntos


  • 0

#7 Agustin Ortu

Agustin Ortu

    Advanced Member

  • Moderadores
  • PipPipPip
  • 831 mensajes
  • LocationArgentina

Escrito 01 marzo 2018 - 08:59

Eso parece una aplicacion de escritorio y no una aplicacion web. Con que tecnologias estas trabajando?


  • 0

#8 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 01 marzo 2018 - 09:46

con Visual Fox Pro 9.0

es lo que quiero aprender con nuevas tecnologias, ayudar por favor,

estoy aprendiendo tambien php y mysql 


  • 0

#9 Agustin Ortu

Agustin Ortu

    Advanced Member

  • Moderadores
  • PipPipPip
  • 831 mensajes
  • LocationArgentina

Escrito 01 marzo 2018 - 10:32

Pongamos las cosas en orden. Si estas desarrollando en visual fox, no creo que puedas usar html y css para los formularios. Con visual fox creas aplicaciones de escritorio. Nunca lo he usado, asi que mucho mas no puedo aportar

 

Con php estariamos hablando de un desarrollo web

 

Pero creo que antes te vendria bien algun tutorial o similar para encaminarte un poco


  • 0

#10 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.262 mensajes
  • LocationArgentina

Escrito 01 marzo 2018 - 07:23

Hola,

Buenas Noches.

Al igual que Agustín opino que te estás mareando y confundiendo cosas.

Tu duda inicial planteaba acerca de como diseñar un formulario web, pero de lo que vemos en esa imagen nos hace pensar en aplicación de escritorio.

Ahora tu nos dices que empleas Visual Fox Pro.

 

¿Que es lo que pretendes en realidad? En base a ello podremos asesorarte y llevarte por un mejor camino.

 

Yo inicialmente cuando leí tu pregunta, en lo primero que he pensado es ir por lo más directo y simple. Empezar desde cero: definir la estructura con HTML. Muchos dirán que es un pecado usar table, pero para dar la idea inicial viene muy bien. Lo que tu buscas fácilmente se puede resolver con algo así:


html5
  1. <tr>
  2. <td>F1 - C1</td>
  3. <td>F1 - C2</td>
  4. </tr>
  5. <tr>
  6. <td>F2 - C1</td>
  7. <td>F2 - C2</td>
  8. </tr>
  9. <tr>
  10. <td>F3 - C1</td>
  11. <td>F3 - C2</td>
  12. </tr>
  13. <tr>
  14. <td>F4 - C1</td>
  15. <td>F4 - C2</td>
  16. </tr>
  17. <tr>
  18. <td>F5 - C1</td>
  19. <td>F5 - C2</td>
  20. </tr>

Dentro de cada td simplemente pones un tag <input>  y listo. Ya tienes tu "matriz" de 2 columnas y 5 filas llena de input. El texto Fx - Cx lo puse sólo para ilustrar cada celda.

Con CSS le puedes dar el estilo que uno quiera y apoyándote en clases puedes jugar con JS y darle eventos/funcionalidades.

A veces no se necesita de mucha patafernalia. Pensemos en lo simple.

 

Boostrap, y otros frameworks en esencia, y en última, lo que hacen es simplemente extender el concepto CSS+JS y vienen con clases/estilos y scripts JS (JQuery) que le añaden más dinamismo/funcionalidad y no hay que estar programando JS que ya está hecho. Pero sigue siendo la misma cosa de toda la vida... tu pones los tags, le asocias ids, las clases que ellos te ofrecen (y/o las que tu extiendas de éstos si requieres), names y juegas con JQuery.

Puedes incluso crearte tu propio framework, pero no podrás escaparte de que para hacer cualquier cosa se necesite poner tags, ids, clases, names y jugar con JS.

 

Si tu duda es Web y va en lo que se propuso en el hilo, sigamos acá. Pero si en realidad estás pensando en Visual Fox Pro lo mejor es que expongas tus dudas en el foro más adecuado, que para el caso sería la sección "Otros Lenguajes" ya que no tenemos un foro específico para Visual Fox Pro. O bien, en el foro General.

 

Saludos,


  • 1

#11 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 01 marzo 2018 - 07:46

hola a todos gracias por responder, ese sistema esta desarrollado en VFP 9.0 lo que sedeo es volver a desarrollarlo ahora con

HTLM5, CSS3, PHP Y JAVASCRIPT y como base de datos MYSQL

 yo ya lo había intentado hacer con <form><table></table></form> pero al estar buscando en la red vi comentarios de que no era apropiado manejarlo  con tablas

que las tablas eran solo para mostrar datos y como no tengo los conocimiento ni tampoco tengo la experiencia desistí en hacerlo de esa forma hay muchos vídeos de como crear formulario con html y css pero la mayoria por no decir todos son de una sola columna espero me puedan ayudar

GRACIAS


  • 0

#12 Delphius

Delphius

    Advanced Member

  • Administrador
  • 6.262 mensajes
  • LocationArgentina

Escrito 01 marzo 2018 - 08:08

hola a todos gracias por responder, ese sistema esta desarrollado en VFP 9.0 lo que sedeo es volver a desarrollarlo ahora con

HTLM5, CSS3, PHP Y JAVASCRIPT y como base de datos MYSQL

 yo ya lo había intentado hacer con <form><table></table></form> pero al estar buscando en la red vi comentarios de que no era apropiado manejarlo  con tablas

que las tablas eran solo para mostrar datos y como no tengo los conocimiento ni tampoco tengo la experiencia desistí en hacerlo de esa forma hay muchos vídeos de como crear formulario con html y css pero la mayoria por no decir todos son de una sola columna espero me puedan ayudar

GRACIAS

 

No es que no sea apropiado, es que hoy el estandar HTML da otras opciones de como hacerlo. Y se busca que se use estas formas y no la "vieja escuela".

Pero no es ilegal ubicar los inputs dentro de un table.

El código que yo te expuse hace eso. Muestra un table con 5 filas, 2 columnas. Lo que le falta es que dentro de cada TD debes poner un input.

 

El estilo te lo dejo a vos. Por ejemplo, ¿te molesta que se vean los bordes del table? Simple, le ponemos un style="border:0;" al table. Con esto nadie, visualmente hablando a simple vista, se entera de que en realidad existe un table.

Con hacer tu propio estilo CSS, ya sea genérico, o particular para esa tabla se puede hacer que luzca más bonito. Y lo mismo para tus inputs.

 

Más importante que aprender HTML5 es que aprendas HTML primero. El 5 es la versión, lo fundamental son las bases. Si desconoces como se arma un table, si no recuerdas que propiedades acepta algún tag, W3Schools al rescate.

 

Saludos,


  • 1

#13 Noe Velazquez Hernandez

Noe Velazquez Hernandez

    Member

  • Miembros
  • PipPip
  • 20 mensajes

Escrito 01 marzo 2018 - 08:25

GRACIAS...

comienzo con W3Schools. en unos días les comento el avance  que tenga

:ap:   


  • 0