0

Dispongo de un body con X información detallada recogiendo los datos de varios archivos .php con conexiones a una BBDD.

Quiero agregar a este fichero .php dos botones, "Atrás" y "Siguiente". Deseo que ambos botones estén en el margen inferior izquierdo (Atrás) y margen inferior derecho (Siguiente).

¿Cómo se debería añadir el estilo para que ambos botones estén al mismo nivel pero cada uno en un lado?

¿Por cada botón debe existir un formulario o puede ser uno conjunto? He de decir que la funcionalidad de cada botón es distinta.

<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
    <input type="submit" value="Atrás" name="atras" id="atras">
</form>
<form action="confirmar.php" name="miconfirmar" id="miconfirmar" method="POST" style="text-align:center">
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar">
</form>
3
  • Hola, necesariamente tiene que ser una petición mediante un formulario?, Puedes hacer dos link (<a>) para redireccionar la pagina y con css les das estilos a los botones . Me explico ? Commented el 21 nov. 2017 a las 23:31
  • Tiene que ser formulario, al menos, el botón de Confirmar debido que envía información a otro archivo .php. El botón Atrás simplemente es redirigir a un archivo cualquiera.
    – omaza1990
    Commented el 21 nov. 2017 a las 23:36
  • Bueno te muestro un ejemplo con lo que tenes y como deberías aplicar los estilos. Commented el 21 nov. 2017 a las 23:40

2 respuestas 2

1

Utiliza las bondades de flexbox: Puedes encerrar los dos botones en un div para tener mejor control de ambos (lo he llamado con la clase botonera) y a este contenedor aplicarle display: flex, luego agregarle un justify-content: space-between, que separará ambos elementos el uno del otro según el tamaño establecido para el contenedor. Y listo, es sencillo.

A ese contenedor dentro del form, puedes darle un ancho del 100% para que quede a tope con los bordes del formulario o definir un tamaño según como te convenga.

Otra cosa, no necesitas dos input para tener varios botones dentro del formulario. Ten en cuenta que los input son los que capturan y envían información, pero si sólo necesitas un enlace a otra página, etc, con un <a></a> te basta y sobra.

He aquí un ejemplo:

/*Es aquí donde sucede la separación de ambos*/

form {
  margin: 30px auto;
  width: 600px;
}

.botonera {
  display: flex;
  justify-content: space-between;

  width: 100%;
}

/* Apariencia de los botones */ 
.boton {
  padding: 10px;
  border: 0;
  background: red;
  font-size: 1.2em;
  color: #FFF;
}

.boton-atras {
  text-decoration: none;
}
<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
  
  <!-- Contenedor al que se le aplica flexbox -->
  <div class="botonera">
	  
    <!-- Botón para ir atrás -->
    <a href="atras.html" id="atras" class="boton boton-atras">Atrás</a>
    
    <!-- Botón para confirmar -->
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar" class="boton">

  </div> <!-- Fin del contenedor -->

</form>

Te aconsejo leas un poco sobre lo que es flexbox, para que así puedas llevar tus diseños sin quebraderos de cabeza: Flexbox

¡Un saludo!

2
  • Gracias. ¿Y si quiero que los botones estén en un lugar exacto del documento HTML? ¿Valdría con sólo añadir un left-right: xxx px;? Por ejemplo que uno esté en el centro de la página y otro esté en mitad de la página al margen izquierdo
    – omaza1990
    Commented el 22 nov. 2017 a las 8:39
  • Puedes hacerlo como en el ejemplo que te dejaron abajo, con position: absolute y justamente aplicando el left-right. Pero las posiciones pueden verse afectadas si el contenedor cambia de tamaño o se agregan elementos. En cuanto a posicionamientos sencillos siempre recomiendo flexbox, este te permite posicionar diferentes elementos rápidamente aplicando justify-content y/o align-items al contenedor y align-self al elemento que quieres posicionar dentro de dicho contenedor. Échale un ojo al link que te dejé ahí abajo, junto con algún tutorial y verás lo sencillo que es. Commented el 22 nov. 2017 a las 12:50
1

Aquí te dejo como deberían estar los estilos para que tengas los dos botones en cada lado , en la parte inferior.

La clave esta en la propiedad position: absolute y en darle a cada botón la posición.

Espero que sea de ayuda.

#atras,
#confirmar {
  position: absolute;
  background: skyblue;
  color: black;
  padding: 10px;
  border-radius: 5px;
  bottom: 10px;
  text-decoration: none;
}
#atras:hover,
#confirmar:hover {
  background: rgba(135, 206, 235, 0.8);
  color: blue;
  cursor: pointer;
}

#confirmar {
  right: 10px;
}

#atras {
  left: 10px;
}
<form action="reservar.php" name="mireserva" id="mireserva" method="POST" style="text-align:center">
    <input type="submit" value="Atrás" name="atras" id="atras">
</form>
<form action="confirmar.php" name="miconfirmar" id="miconfirmar" method="POST" style="text-align:center">
    <input type="submit" value="Confirmar" name="confirmar" id="confirmar">
</form>

2
  • ¿Y si quiero que los botones estén en un lugar exacto del documento HTML? ¿Valdría con sólo añadir un left-right: xxx px;? Por ejemplo que uno esté en el centro de la página y otro esté en mitad de la página al margen izquierdo
    – omaza1990
    Commented el 22 nov. 2017 a las 8:39
  • Hola, si es correcto. Hoy en dia hay varias formas de posicionar elementos, esta flexbox como te comentaron ( tienes que agregarles prefixer para la compatibilidad de navegadores ) , la nueva tendencia "CSS Grid layout", flotar elementos con float. A veces te puede dar un dolor de cabeza los posicionamientos. En base a lo que yo te indique te dejo un link para que veas un poco librosweb.es/libro/css/capitulo_5/posicionamiento_absoluto.html Commented el 22 nov. 2017 a las 13:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.