如何使用HTML按钮标签发送HTML表单POST请求？

Question

As of now, I have a user-input structure where the user provides their username/password then clicks either "login" or register" which then ends a post request with that information.

<form action="{% url 'users:login' %}" method = "post">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="passwd"><br>
    <input type="submit" name="login" value="Log In">
    <input type="submit" name="adduser" value="Add User">
</form>

What I want is to replace the two submit buttons with tags, ie:

<form class="control-group" action="{% url 'users:login' %}" method = "post">
     <input type="text" placeholder="Username" name="username">
     <input type="password" placeholder="Password" name="passwd">
     <button class="button-style">Login</button>
     <button class="button-style">Register</button>
 </form>

But I'm unsure how to, for example, send the form's POST request with the correct information (username, password, type (login or register)) as I do in the first example.

Answer 1

You can use a bit a javascript.

Here is what you have to do :

• Register a trigger on each button
• in the triggers :
  • Change the action url
  • Send the form

You should also register a trigger on form validation, and call one of the two trigger defined previously.

Answer 2

there are multiple ways to do so, first your code should work, because the button should submit by default, if not you can do <button type="submit">login</button> , if still does not work, you can use an onclick="myfunction()" and let the function handle the data, but may I ask why do you want to change it? if the reason is styling I am sure you know you can style that with just a class="myClass"

Answer 3

Clicking the buttons will submit the form.

If you want to distinguish which button was clicked, give them name s and value s, just as you did in the first example.

<button class="button-style" name="login" value="Log In">Login</button>

Answer 4

Yes by default the button submits the form. If this does not happen just use

<button type="submit">Login</button>