International Address Fields in Web Forms :: UXmatters

The step definition below lets you say:

 Then I should see a field "Password"
 But I should not see a field "Role"

Here is the step definition:

Then /^I should( not)? see a field "([^"]*)"$/ do |negate, name|
  expectation = neg...

cxpartners has an interesting eye tracking study on form design. They distill the results into a few simple guidelines which are definitely worth keeping in mind when designing forms.

If you use a form (or form fields) multiple times inside one view, Rails will generate the same id attributes for fields again.

This card presents you with a way to call something like

- form_for @user, :prefix => 'overlay' do |form|
 ...

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

• On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit...

Spreewald now comes with a step that tests if a form field is visible:

Then the "Due date" field should be visible
But the "Author" field should not be visible

The step works by looking up the...

Form fields can be rendered as noneditable by setting the disabled or the readonly attribute. Be aware of the differences:

disabled fields

• don’t post to the server
• don’t get focus
• are skipped while tab navigation
• available for `bu...

You can use the step definition below to say this:

Then the "Last name" field should have an error

Capybara

Then /^the "([^\"]*)" field should( not)? have an error$/ do |field, negate|
  expectation = negate ? :should_not...

In Webkit you can use the HTML5-attribute autofocus:

= form.text_field :title, :autofocus => 'autofocus'

Here is a jQuery fallback for browsers that don't speak HTML5:

var Autofocus = {

  supported: function() {
    retur...