Submit button too close to form - Bootstrap

Question

The submit button of the form tends to be soo close to the field for some reason. I am using Bootstrap by the way.

Code:

<div class="row" >
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form class="form-group" role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
    <input type="email" class="form-control" name="email" value="$email" id="email">
    <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div

The site has other forms in other pages and all, and doesnt really had the problem. Not sure why is it happening for this one.

Note : closing <form> just before the button fixes the issue, but then it wont submit since the button is no longer the part of the form.!

Looking to find whats wrong in the code, rather than a hack fix in the css.

This is how it looks.

FIX : In the code, made <div class="form-group"> and ended the div before the input button. Fixed it. Fixed Codes, just incase come here from Google with similar issue :

<div class="row" >
<div class="col-xs-6">
<h3 class="page-header">Contact Email</h3>
<div class="form-group">
<form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
<input type="email" class="form-control" name="email" value="$email" id="email">
</div>
<button type="Submit" class="btn btn-success pull-right">Submit</button>
</form>
</div>

Answer 1

See the demo

Standard rules for the form layouts:

Always use <form role="form"> (helps improve accessibility for people using screen readers) Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class .form-control to all textual <input>, <textarea>, and <select> elements like, for eg:

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

For your case, it should be like,

<div class="row" >
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>
    <form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
     <div class="form-group">
    <input type="email" class="form-control" name="email" value="$email" id="email">
     </div>
    <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div>

Answer 2

Update for Bootstrap 5:

Instead of 'form-group' use 'mb-3', for example. And instead of 'pull-right' use 'float-end'.

A React example:

return (
    <>
        <div className={"container"}>
            <h4>Things to do:</h4>

            <div className={'row'}>
                <div className="col-xl-12 col-lg-6 col-xs-6  ">
                    <form role="form" onSubmit={todoSubmitHandler}>
                        <div className="mb-3">
                            <label htmlFor="description" className="form-label">Description</label>
                            <textarea name="description" className="form-control" id="description-input" placeholder={'Type the description'} cols={10} rows={4}></textarea>
                        </div>

                        <div className="mb-3">
                            <button type="submit" className="btn btn-primary float-end">ADD</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </>
);

And in your specific case it would be:

<div class="row">
    <div class="col-xs-6">
    <h3 class="page-header">Contact Email</h3>

    <form role="form" action="{$_SERVER['PHP_SELF']}" method="POST">
      <div class="mb-3">
        <input class="form-control" name="email" value="$email" id="email" type="email">
      </div>
      <button type="submit" class="btn btn-success float-end">Submit</button>
    </form>
    </div>   
</div>

By the way, the type of the button inside the form is not "Submit". It's "submit".

Good luck.