Created
October 7, 2011 18:19
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 protected] | |
%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 => ""} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.