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

Posted on
Html5

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.

week_field Tag in Opera

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.

month_field in Opera

<%= 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.

datetime_field in Opera

<%= 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.

color_field_ in Opera

<%= 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.

time_field in Opera

<%= 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.

date_field in Opera

<%= 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:

highlight in Opera

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

This post is by Kevin Faustino. Kevin is the Chief Craftsman of Remarkable Labs and also the founder of the Toronto Ruby Brigade.


Comments

comments powered by Disqus