Skip to content

Instantly share code, notes, and snippets.

@bpainter
Created October 7, 2011 18:19
Show Gist options
  • Save bpainter/1270996 to your computer and use it in GitHub Desktop.
Save bpainter/1270996 to your computer and use it in GitHub Desktop.
Experimenting with accessible forms, markup that's extensible for varied types of form layout, and with enough hooks to make validation simpler.
// options for :class to handle different form layouts
// horizontal-labels - default
// vertical-lables
// overlay-labels
%form{:id => "", :name => "", :class => "", :action => "", :method => "post", "accept-charset" => "utf-8", "aria-role" => "form", "aria-live" => "polite", "aria-atomic" => "false"}
%fieldset{:id => "", :class => ""}
%legend
%h3 Basic Input Fields
%ol
%li
%label{:for => ""}
%span Basic Text Field
.field.text
%input{:type => "text", :id => "basic-text-field", :name => "basic-text-field", :size => "", :minlength => "", :maxlength => ""}
%li.required
%label{:for => ""}
%span Required Field
.field.text
%input{:type => "text", :id => "", :name => "", :size => "", :minlength => "", :maxlength => "", "required" => "", "aria-required" => "true"}
%li
%label{:for => ""}
%span E-mail
.field.email
%input{:type => "email", :id => "", :name => "", :size => "", :minlength => "", :maxlength => ""}
%span.guide email@example.com
%li
%label{:for => ""}
%span URL
.field.url
%input{:type => "url", :id => "", :name => "", :size => "", :minlength => "", :maxlength => ""}
%span.guide http://www.example.com
%li
.fields.horizontal
%label{:for => ""}
%span Phone
.field.phone
%input{:type => "tel", :id => "", :name => "", :size => "", :minlength => "", :maxlength => ""}
%span.guide xxx-xxx-xxxx
%label{:for => ""}
%span Ext
.field.text
%input{:type => "number", :id => "", :name => "", :size => "", :minlength => "", :maxlength => ""}
@bpainter
Copy link
Author

Good suggestions. The HTML still seems heavier than I'd like it to be but it needs to be able to handle a variety of layouts. Reason for the .field class it that the form elements may not always be inside a list (for example if there's only one field element).

The lone legend wrapped in the fieldset was just a tabs/spaces nesting error. All fixed now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment