compass/examples/blueprint_default/parts/forms.html.haml

!!!
%html{ :lang => "en" }
  %head
    %meta{ :content => "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
    %title
      Blueprint Forms Tests
    /
      Framework CSS
    %link{ :href => "../stylesheets/screen.css", :rel => "stylesheet", :media => "screen, projection", :type => "text/css" }
    %link{ :href => "../stylesheets/print.css", :rel => "stylesheet", :media => "print", :type => "text/css" }
    /
      [if lt IE 8]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]
  %body
    .container.showgrid
      %h1
        Forms
      %hr
      .span-12
        %form#dummy{ :action => "", :method => "post" }
          %fieldset
            %legend
              Simple sample form
            %p
              %label{ :for => "dummy0" }
                Text input (title)
              %br
              %input#dummy0.title{ :name => "dummy0", :type => "text", :value => "Field with class .title" }
            %p
              %label{ :for => "dummy1" }
                Another field
              %br
              %input#dummy1.text{ :name => "dummy1", :type => "text", :value => "Field with class .text" }
            %p
              %label{ :for => "dummy2" }
                Textarea
              %br
              %textarea#dummy2{ :name => "dummy2", :rows => "5", :cols => "20" }
            %p
              %input{ :type => "submit", :value => "Submit" }
              %input{ :type => "reset", :value => "Reset" }
      .span-12.last
        .error
          This is a &lt;div&gt; with the class
          %strong
            \.error
          \.
          %a{ :href => "#" }
            Link
          \.
        .notice
          This is a &lt;div&gt; with the class
          %strong
            \.notice
          \.
          %a{ :href => "#" }
            Link
          \.
        .success
          This is a &lt;div&gt; with the class
          %strong
            \.success
          \.
          %a{ :href => "#" }
            Link
          \.
        %fieldset
          %legend
            Select, checkboxes, lists
          %p
            %label{ :for => "dummy3" }
              Select field
            %br
            %select#dummy3{ :name => "dummy3" }
              %option{ :value => "1" }
                Ottawa
              %option{ :value => "2" }
                Calgary
              %option{ :value => "3" }
                Moosejaw
          %p
            %label{ :for => "dummy4" }
              Select with groups
            %br
            %select#dummy4{ :name => "dummy4" }
              %option
                Favorite pet
              %optgroup{ :label => "mammals" }
                %option
                  dog
                %option
                  cat
                %option
                  rabbit
                %option
                  horse
              %optgroup{ :label => "reptiles" }
                %option
                  iguana
                %option
                  snake
          %p
            %label
              Radio buttons
            %br
            %input{ :name => "example", :type => "radio" }
            Radio one
            %br
            %input{ :name => "example", :type => "radio" }
            Radio two
            %br
            %input{ :name => "example", :type => "radio" }
            Radio three
            %br
          %p
            %label
              Checkboxes
            %br
            %input{ :type => "checkbox" }
            Check one
            %br
            %input{ :type => "checkbox" }
            Check two
            %br
            %input{ :type => "checkbox" }
            Check three
            %br
      .span-24.last
        %fieldset
          %legend
            Alignment
          %p
            %label{ :for => "dummy5" }
              Select field
            %select#dummy5{ :name => "dummy5" }
              %option{ :value => "1" }
                Ottawa
              %option{ :value => "2" }
                Calgary
              %option{ :value => "3" }
                Moosejaw
          %p
            %label{ :for => "dummy6" }
              Text input (title)
            %input#dummy6.title{ :name => "dummy6", :type => "text", :value => "Field with class .title" }
          %p
            %label{ :for => "dummy7" }
              Select field
            %select#dummy7{ :name => "dummy7" }
              %option{ :value => "1" }
                Ottawa
              %option{ :value => "2" }
                Calgary
              %option{ :value => "3" }
                Moosejaw
            %label{ :for => "dummy8" }
              Another field
            %input#dummy8.text{ :name => "dummy8", :type => "text", :value => "Field with class .text" }
      .span-24.last
        %form.inline{ :action => "", :method => "post" }
          %fieldset
            %legend
              A form with class "inline"
            .span-3
              %label{ :for => "a" }
                Label A:
              %select#a{ :name => "a" }
                %option{ :value => "0" }
                  All
            .span-2
              some text
            .span-3
              %input#o.checkbox{ :type => "checkbox", :name => "o", :value => "true", :checked => "checked" }
                checkbox one
            .span-3
              %label{ :for => "b" }
                Label B:
              %select#b{ :name => "b" }
                %option{ :value => "0" }
                  All
            .span-2
              %a{ :href => "" }
                A Hyperlink
            .span-8
              %input#q.text{ :type => "text", :name => "q", :value => "Field with class .text" }
            .span-2.last
              %input.button{ :type => "submit", :value => "submit" }
              / WTF This doesn't render correctly without some space.
              &nbsp;
      %hr
      %p
        %a{ :href => "http://validator.w3.org/check?uri=referer" }
          %img.top{ :src => "valid.png", :height => "31", :alt => "Valid HTML 4.01 Strict", :width => "88" }