Laravel 4 & HTML5 Input Elements

Laravel 4 makes creating HTML forms easy. You can create a form in just a few keystrokes. But out of the box, Laravel does not support all HTML5 elements via Form aliases. Adding the file at the end of this post enables these aliases

Update: This is now available as a composer package you can automatically install in 2 steps. See install instructions on GitHub

You can skip the explination and get the file on GitHub Gists.

 // Create HTML form
 {{ Form::open() }}
 {{ Form::text('field_name') }}
 {{ Form::close() }}

The Laravel HTML Docs explain how you are able to easily add default values, as well as any other attribute you'd like.

HTML5 introduced 13 new input types, and instead of creating input aliases for every input type, the Laravel creators decided it was best to only include the most popular (text, email, and URL), which means these work:

 // These render into HTML elements
  {{ Form::text('field_name') }}
  {{ Form::email('field_name') }}
  {{ Form::url('field_name') }}

But these don't

 // These throw an error
  {{ Form::number('field_name') }}
  {{ Form::date('field_name') }}
  {{ Form::color('field_name') }}

Instead, you would create these elements using the Input class.

 // HTML5 input workaround
  {{ Form::input('number', 'field_name') }}
  {{ Form::input('date', 'field_name') }}
  {{ Form::input('color', 'field_name') }}

For convenience and conformity, I decided to create aliases for the other input types, and you can include this file to instantly use these quick references as well.

The 13 HTML5 input types

url, tel, email, search, number, color, range, datetime, datetime-local, date, time, week, month

The benefit of using these types

  1. Most browsers provide basic automatic validation on fields such as email addresses
  2. Mobile browsers/OS modify the input device (digital keyboard) to match the input

How to Use

  1. Create the folder /app/misc, or use your preferred directory
  2. Copy this form_macros.php into the directory
  3. Add require app_path().'/misc/form_macros.php'; to the global.php.

You should now have access to the shorthand for all HTML5 elements

This file manually creates each macro, allowing you to customize any given input to add defaults or restrictions.

*Note: The only alias which differs from the element input type is datetime-local, as the dash breaks the alias.

Instead, create the element using Input::datetimelocal()

You can also get this file on GitHub Gists, which enables you to "Star" the Gist, and then receive notice on updates.

https://gist.github.com/brwnll/10927191

form_macro.php

<?php
/**
 * HTML5 introduced 13 new input types:
 *   url, tel, email, search, number, color, range, datetime, datetime-local, date, time, week, month
 *
 * The benefit of using these types are:
 *   Most browsers provide basic auto validation on fields such as email addresses
 *   Mobile browsers/OS modify the input device (digital keyboard) to match the input
 *
 * Laravel 4 supports rendering all HTML5 elements out of the box, but only 2 (email & url) via alias.
 *   eg: Form::text('input_name', 'input_value', $options_array);
 *
 * All other inputs are available by using the input class
 *   eg: Form::input('number', 'input_name', 'input_value', $options_array);
 *
 * This file allows you to use the other 11 HTML elements the same way as text, email, and URL.
 *
 * 1. Create the folder /app/misc, or use your preferred directory
 * 2. Copy this form_macros.php into the directory
 * 3. You should now have access to the shorthand for all HTML5 elements
 *
 * This file manually creates each macro, allowing you to customize any given input to add defaults or restrictions.
 *
 * *Note: The only alias which differs from the element input type is datetime-local, as the dash breaks the alias.
 *   Instead, create the element using Input::datetimelocal()
 */


/**
 * Color input - http://www.w3.org/TR/html-markup/input.color.html
 *
 * Value - A string exactly seven characters long, consisting of the following parts, in exactly the following order:
 *  A "#" character.
 *  Six characters in the range 0–9, a–f, and A–F.
 *
 * Note - Color keywords (for example, strings such as “red” or “green”) are not allowed.
 */
