Align on the same line buttons on different Forms

Asked

Viewed 321 times

1

Good morning, I am with the problem that is, two buttons on different Forms do not stay in the same line:

<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>

So I’d like someone to help me get the button Confirm and the button Eliminate stay on the same line.

html css

  • Can’t you make a functional example of that? your code has classes and css that can influence the layout, if you can replicate here the problem is much easier to help

  • but is using another form only because of the action different? could use the same form and just change the action would be simpler and easier to make the layout you want

  • https://jsfiddle.net/tw15c6qj/1/ and instead of having the 2 buttons on different lines, have on the same line

  • 1

    can change the action on click, see if this solution is good that I can explain in the answer: https://jsfiddle.net/p1nrkt60/

  • It worked, thank you!

1 answer

2


I’m not sure it’s a good practice to leave two forms. But what happens is that the default form tag has display:block, so the buttons are separated one on each line.

inserir a descrição da imagem aqui

In CSS you can change by placing a class in .Row who has both forms and putting as display:inline for example.

.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>

Option 2 putting the buttons outside the form

You can use the attribute form="nome-ID" to determine to which form one submit will refer. For this v puts an ID in the tag <form id="nome-ID"> and in the <input> you put form="nome-ID"

The element <form> to which the element <input> is associated (its owner form). The attribute value must be an id of an element <form>. This attribute allows you to place elements <input> anywhere in a document, not just as descendants of its elements <form>. A <input> may only be associated with a single form.

Here you can read more about this technique https://developer.mozilla.org/en-US/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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.