Hacer Pregunta

Conecta

1voto

Formulario con columnas

preguntó
Web
4389 Vistas
2 Respuestas
abierta

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>

por Lilii (1.150 puntos) en Web

2votos

Peter comentado

Solo HTML y CSS, pero para hacerte un ejemplo completo ya hecho hay que esperar unos días. Pero bueno, así se hace y si buscas en Google tutorial formulario CSS o similar, te viene completo.

por Peter (150.480 puntos)

2 Respuestas

3votos

KevinconK Puntos1520

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 KevinconK (1.520 puntos)

1voto

Lilii comentado

Con Bootstrap ya probé, varias veces, y... salió muy mal jaja

No se me había ocurrido lo de la tabla, voy a probarlo a ver si eso me sale bien

por Lilii (1.150 puntos)

1voto

KevinconK comentado

Pero te repito es mucho mas fácil con bootstrap, solo es cuestión que entiendas como funciona la grid. Incluso en el ejemplo que te adjunte lo explican bien (https://mdbootstrap.com/docs/jquery/layout/grid-examples/)

por KevinconK (1.520 puntos)
movido por

3votos

jj19958 Puntos4130

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 jj19958 (4.130 puntos)
editado por

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta