How to turn an HTML navbar <li> into a stand-alone button - html

Question

I am using Bootstrap to create a website and I added functionality for a drop-down to sign up for a newsletter.
How can I make that drop-down into a standalone drop-down separate from the navbar?
I added <button> tags around the entire html code but the sign-up button then separates from the drop-down. Ideally, it would be at the bottom of the drop-drown.
<button class="dropdown btn">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</button>

Answer 1

Not sure why you want to encapsulate the entire form into the button. Use a button instead of an anchor if you need the button.
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">Newsletter Sign Up <b class="caret"></b>
</button>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>
http://jsfiddle.net/moogs/sktewe4s/

Answer 2

Just use a div instead of a button. I think that buttons are not allowed to contain other form elements.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="dropdown">
Newsletter Sign Up <b class="caret"></b>
<ul class="dropdown-menu" style="padding: 15px;min-width: 250px;">
<li>
<div class="row">
<div class="col-md-12">
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="newsletter-signup-name">Name</label>
<input type="email" class="form-control" id="newsletter-signup-name" placeholder="Name" required>
</div>
<div class="form-group">
<label class="sr-only" for="newsletter-signup-email">Email</label>
<input type="email" class="form-control" id="newsletter-signup-email" placeholder="Email address" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-block">Sign Up</button>
</div>
</form>
</div>
</div>
</li>
<li class="divider"></li>
</ul>
</div>