Twitter-bootstrap – Haml Bootstrap search form

hamlruby-on-rails-3twitter-bootstrap

My navbar code looks like this:

%header.navbar.navbar-fixed-top
  %div.navbar-inner
    %div.container
      %nav
        %ul.nav.pull-right
          - if user_signed_in?
            %li= link_to "Sign out", '#'
          - else
            %li= link_to "Sign in", '#'

I am trying to get my navbar to look like that in the Bootstrap navbar page as shown here, however I'm not sure how to translate

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

into Haml. My last attempt look like:

%header.navbar.navbar-fixed-top
  %div.navbar-inner
    %div.container
      %nav
        %ul.nav.pull-right
         %form.navbar-search
           %input.search-query
             - { :type => "text", :placeholder => "Search" }
         - if user_signed_in?
            %li= link_to "Sign out", '#'
          - else
            %li= link_to "Sign in", '#'

While the search bar appears with the proper CSS classes, the :type => "text" and :placeholder => "Search" portions do not exist in my html when I inspect it. How can I fix this? Thanks!

== EDIT ==

Perhaps to make this clearer – I'm using this in a rails 3 app and I realize that I should probably be using form_tag, but I'm not sure how to proceed.

Best Solution

It should work like this:

%header.navbar.navbar-fixed-top
  %nav.navbar-inner
    .container
      %ul.nav
        - if user_signed_in?
          %li= link_to "Sign out", '#'
        - else
          %li= link_to "Sign in", '#'
      = form_tag some_path, :class => "navbar-search pull-left", :method => :get do
        = text_field_tag :name, nil, :class => "search-query span3", :placeholder => "Search"

Be careful with the indentation.

I also advise you to try to start with rails app template and tutorial: http://railsapps.github.com/. As for a beginner it would be an excellent example of what and how to set up and how it should look like.

Related Question