HTML Form Button

Question

I want use my own button in form

When i'm using

<form method="post" action="check_login.php">
    <input class="textbox" name="username" type="text" placeholder="Login">
    <input class="textbox" name="password" type="password" placeholder="Password">

    <div id="buttonPlace">
        <p>Remember Me</p>
    <input type="submit" value="Log in!" />

</form>

it works great. I would like to use my own button. When Im using this code :

<form method="post" action="check_login.php">
    <input class="textbox" name="username" type="text" placeholder="Login">
    <input class="textbox" name="password" type="password" placeholder="Password">

    <div id="buttonPlace">
        <p>Remember Me</p>
    <div id="buttonLogin" type="submit">sing up</div>

</form>

Button doesn't work. Why?

Answer 1

<form method="post" action="check_login.php">
  <input class="textbox" name="username" type="text" placeholder="Login">
  <input class="textbox" name="password" type="password" placeholder="Password">
  <div id="buttonPlace">
    <p>Remember Me</p>
    <button id="buttonLogin" type="submit">Sign up</button>
  </div>
</form>

Answer 2

Div can't have type="submit" property, only form inputs can have different input types property. If you want to style your submit button, use:

<input class="submitbutton" type="submit">Sign up</input>

and then define css style for your button class:

.submitButton {
   .width: 60px;
   .height: 20px;
   .color: #dd5599;
}

Answer 3

If you want to submit form on click of your div, use need to assing its click a function to sumbit the form :-

$( document ).ready(function() {
$( "#buttonLogin" ).click(function() {
 $( this ).closest("form").submit();
});
}

However, it is better to use button or input for submission.