jQuery Mobile form element gallery as haml

gistfile1.txt

.content-primary
  %form{:action => "#", :method => "get"}
    %h2 Form elements
    %p This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally.
    %p Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.ui-input-text{:for => "name"} Text Input:
      %input#name.ui-input-text.ui-body-null.ui-corner-all.ui-shadow-inset.ui-body-c{:name => "name", :type => "text", :value => ""}/
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.ui-input-text{:for => "textarea"} Textarea:
      %textarea#textarea.ui-input-text.ui-body-null.ui-corner-all.ui-shadow-inset.ui-body-c{:cols => "40", :name => "textarea", :rows => "8"}
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.ui-input-text{:for => "search"} Search Input:
      .ui-input-search.ui-shadow-inset.ui-btn-corner-all.ui-btn-shadow.ui-icon-searchfield.ui-body-c
        %input#search.ui-input-text.ui-body-null{"data-type" => "search", :name => "password", :type => "true", :value => ""}/
        %a.ui-input-clear.ui-btn.ui-btn-up-c.ui-btn-icon-notext.ui-btn-corner-all.ui-shadow.ui-input-clear-hidden{"data-theme" => "c", :href => "#", :title => "clear text"}
          %span.ui-btn-inner.ui-btn-corner-all
            %span.ui-btn-text clear text
            %span.ui-icon.ui-icon-delete.ui-icon-shadow
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label#slider2-label.ui-slider{:for => "slider2"} Flip switch:
      %select#slider2.ui-slider-switch{"data-role" => "slider", :name => "slider2"}
        %option{:value => "off"} Off
        %option{:value => "on"} On
      .ui-slider.ui-slider-switch.ui-btn-down-c.ui-btn-corner-all.ui-slider-switch-a{:role => "application"}
        .ui-slider-labelbg.ui-slider-labelbg-a.ui-btn-active.ui-btn-corner-left
        .ui-slider-labelbg.ui-slider-labelbg-b.ui-btn-down-c.ui-btn-corner-right
        .ui-slider-inneroffset
          %a.ui-slider-handle.ui-btn.ui-btn-up-c.ui-btn-corner-all.ui-shadow{"aria-labelledby" => "slider2-label", "aria-valuemax" => "1", "aria-valuemin" => "0", "aria-valuenow" => "off", "aria-valuetext" => "Off", "data-theme" => "c", :href => "#", :role => "slider", :style => "left: 0%;", :title => "0"}
            %span.ui-slider-label.ui-slider-label-a.ui-btn-active.ui-btn-corner-left{:role => "img"} On
            %span.ui-slider-label.ui-slider-label-b.ui-btn-down-c.ui-btn-corner-right{:role => "img"} Off
            %span.ui-btn-inner.ui-btn-corner-all
              %span.ui-btn-text
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label#slider-label.ui-input-text.ui-slider{:for => "slider"} Slider:
      %input#slider.ui-input-text.ui-body-null.ui-corner-all.ui-shadow-inset.ui-body-c.ui-slider-input{"data-type" => "range", :max => "100", :min => "0", :name => "slider", :type => "number", :value => "0"}/
      .ui-slider.ui-btn-down-c.ui-btn-corner-all{:role => "application"}
        %a.ui-slider-handle.ui-btn.ui-btn-up-c.ui-btn-corner-all.ui-shadow{"aria-labelledby" => "slider-label", "aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "0", "aria-valuetext" => "0", "data-theme" => "c", :href => "#", :role => "slider", :style => "left: 0%;", :title => "0"}
          %span.ui-btn-inner.ui-btn-corner-all
            %span.ui-btn-text
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %fieldset.ui-corner-all.ui-controlgroup.ui-controlgroup-vertical{"data-role" => "controlgroup"}
        .ui-controlgroup-label{:role => "heading"} Choose as many snacks as you'd like:
        .ui-controlgroup-controls
          .ui-checkbox
            %input#checkbox-1a.custom{:name => "checkbox-1a", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left.ui-corner-top{"data-theme" => "c", :for => "checkbox-1a"}
              %span.ui-btn-inner.ui-corner-top
                %span.ui-btn-text Cheetos
                %span.ui-icon.ui-icon-ui-icon-checkbox-off.ui-icon-checkbox-off
          .ui-checkbox
            %input#checkbox-2a.custom{:name => "checkbox-2a", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left{"data-theme" => "c", :for => "checkbox-2a"}
              %span.ui-btn-inner
                %span.ui-btn-text Doritos
                %span.ui-icon.ui-icon-ui-icon-checkbox-off.ui-icon-checkbox-off
          .ui-checkbox
            %input#checkbox-3a.custom{:name => "checkbox-3a", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left{"data-theme" => "c", :for => "checkbox-3a"}
              %span.ui-btn-inner
                %span.ui-btn-text Fritos
                %span.ui-icon.ui-icon-ui-icon-checkbox-off.ui-icon-checkbox-off
          .ui-checkbox
            %input#checkbox-4a.custom{:name => "checkbox-4a", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left.ui-corner-bottom.ui-controlgroup-last{"data-theme" => "c", :for => "checkbox-4a"}
              %span.ui-btn-inner.ui-corner-bottom.ui-controlgroup-last
                %span.ui-btn-text Sun Chips
                %span.ui-icon.ui-icon-ui-icon-checkbox-off.ui-icon-checkbox-off
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %fieldset.ui-corner-all.ui-controlgroup.ui-controlgroup-horizontal{"data-role" => "controlgroup", "data-type" => "horizontal"}
        .ui-controlgroup-label{:role => "heading"} Font styling:
        .ui-controlgroup-controls
          .ui-checkbox
            %input#checkbox-6.custom{:name => "checkbox-6", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-corner-left{"data-theme" => "c", :for => "checkbox-6"}
              %span.ui-btn-inner.ui-corner-left
                %span.ui-btn-text b
          .ui-checkbox
            %input#checkbox-7.custom{:name => "checkbox-7", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c{"data-theme" => "c", :for => "checkbox-7"}
              %span.ui-btn-inner
                %span.ui-btn-text
                  %em i
          .ui-checkbox
            %input#checkbox-8.custom{:name => "checkbox-8", :type => "checkbox"}/
            %label.ui-btn.ui-btn-up-c.ui-corner-right.ui-controlgroup-last{"data-theme" => "c", :for => "checkbox-8"}
              %span.ui-btn-inner.ui-corner-right.ui-controlgroup-last
                %span.ui-btn-text u
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %fieldset.ui-corner-all.ui-controlgroup.ui-controlgroup-vertical{"data-role" => "controlgroup"}
        .ui-controlgroup-label{:role => "heading"} Choose a pet:
        .ui-controlgroup-controls
          .ui-radio
            %input#radio-choice-1{:checked => "checked", :name => "radio-choice-1", :type => "radio", :value => "choice-1"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left.ui-btn-active.ui-corner-top{"data-theme" => "c", :for => "radio-choice-1"}
              %span.ui-btn-inner.ui-corner-top
                %span.ui-btn-text Cat
                %span.ui-icon.ui-icon-ui-icon-radio-off.ui-icon-radio-on
          .ui-radio
            %input#radio-choice-2{:name => "radio-choice-1", :type => "radio", :value => "choice-2"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left{"data-theme" => "c", :for => "radio-choice-2"}
              %span.ui-btn-inner
                %span.ui-btn-text Dog
                %span.ui-icon.ui-icon-ui-icon-radio-off.ui-icon-radio-off
          .ui-radio
            %input#radio-choice-3{:name => "radio-choice-1", :type => "radio", :value => "choice-3"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left{"data-theme" => "c", :for => "radio-choice-3"}
              %span.ui-btn-inner
                %span.ui-btn-text Hamster
                %span.ui-icon.ui-icon-ui-icon-radio-off.ui-icon-radio-off
          .ui-radio
            %input#radio-choice-4{:name => "radio-choice-1", :type => "radio", :value => "choice-4"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-icon-left.ui-corner-bottom.ui-controlgroup-last{"data-theme" => "c", :for => "radio-choice-4"}
              %span.ui-btn-inner.ui-corner-bottom.ui-controlgroup-last
                %span.ui-btn-text Lizard
                %span.ui-icon.ui-icon-ui-icon-radio-off.ui-icon-radio-off
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %fieldset.ui-corner-all.ui-controlgroup.ui-controlgroup-horizontal{"data-role" => "controlgroup", "data-type" => "horizontal"}
        .ui-controlgroup-label{:role => "heading"} Layout view:
        .ui-controlgroup-controls
          .ui-radio
            %input#radio-choice-c{:checked => "checked", :name => "radio-choice-b", :type => "radio", :value => "on"}/
            %label.ui-btn.ui-btn-up-c.ui-btn-active.ui-corner-left{"data-theme" => "c", :for => "radio-choice-c"}
              %span.ui-btn-inner.ui-corner-left
                %span.ui-btn-text List
          .ui-radio
            %input#radio-choice-d{:name => "radio-choice-b", :type => "radio", :value => "off"}/
            %label.ui-btn.ui-btn-up-c{"data-theme" => "c", :for => "radio-choice-d"}
              %span.ui-btn-inner
                %span.ui-btn-text Grid
          .ui-radio
            %input#radio-choice-e{:name => "radio-choice-b", :type => "radio", :value => "other"}/
            %label.ui-btn.ui-btn-up-c.ui-corner-right.ui-controlgroup-last{"data-theme" => "c", :for => "radio-choice-e"}
              %span.ui-btn-inner.ui-corner-right.ui-controlgroup-last
                %span.ui-btn-text Gallery
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.select.ui-select{:for => "select-choice-1"} Choose shipping method:
      .ui-select
        .ui-btn.ui-btn-up-c.ui-btn-icon-right.ui-btn-corner-all.ui-shadow{"data-theme" => "c"}
          %span.ui-btn-inner.ui-btn-corner-all
            %span.ui-btn-text Standard: 7 day
            %span.ui-icon.ui-icon-arrow-d.ui-icon-shadow
          %select#select-choice-1{:name => "select-choice-1"}
            %option{:value => "standard"} Standard: 7 day
            %option{:value => "rush"} Rush: 3 days
            %option{:value => "express"} Express: next day
            %option{:value => "overnight"} Overnight
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.select.ui-select{:for => "select-choice-3"} Your state:
      .ui-select
        .ui-btn.ui-btn-up-c.ui-btn-icon-right.ui-btn-corner-all.ui-shadow{"data-theme" => "c"}
          %span.ui-btn-inner.ui-btn-corner-all
            %span.ui-btn-text Alabama
            %span.ui-icon.ui-icon-arrow-d.ui-icon-shadow
          %select#select-choice-3{:name => "select-choice-3"}
            %option{:value => "AL"} Alabama
            %option{:value => "AK"} Alaska
            %option{:value => "AZ"} Arizona
            %option{:value => "AR"} Arkansas
            %option{:value => "CA"} California
            %option{:value => "CO"} Colorado
            %option{:value => "CT"} Connecticut
            %option{:value => "DE"} Delaware
            %option{:value => "FL"} Florida
            %option{:value => "GA"} Georgia
            %option{:value => "HI"} Hawaii
            %option{:value => "ID"} Idaho
            %option{:value => "IL"} Illinois
            %option{:value => "IN"} Indiana
            %option{:value => "IA"} Iowa
            %option{:value => "KS"} Kansas
            %option{:value => "KY"} Kentucky
            %option{:value => "LA"} Louisiana
            %option{:value => "ME"} Maine
            %option{:value => "MD"} Maryland
            %option{:value => "MA"} Massachusetts
            %option{:value => "MI"} Michigan
            %option{:value => "MN"} Minnesota
            %option{:value => "MS"} Mississippi
            %option{:value => "MO"} Missouri
            %option{:value => "MT"} Montana
            %option{:value => "NE"} Nebraska
            %option{:value => "NV"} Nevada
            %option{:value => "NH"} New Hampshire
            %option{:value => "NJ"} New Jersey
            %option{:value => "NM"} New Mexico
            %option{:value => "NY"} New York
            %option{:value => "NC"} North Carolina
            %option{:value => "ND"} North Dakota
            %option{:value => "OH"} Ohio
            %option{:value => "OK"} Oklahoma
            %option{:value => "OR"} Oregon
            %option{:value => "PA"} Pennsylvania
            %option{:value => "RI"} Rhode Island
            %option{:value => "SC"} South Carolina
            %option{:value => "SD"} South Dakota
            %option{:value => "TN"} Tennessee
            %option{:value => "TX"} Texas
            %option{:value => "UT"} Utah
            %option{:value => "VT"} Vermont
            %option{:value => "VA"} Virginia
            %option{:value => "WA"} Washington
            %option{:value => "WV"} West Virginia
            %option{:value => "WI"} Wisconsin
            %option{:value => "WY"} Wyoming
    .ui-field-contain.ui-body.ui-br{"data-role" => "fieldcontain"}
      %label.select.ui-select{:for => "select-choice-a"} Choose shipping method:
      .ui-select
        %a.ui-btn.ui-btn-up-c.ui-btn-icon-right.ui-btn-corner-all.ui-shadow{"aria-haspopup" => "true", "data-theme" => "c", :href => "#", :role => "button"}
          %span.ui-btn-inner.ui-btn-corner-all
            %span.ui-btn-text Custom menu example
            %span.ui-icon.ui-icon-arrow-d.ui-icon-shadow
        %select#select-choice-a{"data-native-menu" => "false", :name => "select-choice-a", :tabindex => "-1"}
          %option Custom menu example
          %option{:value => "standard"} Standard: 7 day
          %option{:value => "rush"} Rush: 3 days
          %option{:value => "express"} Express: next day
          %option{:value => "overnight"} Overnight
    .ui-body.ui-body-b
      %fieldset.ui-grid-a
        .ui-block-a
          .ui-btn.ui-btn-up-d.ui-btn-corner-all.ui-shadow{"aria-disabled" => "false", "data-theme" => "d"}
            %span.ui-btn-inner.ui-btn-corner-all
              %span.ui-btn-text Cancel
            %button.ui-btn-hidden{"aria-disabled" => "false", "data-theme" => "d", :type => "submit"} Cancel
        .ui-block-b
          .ui-btn.ui-btn-up-a.ui-btn-corner-all.ui-shadow{"aria-disabled" => "false", "data-theme" => "a"}
            %span.ui-btn-inner.ui-btn-corner-all
              %span.ui-btn-text Submit
            %button.ui-btn-hidden{"aria-disabled" => "false", "data-theme" => "a", :type => "submit"} Submit