Quiero hacer un formulario que tenga esta estructura: Más o menos así
El caso es que no sé por dónde empezar. He estado buscando cómo poner los elementos en columnas, he probado con <fieldset> con <rows> y con <div> pero no me funciona nada. Página tras página he ido visitando y lo único que tengo en la cabeza es la idea de cómo quiero que quede, pero sin saber cómo.
Si pueden darme al menos un ejemplo de cómo se haría, ya me las apañaría para insertarlo en todas las demás. No sé si hace falta .html, pero lo añado si es necesario.
Si es posible hacerlo únicamente con html y css mejor que mejor, y ¿tendría que cambiar mi formulario entero? He visto algunas páginas que ni siquiera tienen la etiqueta <form>
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
Formulario con columnas
- preguntó
- Web
- 4247 Vistas
- 2 Respuestas
- abierta
2 Respuestas
Hola Buenos Dias,
Podrias utilizar el Framework de Bootstrap (https://getbootstrap.com/docs/3.3/examples/grid/), eso te facilita mucho en cuanto a formularios.
La otra opción que se me ocurre es que utilices una tabla (<table></table>), pero es algo mas tedioso, pero igual te serviría.
Por favor, accede o regístrate para añadir un comentario.
creo que esto te puede ayudar y lo que necesitas es solo html y css solo son div
https://www.w3schools.com/
https://getbootstrap.com/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="col-md-6 offset-md-3">
<form>
<img src="https://miro.medium.com/max/1125/1*wotzQboYWAfaj-7bvGNIkQ.png" alt="Smiley face" height="100%" width="100%">
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="col-sm-6">
<label for="">Radio Button</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="button" name="button">Enviar</button>
</form>
</div>
</body>
</html>
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 690973
- 1
- Jul 5, 2015
Sin Respuesta
-
- 161
- 0
- Oct 18
-
- 185
- 0
- Jul 9
-
- 581
- 1
- Mar 19
-
- 459
- 2
- Feb 26
-
- 5036
- 0
- Nov 7, 2023
-
- 494
- 0
- Sep 19, 2023
-
- 493
- 0
- Ago 21, 2023
-
- 651
- 0
- May 14, 2023
- ver todas
Actividad Reciente
mchojrin respondió hace 4 días
Ayuda , necesito mostrar datos creados solo por el…alyvrs preguntó Oct 19
Ayuda , necesito mostrar datos creados solo por el…ManHol preguntó Jul 9
pasar un archivo de excel a csv en pythonArtEze respondió Abr 24
Alguien sabe, no me ignorenArtEze seleccionó una respuesta Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
No me deja instalar OracleArtEze respondió Abr 24
Formulario que guarde los datos de un jsonArtEze comentó Abr 24
Script /boot/ scraping
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150480 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...