New HTML5 Form Input Helpers [Rails 4 Countdown to 2013]

This post is part of a series of 31 Rails 4 articles being released each day in December 2012.

In this post, we are going to take a look at the new HTML5 Form Helpers being added into Rails 4. While we are only covering the model object helper versions that are used with form_for, each form helper below also has a corresponding tag helper. For example, if we are talking about week_field, there is a tag helper week_field_tag that can be used with form_tag.

week_field

The week_field form helper creates an input of type "week", that sets a week without any timezone information. A week is represented by four digits for the year, followed by -W, and ending with two digits representing the week number. For example, the current week of this post would be 2012-W50.

The week_field form helper accepts three options: :min, :max, and :step:

• :min: The minimum acceptable value
• :max: The maximum acceptable value
• :step: The acceptable value granularity

Here is an example of a week_field being set with optional minimum and maximum week constraints:

<%= f.week_field :week,
  min: Time.zone.today.beginning_of_year,
  max: Time.zone.today.end_of_year %>

If you pass a DateTime or ActiveSupport::TimeWithZone value into a week_field, Rails sets the expected string on the input by calling strftime with %Y-W%W on the object.

month_field

The month_field form helper creates an input of type "month", that sets a month without any timezone information. A month is represented by four digits for the year, followed by a dash, and ending with two digits representing the month. For example, the current month of this post would be 2012-12.

The month_field has a very similar interface as the week_field form helper. It can accept options :min, :max, and :step.

<%= f.month_field :month %>

A DateTime or ActiveSupport::TimeWithZone object passed as the value to the month_field will have strftime called with %Y-m.

datetime_field and datetime_local_field

The datetime_field form helper creates an input of type "datetype", and accepts time in UTC. Another form helper available is datetime_local_field, which has the exact same interface as datetime_field, except the user does not have to deal with UTC.

Like the form helpers above, the datetime_field accepts options :min, :max, and :step.

<%= f.datetime_field :birthday %>

A DateTime or ActiveSupport::TimeWithZone object passed as the value to the datetime_field and datetime_local_field will have strftime called with %Y-%m-%dT%T.%L%z and %Y-%m-%dT%T respectively.

color_field

The color_field form helper allows users to set a color via hex values. Browsers such as Opera have a native color picker that users can use to select colors.

<%= f.color_field :background_color %>

time_field

The time_field form helper creates an input of type "time". Similar to above mentioned date form helpers, time_field accepts options :min, :max, and :step.

<%= f.time_field :daily_reminder_time %>

A DateTime or ActiveSupport::TimeWithZone object passed as the value to the time_field and datetime_local_field will have strftime called with %T.%L.

date_field

The date_field form helper creates an input of type "date". If an object is provided to the helper, it calls to_date on it to attempt setting the default value.

<%= f.date_field :birthday %>

To override the default value, pass a string in the format YYYY-MM-DD to the :value in the options hash.

highlight == mark

ActionView::Helpers::TextHelper#highlight now uses the mark to highlight text.

Something like:

<%= highlight('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'Lorem') %>

Will generate the following output:

<mark>Lorem</mark> ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.