1

Bom dia, eu estou com o problema que é, dois botões em forms diferentes não ficam na mesma linha:

<div class="w3-row-padding">
    <form action="editar_admin.php" method="POST">
        Nome: <input required type="text" name="nome" value="<?php echo $rowa['username_Admin']; ?>"style="width: 300px;"><br><br><br>
        Email: <input required type="email" name="email" value="<?php echo $rowa['email']; ?>"style="width: 300px;"><br><br><br>
        Senha: <input required type="password" name="password" value="<?php echo $rowa['password_Admin']; ?>"style="width: 300px;"><br><br><br>
        <input class="btn" type="submit" name="submit" value="Confirmar a modificação"></form><br><form action="eliminar_admin.php" method="POST"><input class="btn" type="submit" name="submit" value="Eliminar utilizador">
    </form>
</div>

Portanto gostaria que alguém me ajudasse a fazer com que o botão Confirmar e o botão Eliminar fiquem na mesma linha.

5
  • não consegue fazer um exemplo funcional disso? seu código tem classes e css que podem influenciar no layout, se conseguir replicar aqui o problema fica bem mais fácil de ajudar Commented 20/05/2019 às 10:39
  • mas está usando um outro form só por causa da action diferente? poderia usar o mesmo form e apenas mudar a action seria mais simples e fácil de fazer o layout que deseja Commented 20/05/2019 às 10:43
  • jsfiddle.net/tw15c6qj/1 e em vez de ter os 2 butoes em linhas diferentes, ter na mesma linha Sim, estou a usar um form diferente para um action diferente, se poder explicar como faço parar ter tudo no mesmo, agradecia
    – RedCandy
    Commented 20/05/2019 às 10:46
  • 1
    pode mudar a action no click, veja se essa solução fica boa que posso explicar na resposta: jsfiddle.net/p1nrkt60 Commented 20/05/2019 às 10:57
  • Funcionou, Obrigado!
    – RedCandy
    Commented 20/05/2019 às 11:25

1 Resposta 1

2

Não sei ao certo se é uma boa pratica deixar dois forms. Mas o que acontece é que a tag form por default tem display:block, por isso os botões ficam separadas um em cada linha.

inserir a descrição da imagem aqui

No CSS vc pode mudar colocando uma classe na .Row que tem os dois forms e colocando como display:inline por exemplo.

.form-btn form {
    display: inline;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://www.w3schools.com/w3css/4/w3.css" />

<div class="w3-row-padding form-btn">
    <form action="editar_admin.php" method="POST">
        Nome: <input required type="text" name="nome" value="<?php echo $rowa['username_Admin']; ?>"style="width: 300px;">
        Email: <input required type="email" name="email" value="<?php echo $rowa['email']; ?>"style="width: 300px;">
        Senha: <input required type="password" name="password" value="<?php echo $rowa['password_Admin']; ?>"style="width: 300px;">
        <input class="btn" type="submit" name="submit" value="Confirmar a modificação">
    </form>
    <form action="eliminar_admin.php" method="POST">
            <input class="btn" type="submit" name="submit" value="Eliminar utilizador">
    </form>
</div>


Opção 2 colocando os botões fora do form

Vc pode usar o atributo form="nome-ID" para determinar a qual form um submit vai se referir. Para isso v coloca um ID na tag <form id="nome-ID"> e no <input> vc coloca form="nome-ID"

O elemento <form> ao qual o elemento <input> está associado (seu formulário dono). O valor do atributo deve ser um id de um elemento <form>. Este atributo permite que você coloque elementos <input> em qualquer lugar num documento, não apenas como descendentes de seus elementos <form>. Um <input> só pode estar associado a um único formulário.

Aqui vc pode ler mais sobre essa técnica https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/input#attr-form

<link rel="stylesheet" type="text/css" media="screen" href="https://www.w3schools.com/w3css/4/w3.css" />

<div class="w3-row-padding form-btn">
    <form id="form-n1" action="editar_admin.php" method="POST">
        Nome: <input required type="text" name="nome" value="<?php echo $rowa['username_Admin']; ?>"style="width: 300px;">
        Email: <input required type="email" name="email" value="<?php echo $rowa['email']; ?>"style="width: 300px;">
        Senha: <input required type="password" name="password" value="<?php echo $rowa['password_Admin']; ?>"style="width: 300px;">
    </form>
    <form id="form-n2" action="eliminar_admin.php" method="POST">
    </form>
    <input form="form-n1" class="btn" type="submit" name="submit" value="Confirmar a modificação">
    <input form="form-n2" class="btn" type="submit" name="submit" value="Eliminar utilizador">
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .