Clever Geek Handbook

Submit button too close to form - Bootstrap

For some reason, the form submit button tends to be su closer to the field. By the way, I am using Bootstrap.

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 on other pages and that's it, and they really didn't have a problem. Not sure why this is happening for this.

Note: closing <form>

before the button fixes the problem, but then it won't submit as the button is no longer part of the form.

Looking to find something wrong in the code, not fixing a hack in the css.

This is what it looks like. Picture

FIX: In code, made <div class="form-group">

and ended div before the enter button. Fixed it. Corrected codes, just come here from google with a similar problem:

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


source to share


2 answers


Insert your element into an element with class form-group

. This class cannot be on the form itself, as you are now ...

<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 class="form-control" name="email" value="$email" id="email" type="email">
      </div>
      <button type="Submit" class="btn btn-success pull-right">Submit</button>
    </form>
    </div>   
</div>


DEMO

+5


source


See demo

Standard rules for form layouts:

Always use <form role="form">

(improves accessibility for people using screen readers) Wrap labels and form controls <div class="form-group">

(necessary for optimal distance) by writing a class .form-control all text <input>

, <textarea>

and <select>

elements, such as, for example:



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

In your case, it should 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="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>
+2


source






More articles:


All Articles