Form::macro('color', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="color" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Date input - http://www.w3.org/TR/html-markup/input.date.html
 *
 * Value - A valid full-date as defined in [RFC 3339], with the additional qualification
 *   that the year component is four or more digits representing a number greater than 0.
 */
Form::macro('date', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="date" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Datetime input - http://www.w3.org/TR/html-markup/input.datetime.html
 *
 * The input element with a type attribute whose value is "datetime" represents a control
 * for setting the element’s value to a string representing a global date and time (with
 * timezone information).
 *
 * Value - A valid date-time as defined in [RFC 3339], with these additional qualifications:
 *  1. The literal letters T and Z in the date/time syntax must always be uppercase
 *  2. The date-fullyear production is instead defined as four or more digits representing a
 *     number greater than 0
 */
Form::macro('datetime', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="datetime" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Datetime-local input - http://www.w3.org/TR/html-markup/input.datetime-local.html
 *
 * The input element with a type attribute whose value is "datetime-local" represents a control
 * for setting the element’s value to a string representing a local date and time (with no
 * timezone information).
 *
 * Value - A string representing a local date and time. The following parts, in exactly the
 *  following order:
 *  1. A date.
 *  2. The literal string "T".
 *  3. A time.
 */
Form::macro('datetimelocal', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="date" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Month input - http://www.w3.org/TR/html-markup/input.month.html
 *
 * The input element with a type attribute whose value is "month" represents a control for
 * setting the element’s value to a string representing a month.
 *
 * Value - A string representing a month. The following parts, in exactly the following order:
 *  1. Four or more digits representing a number greater than 0.
 *  2. The literal string "-".
 *  3. Two digits, representing the month month, in the range 1 ≤ month, ≤ 12.
 */
Form::macro('month', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="month" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Number input - http://www.w3.org/TR/html-markup/input.number.html
 *
 * The input element with a type attribute whose value is "number" represents a precise control for
 * setting the element’s value to a string representing a number.
 *
 * Value - A string representing a number.
 */
Form::macro('number', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="number" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Range input - http://www.w3.org/TR/html-markup/input.range.html
 *
 * The input element with a type attribute whose value is "range" represents an imprecise control for
 * setting the element’s value to a string representing a number.
 *
 * Value - A string representing a number.
 */
Form::macro('range', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="range" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Search input - http://www.w3.org/TR/html-markup/input.search.html
 *
 * The input element with a type attribute whose value is "search" represents a one-line plain-text
 * edit control for entering one or more search terms.
 *
 * Value - Any string that contains no line feed (U+000A, “LF”) or carriage return (U+000D, “CR”)
 *   characters.
 */
Form::macro('search', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="search" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Tel input - http://www.w3.org/TR/html-markup/input.tel.html
 *
 * The input element with a type attribute whose value is "tel" represents a one-line plain-text edit
 * control for entering a telephone number.
 *
 * Value - Any string that contains no line feed (U+000A, “LF”) or carriage return (U+000D, “CR”)
 *   characters.
 */
Form::macro('tel', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="tel" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Time input - http://www.w3.org/TR/html-markup/input.time.html
 *
 * The input element with a type attribute whose value is "time" represents a control for setting the
 * element’s value to a string representing a time (with no timezone information).
 *
 * Value - A string representing a time (with no timezone information). A valid partial-time as defined
 *  in [RFC 3339].
 */
Form::macro('time', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="time" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});


/**
 * Week input - http://www.w3.org/TR/html-markup/input.week.html
 *
 * The input element with a type attribute whose value is "week" represents a control for setting the
 * element’s value to a string representing a week.
 *
 * Value - A string representing a week. The following parts, in exactly the following order:
 *  1. Four or more digits representing year year, where year > 0.
 *  2. The literal string "-W".
 *  3. Two digits, representing the week week, in the range 1 ≤ week ≤ maxweek, where maxweek is either
 *    52 or 53, depending on the particular year.
 */
Form::macro('week', function($name, $default = NULL, $attrs = array())
{
  $item = '<input type="week" name="'. $name .'" ';

  if ($default) {
    $item .= 'value="'. $default .'" ';
  }

  if (is_array($attrs)) {
    foreach ($attrs as $a => $v)
      $item .= $a .'="'. $v .'" ';
  }
  $item .= ">";

  return $item;
});

Small dog web development studio
View All Our Posts

Web application developers in western Washington, creating user centric web solutions for businesses of all shapes and sizes.

Our projects include ecommerce, event organization, user driven web applications and more.


Small Dog Studios, LLC. Small Dog Studios News