Login form on top nav with zurb foundation - html

Question

I've already learned bootstrap but I'm trying to learn foundation for a different project just to get some exposure to it. I'm wondering if there's any simple way to add a username/password form to the top nav bar similar to how bootstrap does? I've checked out the template called workspace here: http://foundation.zurb.com/page-templates/workspace.html and it has a search box in the top that looks very similar to what I want, but when I wrap a form around it, it goes haywire. Anybody have an idea how to do this in foundation?
What I'm trying to work with:
<nav class="top-bar contain-to-grid">
<ul>
<li class="name"><img src="/images/betalogo.jpg"></li>
<li class="toggle-topbar"></li>
</ul>
<section>
<ul class="left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<ul class="right">
<li>
<input type="text">
</li>
<li>
<input type="password">
</li>
<li class="has-button">
<input type="submit" class="small button" value="Log In">
</li>
</ul>
</section>
</nav>

Answer 1

From the source…
<ul class="right">
<li class="search">
<form>
<input type="search">
</form>
</li>
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
</ul>
This will get you the UI you want but not necessarily the functionality. I find the issue with this is that the submit button is outside the form—thereby useless; unless you use some JS to glue the button to the form which, frankly, breaks K.I.S.S.
Alternatively, you could use new rows inside your form. Thanks to Foundation's row nesting. Be sure to .collapse the row is you want the button to be right beside the search bar; omit this to keep the gutter between columns.

Answer 2

i know this is an old thread and i am sure you figured this out by now, but maybe someone else can use the answer.
<!-- Right Nav Section -->
<
ul class="right">
<li class="divider hide-for-small"></li>
<li class="active">Artists</li>
<li class="divider"></li>
<li class="active">Shows</li>
<li class="divider"></li>
<li class="active">Radio</li>
<li class="divider"></li>
<li class="active">Blog</li>
</li>
<li class="divider"></li>
<?php if(empty($_SESSION['user_id'])){ ?>
<li class="has-form signinform">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<div class="row collapse">
<div class="columns username">
<input type="text" placeholder="Username" name="username">
</div>
<div class="columns password">
<input type="text" placeholder="Password" name="password">
</div>
</div>
</li>
<input type="submit" value="Login" name="login" class="button">
</form>
<?php }
######end show login######
?>
</ul>
This is just a past from my page, but you can see if you need to put a form in it you have to use the class "has-form" in the li tag

Answer 3

Try wrapping each list item in a column.
<ul class="right">
<div class="column">
<li class="username"><form><input type="text" placeholder="Username" /></li></div>
<div class="column">
<li><input type="password" placeholder="Password"></li></div>
<div class="column">
<li class="has-button"><a class="small button" href="#">Login</a></form></li></div>
</ul>