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 => ""}
@imathis
Copy link

imathis commented Oct 11, 2011

seems like you could replace .field with %div since you can select it with li > div. Also fieldsets are for grouping fields, using it to wrap only the legend doesn't make sense. Why not replace your .field divs with fieldsets?

@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