hanami-helpers 1.0.0.beta1 → 1.0.0.beta2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9a4372126c3d3cc4666a281f370b709108ce7522
-  data.tar.gz: a906c5adc94f6e22df677efde17f28ce529fc35c
+  metadata.gz: eb48b89f222fd007b68eb1e8637adf33f9f9013b
+  data.tar.gz: ee5532b3500215c3855678a4f994f4c079ff55cc
 SHA512:
-  metadata.gz: 5f713e2872f9b0d40d2e51980e3563500b33f1ee8b54c278258cd37cad97361420bf56c35e5a5f61552c205075283e3a483fb28f84313f8de0e411a353b7ca6e
-  data.tar.gz: fa35b8534b30d4cd19698fe3b6cd7e82951bdf341e7831a196b190165f5476b382d4ced07d1099d11a9326a86ca14df1e19282b30f2cf87dda80e484cb9efac3
+  metadata.gz: 50494ab76fe2656faa81fbc6e7d03e2c44533a97e240fa803a55d379b43d4418e77041de9a89c1a193170570a47b76a4fad6cb65cb4b9a07a58466ab9f164bd9
+  data.tar.gz: 7d90a5493c27e27e5a824b7da06d07c6a1f413a1b2f004e4490878706c6daa12fd27f388a881538a7cfa8da4d221dfc08ade6a56192c131d364c49fa3c45d2a6

data/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Hanami::Helpers
 View helpers for Ruby web applications
 
+## v1.0.0.beta2 - 2017-03-17
+### Added
+- [Luca Guidi] Added `time_field` form helper
+- [Luca Guidi] Added `month_field` form helper
+- [Luca Guidi] Added `week_field` form helper
+- [Luca Guidi] Added `range_field` form helper
+- [Luca Guidi] Added `search_field` form helper
+- [Luca Guidi] Added `url_field` form helper
+- [Luca Guidi] Added `tel_field` form helper
+- [Luca Guidi] Added `image_button` form helper
+- [Luca Guidi] Added support for `<dialog>`, `<hgroup>`, `<rtc>`, `<slot>`, and `<var>` HTML5 tags
+
 ## v1.0.0.beta1 - 2017-02-14
 ### Added
 - [Luca Guidi] Official support for Ruby: MRI 2.4

data/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2014-2016 Luca Guidi
+Copyright (c) 2014-2017 Luca Guidi
 
 MIT License
 

data/README.md

@@ -384,6 +384,6 @@ __Hanami::Helpers__ uses [Semantic Versioning 2.0.0](http://semver.org)
 
 ## Copyright
 
-Copyright © 2014-2016 Luca Guidi – Released under MIT License
+Copyright © 2014-2017 Luca Guidi – Released under MIT License
 
 This project was formerly known as Lotus (`lotus-helpers`).

data/lib/hanami/helpers.rb

@@ -6,6 +6,7 @@ require 'hanami/helpers/link_to_helper'
 require 'hanami/helpers/form_helper'
 require 'hanami/helpers/number_formatting_helper'
 
+# @since 0.1.0
 module Hanami
   # View helpers for Ruby applications
   #

data/lib/hanami/helpers/form_helper.rb

@@ -74,9 +74,8 @@ module Hanami
     #     end
     #   end
     #
-    #   # Corresponding template:
-    #   #
-    #   #  <%= my_form %>
+    #   <!-- use this in the template -->
+    #   <%= my_form %>
     module FormHelper
       # Default HTTP method for form
       #
@@ -181,22 +180,23 @@ module Hanami
         #     end
         #   %>
         #
-        #   # It will render:
-        #   #
-        #   #  <form action="/deliveries/1" method="POST" accept-charset="utf-8">
-        #   #    <input type="hidden" name="_method" value="PATCH">
-        #   #
-        #   #    # Value taken from delivery.delivered_on
-        #   #    <input type="date" name="delivery[delivered_on]" id="delivery-delivered-on" value="2015-05-27">
-        #   #
-        #   #    # Value taken from customer.name
-        #   #    <input type="text" name="delivery[customer][name]" id="delivery-customer-name" value="Luca">
-        #   #
-        #   #    # Value taken from customer.address.city
-        #   #    <input type="text" name="delivery[customer][address][city]" id="delivery-customer-address-city" value="Rome">
-        #   #
-        #   #    <button type="submit">Update</button>
-        #   #  </form>
+        #   <!-- output -->
+        #
+        #   <form action="/deliveries/1" method="POST" accept-charset="utf-8">
+        #     <input type="hidden" name="_method" value="PATCH">
+        #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+        #
+        #     # Value taken from delivery.delivered_on
+        #     <input type="date" name="delivery[delivered_on]" id="delivery-delivered-on" value="2015-05-27">
+        #
+        #     # Value taken from customer.name
+        #     <input type="text" name="delivery[customer][name]" id="delivery-customer-name" value="Luca">
+        #
+        #     # Value taken from customer.address.city
+        #     <input type="text" name="delivery[customer][address][city]" id="delivery-customer-address-city" value="Rome">
+        #
+        #     <button type="submit">Update</button>
+        #   </form>
         def initialize(name, url, values = {}, attributes = {})
           @name       = name
           @url        = url
@@ -255,15 +255,17 @@ module Hanami
       #     end
       #   %>
       #
-      #   Output:
-      #     # <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
-      #     #   <div>
-      #     #     <label for="book-title">Title</label>
-      #     #     <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
-      #     #   </div>
-      #     #
-      #     #   <button type="submit">Create</button>
-      #     # </form>
+      #   <!-- output -->
+      #
+      #   <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
+      #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+      #     <div>
+      #       <label for="book-title">Title</label>
+      #       <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
+      #     </div>
+      #
+      #     <button type="submit">Create</button>
+      #   </form>
       #
       #
       #
@@ -284,17 +286,20 @@ module Hanami
       #     end
       #   end
       #
+      #   <!-- in the corresponding template use this -->
       #   <%= form %>
       #
-      #   Output:
-      #     # <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
-      #     #   <div>
-      #     #     <label for="book-title">Title</label>
-      #     #     <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
-      #     #   </div>
-      #     #
-      #     #   <button type="submit">Create</button>
-      #     # </form>
+      #   <!-- output -->
+      #
+      #   <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
+      #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+      #     <div>
+      #       <label for="book-title">Title</label>
+      #       <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
+      #     </div>
+      #
+      #     <button type="submit">Create</button>
+      #   </form>
       #
       # @example Share Code Between Views
       #
@@ -348,15 +353,17 @@ module Hanami
       #     end
       #   %>
       #
-      #   Output:
-      #     # <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
-      #     #   <div>
-      #     #     <label for="book-title">Title</label>
-      #     #     <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
-      #     #   </div>
-      #     #
-      #     #   <button type="submit">Create</button>
-      #     # </form>
+      #   <!-- output -->
+      #
+      #   <form action="/books" method="POST" accept-charset="utf-8" id="book-form" class="form-horizontal">
+      #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+      #     <div>
+      #       <label for="book-title">Title</label>
+      #       <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
+      #     </div>
+      #
+      #     <button type="submit">Create</button>
+      #   </form>
       #
       # @example Method override
       #   <%=
@@ -367,13 +374,15 @@ module Hanami
       #     end
       #   %>
       #
-      #   Output:
-      #     # <form action="/books/23" accept-charset="utf-8" id="book-form" method="POST">
-      #     #   <input type="hidden" name="_method" value="PUT">
-      #     #   <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
-      #     #
-      #     #   <button type="submit">Update</button>
-      #     # </form>
+      #   <!-- output -->
+      #
+      #   <form action="/books/23" accept-charset="utf-8" id="book-form" method="POST">
+      #     <input type="hidden" name="_method" value="PUT">
+      #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+      #     <input type="text" name="book[title]" id="book-title" value="Test Driven Development">
+      #
+      #     <button type="submit">Update</button>
+      #   </form>
       #
       # @example Nested fields
       #   <%=
@@ -388,13 +397,15 @@ module Hanami
       #     end
       #   %>
       #
-      #   Output:
-      #     # <form action="/deliveries" accept-charset="utf-8" id="delivery-form" method="POST">
-      #     #   <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
-      #     #   <input type="text" name="delivery[address][city]" id="delivery-address-city" value="">
-      #     #
-      #     #   <button type="submit">Create</button>
-      #     # </form>
+      #   <!-- output -->
+      #
+      #   <form action="/deliveries" accept-charset="utf-8" id="delivery-form" method="POST">
+      #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+      #     <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
+      #     <input type="text" name="delivery[address][city]" id="delivery-address-city" value="">
+      #
+      #     <button type="submit">Create</button>
+      #   </form>
       def form_for(name, url, options = {}, &blk)
         form = if name.is_a?(Form)
                  options = url

data/lib/hanami/helpers/form_helper/form_builder.rb

@@ -1,6 +1,7 @@
 require 'hanami/helpers/form_helper/html_node'
 require 'hanami/helpers/form_helper/values'
 require 'hanami/helpers/html_helper/html_builder'
+require 'hanami/helpers/escape_helper'
 require 'hanami/utils/string'
 
 module Hanami
@@ -74,6 +75,8 @@ module Hanami
 
         # ENCTYPE_MULTIPART = 'multipart/form-data'.freeze
 
+        include Helpers::EscapeHelper
+
         self.html_node = ::Hanami::Helpers::FormHelper::HtmlNode
 
         # Instantiate a form builder
@@ -160,13 +163,14 @@ module Hanami
         #     end
         #   %>
         #
-        #   Output:
-        #     # <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
-        #     #   <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
-        #     #   <input type="text" name="delivery[address][street]" id="delivery-address-street" value="">
-        #     #
-        #     #   <button type="submit">Create</button>
-        #     # </form>
+        #   <!-- output -->
+        #   <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
+        #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+        #     <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
+        #     <input type="text" name="delivery[address][street]" id="delivery-address-street" value="">
+        #
+        #     <button type="submit">Create</button>
+        #   </form>
         #
         # @example Multiple levels of nesting
         #   <%=
@@ -186,15 +190,16 @@ module Hanami
         #     end
         #   %>
         #
-        #   Output:
-        #     # <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
-        #     #   <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
-        #     #   <input type="text" name="delivery[address][street]" id="delivery-address-street" value="">
-        #     #   <input type="text" name="delivery[address][location][city]" id="delivery-address-location-city" value="">
-        #     #   <input type="text" name="delivery[address][location][country]" id="delivery-address-location-country" value="">
-        #     #
-        #     #   <button type="submit">Create</button>
-        #     # </form>
+        #   <!-- output -->
+        #   <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
+        #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+        #     <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
+        #     <input type="text" name="delivery[address][street]" id="delivery-address-street" value="">
+        #     <input type="text" name="delivery[address][location][city]" id="delivery-address-location-city" value="">
+        #     <input type="text" name="delivery[address][location][country]" id="delivery-address-location-country" value="">
+        #
+        #     <button type="submit">Create</button>
+        #   </form>
         def fields_for(name)
           current_name = @name
           @name        = _input_name(name)
@@ -224,15 +229,15 @@ module Hanami
         #     end
         #   %>
         #
-        #   Output:
-        #     # <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
-        #     #   <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
-        #     #   <input type="text" name="delivery[addresses][][street]" id="delivery-address-0-street" value="">
-        #     #   <input type="text" name="delivery[addresses][][street]" id="delivery-address-1-street" value="">
-        #     #
-        #     #   <button type="submit">Create</button>
-        #     # </form>
+        #   <!-- output -->
+        #   <form action="/deliveries" method="POST" accept-charset="utf-8" id="delivery-form">
+        #     <input type="hidden" name="_csrf_token" value="920cd5bfaecc6e58368950e790f2f7b4e5561eeeab230aa1b7de1b1f40ea7d5d">
+        #     <input type="text" name="delivery[customer_name]" id="delivery-customer-name" value="">
+        #     <input type="text" name="delivery[addresses][][street]" id="delivery-address-0-street" value="">
+        #     <input type="text" name="delivery[addresses][][street]" id="delivery-address-1-street" value="">
         #
+        #     <button type="submit">Create</button>
+        #   </form>
         def fields_for_collection(name, &block)
           current_name = @name
           base_value = _value(name)
@@ -262,8 +267,17 @@ module Hanami
         #     label :extended_title
         #   %>
         #
-        #  # Output:
-        #  #  <label for="book-extended-title">Extended title</label>
+        #   <!-- output -->
+        #   <label for="book-extended-title">Extended title</label>
+        #
+        # @example HTML attributes
+        #   <%=
+        #     # ...
+        #     label :title, class: "form-label"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <label for="book-title" class="form-label">Title</label>
         #
         # @example Custom content
         #   <%=
@@ -271,8 +285,8 @@ module Hanami
         #     label 'Title', for: :extended_title
         #   %>
         #
-        #  # Output:
-        #  #  <label for="book-extended-title">Title</label>
+        #   <!-- output -->
+        #   <label for="book-extended-title">Title</label>
         #
         # @example Custom "for" attribute
         #   <%=
@@ -280,8 +294,8 @@ module Hanami
         #     label :extended_title, for: 'ext-title'
         #   %>
         #
-        #  # Output:
-        #  #  <label for="ext-title">Extended title</label>
+        #   <!-- output -->
+        #   <label for="ext-title">Extended title</label>
         #
         # @example Nested fields usage
         #   <%=
@@ -292,9 +306,9 @@ module Hanami
         #     end
         #   %>
         #
-        #  # Output:
-        #  #  <label for="delivery-address-city">City</label>
-        #  #  <input type="text" name="delivery[address][city] id="delivery-address-city" value="">
+        #   <!-- output -->
+        #   <label for="delivery-address-city">City</label>
+        #   <input type="text" name="delivery[address][city] id="delivery-address-city" value="">
         def label(content, attributes = {})
           attributes = { for: _for(content, attributes.delete(:for)) }.merge(attributes)
           content    = case content
@@ -307,6 +321,37 @@ module Hanami
           super(content, attributes)
         end
 
+        # Fieldset
+        #
+        # @param content [Symbol,String,NilClass] the content
+        # @param attributes [Hash] HTML attributes to pass to the label tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     fieldset do
+        #       legend "Author"
+        #
+        #       fields_for :author do
+        #         label :name
+        #         text_field :name
+        #       end
+        #     end
+        #   %>
+        #
+        #   <!-- output -->
+        #   <fieldset>
+        #     <legend>Author</legend>
+        #     <label for="book-author-name">Name</label>
+        #     <input type="text" name="book[author][name]" id="book-author-name" value="">
+        #   </fieldset>
+        def fieldset(content = nil, attributes = {})
+          # This is here only for documentation purposes
+          super
+        end
+
         # Check box
         #
         # It renders a check box input.
@@ -337,18 +382,27 @@ module Hanami
         #     check_box :free_shipping
         #   %>
         #
-        #   # Output:
-        #   #  <input type="hidden" name="delivery[free_shipping]" value="0">
-        #   #  <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1">
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[free_shipping]" value="0">
+        #   <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     check_box :free_shipping, class: "form-check-input"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[free_shipping]" value="0">
+        #   <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1" class="form-check-input">
         #
         # @example Specify (un)checked values
         #   <%=
         #     check_box :free_shipping, checked_value: 'true', unchecked_value: 'false'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="hidden" name="delivery[free_shipping]" value="false">
-        #   #  <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="true">
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[free_shipping]" value="false">
+        #   <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="true">
         #
         # @example Automatic "checked" attribute
         #   # For this example the params are:
@@ -358,9 +412,9 @@ module Hanami
         #     check_box :free_shipping
         #   %>
         #
-        #   # Output:
-        #   #  <input type="hidden" name="delivery[free_shipping]" value="0">
-        #   #  <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1" checked="checked">
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[free_shipping]" value="0">
+        #   <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1" checked="checked">
         #
         # @example Force "checked" attribute
         #   # For this example the params are:
@@ -370,9 +424,9 @@ module Hanami
         #     check_box :free_shipping, checked: 'checked'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="hidden" name="delivery[free_shipping]" value="0">
-        #   #  <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1" checked="checked">
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[free_shipping]" value="0">
+        #   <input type="checkbox" name="delivery[free_shipping]" id="delivery-free-shipping" value="1" checked="checked">
         #
         # @example Multiple check boxes
         #   <%=
@@ -380,9 +434,9 @@ module Hanami
         #     check_box :languages, name: 'book[languages][]', value: 'english', id: nil
         #   %>
         #
-        #   # Output:
-        #   #  <input type="checkbox" name="book[languages][]" value="italian">
-        #   #  <input type="checkbox" name="book[languages][]" value="english">
+        #   <!-- output -->
+        #   <input type="checkbox" name="book[languages][]" value="italian">
+        #   <input type="checkbox" name="book[languages][]" value="english">
         #
         # @example Automatic "checked" attribute for multiple check boxes
         #   # For this example the params are:
@@ -393,9 +447,9 @@ module Hanami
         #     check_box :languages, name: 'book[languages][]', value: 'english', id: nil
         #   %>
         #
-        #   # Output:
-        #   #  <input type="checkbox" name="book[languages][]" value="italian" checked="checked">
-        #   #  <input type="checkbox" name="book[languages][]" value="english">
+        #   <!-- output -->
+        #   <input type="checkbox" name="book[languages][]" value="italian" checked="checked">
+        #   <input type="checkbox" name="book[languages][]" value="english">
         def check_box(name, attributes = {})
           _hidden_field_for_check_box(name, attributes)
           input _attributes_for_check_box(name, attributes)
@@ -414,8 +468,17 @@ module Hanami
         #     color_field :background
         #   %>
         #
-        #   # Output:
-        #   #  <input type="color" name="user[background]" id="user-background" value="">
+        #   <!-- output -->
+        #   <input type="color" name="user[background]" id="user-background" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     color_field :background, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="color" name="user[background]" id="user-background" value="" class="form-control">
         def color_field(name, attributes = {})
           input _attributes(:color, name, attributes)
         end
@@ -433,8 +496,17 @@ module Hanami
         #     date_field :birth_date
         #   %>
         #
-        #   # Output:
-        #   #  <input type="date" name="user[birth_date]" id="user-birth-date" value="">
+        #   <!-- output -->
+        #   <input type="date" name="user[birth_date]" id="user-birth-date" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     date_field :birth_date, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="date" name="user[birth_date]" id="user-birth-date" value="" class="form-control">
         def date_field(name, attributes = {})
           input _attributes(:date, name, attributes)
         end
@@ -452,8 +524,17 @@ module Hanami
         #     datetime_field :delivered_at
         #   %>
         #
-        #   # Output:
-        #   #  <input type="datetime" name="delivery[delivered_at]" id="delivery-delivered-at" value="">
+        #   <!-- output -->
+        #   <input type="datetime" name="delivery[delivered_at]" id="delivery-delivered-at" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     datetime_field :delivered_at, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="datetime" name="delivery[delivered_at]" id="delivery-delivered-at" value="" class="form-control">
         def datetime_field(name, attributes = {})
           input _attributes(:datetime, name, attributes)
         end
@@ -471,12 +552,105 @@ module Hanami
         #     datetime_local_field :delivered_at
         #   %>
         #
-        #   # Output:
-        #   #  <input type="datetime-local" name="delivery[delivered_at]" id="delivery-delivered-at" value="">
+        #   <!-- output -->
+        #   <input type="datetime-local" name="delivery[delivered_at]" id="delivery-delivered-at" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     datetime_local_field :delivered_at, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="datetime-local" name="delivery[delivered_at]" id="delivery-delivered-at" value="" class="form-control">
         def datetime_local_field(name, attributes = {})
           input _attributes(:'datetime-local', name, attributes)
         end
 
+        # Time field
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     time_field :release_hour
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="time" name="book[release_hour]" id="book-release-hour" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     time_field :release_hour, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="time" name="book[release_hour]" id="book-release-hour" value="" class="form-control">
+        def time_field(name, attributes = {})
+          input _attributes(:time, name, attributes)
+        end
+
+        # Month field
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     month_field :release_month
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="month" name="book[release_month]" id="book-release-month" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     month_field :release_month, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="month" name="book[release_month]" id="book-release-month" value="" class="form-control">
+        def month_field(name, attributes = {})
+          input _attributes(:month, name, attributes)
+        end
+
+        # Week field
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     week_field :release_week
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="week" name="book[release_week]" id="book-release-week" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     week_field :release_week, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="week" name="book[release_week]" id="book-release-week" value="" class="form-control">
+        def week_field(name, attributes = {})
+          input _attributes(:week, name, attributes)
+        end
+
         # Email input
         #
         # @param name [Symbol] the input name
@@ -490,12 +664,80 @@ module Hanami
         #     email_field :email
         #   %>
         #
-        #   # Output:
-        #   #  <input type="email" name="user[email]" id="user-email" value="">
+        #   <!-- output -->
+        #   <input type="email" name="user[email]" id="user-email" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     email_field :email, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="email" name="user[email]" id="user-email" value="" class="form-control">
         def email_field(name, attributes = {})
           input _attributes(:email, name, attributes)
         end
 
+        # URL input
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     url_field :website
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="url" name="user[website]" id="user-website" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     url_field :website, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="url" name="user[website]" id="user-website" value="" class="form-control">
+        def url_field(name, attributes = {})
+          attrs         = attributes.dup
+          attrs[:value] = escape_url(attrs.fetch(:value) { _value(name) })
+
+          input _attributes(:url, name, attrs)
+        end
+
+        # Telephone input
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     tel_field :telephone
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="tel" name="user[telephone]" id="user-telephone" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     telurl_field :telephone, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="tel" name="user[telephone]" id="user-telephone" value="" class="form-control">
+        def tel_field(name, attributes = {})
+          input _attributes(:tel, name, attributes)
+        end
+
         # Hidden input
         #
         # @param name [Symbol] the input name
@@ -509,15 +751,15 @@ module Hanami
         #     hidden_field :customer_id
         #   %>
         #
-        #   # Output:
-        #   #  <input type="hidden" name="delivery[customer_id]" id="delivery-customer-id" value="">
+        #   <!-- output -->
+        #   <input type="hidden" name="delivery[customer_id]" id="delivery-customer-id" value="">
         def hidden_field(name, attributes = {})
           input _attributes(:hidden, name, attributes)
         end
 
         # File input
         #
-        # PLEASE REMEMBER TO ADD <tt>enctype: 'multipart/form-data'</tt> ATTRIBUTE TO THE FORM
+        # **PLEASE REMEMBER TO ADD <tt>enctype: 'multipart/form-data'</tt> ATTRIBUTE TO THE FORM**
         #
         # @param name [Symbol] the input name
         # @param attributes [Hash] HTML attributes to pass to the input tag
@@ -532,26 +774,35 @@ module Hanami
         #     file_field :avatar
         #   %>
         #
-        #   # Output:
-        #   #  <input type="file" name="user[avatar]" id="user-avatar">
+        #   <!-- output -->
+        #   <input type="file" name="user[avatar]" id="user-avatar">
         #
-        # @example Accepted mime types
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     file_field :avatar, class: "avatar-upload"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="file" name="user[avatar]" id="user-avatar" class="avatar-upload">
+        #
+        # @example Accepted MIME Types
         #   <%=
         #     # ...
         #     file_field :resume, accept: 'application/pdf,application/ms-word'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="file" name="user[resume]" id="user-resume" accept="application/pdf,application/ms-word">
+        #   <!-- output -->
+        #   <input type="file" name="user[resume]" id="user-resume" accept="application/pdf,application/ms-word">
         #
-        # @example Accepted mime types (as array)
+        # @example Accepted MIME Types (as array)
         #   <%=
         #     # ...
         #     file_field :resume, accept: ['application/pdf', 'application/ms-word']
         #   %>
         #
-        #   # Output:
-        #   #  <input type="file" name="user[resume]" id="user-resume" accept="application/pdf,application/ms-word">
+        #   <!-- output -->
+        #   <input type="file" name="user[resume]" id="user-resume" accept="application/pdf,application/ms-word">
         #
         # @example Accepted multiple file upload (as array)
         #   <%=
@@ -559,8 +810,8 @@ module Hanami
         #     file_field :resume, multiple: true
         #   %>
         #
-        #   # Output:
-        #   #  <input type="file" name="user[resume]" id="user-resume" multiple="multiple">
+        #   <!-- output -->
+        #   <input type="file" name="user[resume]" id="user-resume" multiple="multiple">
         def file_field(name, attributes = {})
           attributes[:accept] = Array(attributes[:accept]).join(ACCEPT_SEPARATOR) if attributes.key?(:accept)
           attributes = { type: :file, name: _input_name(name), id: _input_id(name) }.merge(attributes)
@@ -570,6 +821,9 @@ module Hanami
 
         # Number input
         #
+        # You can also make use of the `max`, `min`, and `step` attributes for
+        # the HTML5 number field.
+        #
         # @param name [Symbol] the input name
         # @param attributes [Hash] HTML attributes to pass to the number input
         #
@@ -579,11 +833,8 @@ module Hanami
         #     number_field :percent_read
         #   %>
         #
-        #   # Output:
-        #   #  <input type="number" name="book[percent_read]" id="book-percent-read" value="">
-        #
-        # You can also make use of the 'max', 'min', and 'step' attributes for
-        # the HTML5 number field.
+        #   <!-- output -->
+        #   <input type="number" name="book[percent_read]" id="book-percent-read" value="">
         #
         # @example Advanced attributes
         #   <%=
@@ -591,12 +842,43 @@ module Hanami
         #     number_field :priority, min: 1, max: 10, step: 1
         #   %>
         #
-        #   # Output:
-        #   #  <input type="number" name="book[percent_read]" id="book-precent-read" value="" min="1" max="10" step="1">
+        #   <!-- output -->
+        #   <input type="number" name="book[percent_read]" id="book-precent-read" value="" min="1" max="10" step="1">
         def number_field(name, attributes = {})
           input _attributes(:number, name, attributes)
         end
 
+        # Range input
+        #
+        # You can also make use of the `max`, `min`, and `step` attributes for
+        # the HTML5 number field.
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the number input
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     range_field :discount_percentage
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="range" name="book[discount_percentage]" id="book-discount-percentage" value="">
+        #
+        # @example Advanced attributes
+        #   <%=
+        #     # ...
+        #     range_field :discount_percentage, min: 1, max: 10, step: 1
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="number" name="book[discount_percentage]" id="book-discount-percentage" value="" min="1" max="10" step="1">
+        def range_field(name, attributes = {})
+          input _attributes(:range, name, attributes)
+        end
+
         # Text-area input
         #
         # @param name [Symbol] the input name
@@ -611,8 +893,8 @@ module Hanami
         #     text_area :hobby
         #   %>
         #
-        #   # Output:
-        #   #  <textarea name="user[hobby]" id="user-hobby"></textarea>
+        #   <!-- output -->
+        #   <textarea name="user[hobby]" id="user-hobby"></textarea>
         #
         # @example Set content
         #   <%=
@@ -620,8 +902,8 @@ module Hanami
         #     text_area :hobby, 'Football'
         #   %>
         #
-        #   # Output:
-        #   #  <textarea name="user[hobby]" id="user-hobby">Football</textarea>
+        #   <!-- output -->
+        #   <textarea name="user[hobby]" id="user-hobby">Football</textarea>
         #
         # @example Set content and HTML attributes
         #   <%=
@@ -629,8 +911,8 @@ module Hanami
         #     text_area :hobby, 'Football', class: 'form-control'
         #   %>
         #
-        #   # Output:
-        #   #  <textarea name="user[hobby]" id="user-hobby" class="form-control">Football</textarea>
+        #   <!-- output -->
+        #   <textarea name="user[hobby]" id="user-hobby" class="form-control">Football</textarea>
         #
         # @example Omit content and specify HTML attributes
         #   <%=
@@ -638,8 +920,8 @@ module Hanami
         #     text_area :hobby, class: 'form-control'
         #   %>
         #
-        #   # Output:
-        #   #  <textarea name="user[hobby]" id="user-hobby" class="form-control"></textarea>
+        #   <!-- output -->
+        #   <textarea name="user[hobby]" id="user-hobby" class="form-control"></textarea>
         #
         # @example Force blank value
         #   <%=
@@ -647,8 +929,8 @@ module Hanami
         #     text_area :hobby, '', class: 'form-control'
         #   %>
         #
-        #   # Output:
-        #   #  <textarea name="user[hobby]" id="user-hobby" class="form-control"></textarea>
+        #   <!-- output -->
+        #   <textarea name="user[hobby]" id="user-hobby" class="form-control"></textarea>
         def text_area(name, content = nil, attributes = {})
           if content.respond_to?(:to_hash)
             attributes = content
@@ -672,13 +954,51 @@ module Hanami
         #     text_field :first_name
         #   %>
         #
-        #   # Output:
-        #   #  <input type="text" name="user[first_name]" id="user-first-name" value="">
+        #   <!-- output -->
+        #   <input type="text" name="user[first_name]" id="user-first-name" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     text_field :first_name, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="text" name="user[first_name]" id="user-first-name" value="" class="form-control">
         def text_field(name, attributes = {})
           input _attributes(:text, name, attributes)
         end
         alias input_text text_field
 
+        # Search input
+        #
+        # @param name [Symbol] the input name
+        # @param attributes [Hash] HTML attributes to pass to the input tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     search_field :q
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="search" name="search[q]" id="search-q" value="">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     search_field :q, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="search" name="search[q]" id="search-q" value="" class="form-control">
+        def search_field(name, attributes = {})
+          input _attributes(:search, name, attributes)
+        end
+        alias input_text text_field
+
         # Radio input
         #
         # If request params have a value that corresponds to the given value,
@@ -698,9 +1018,20 @@ module Hanami
         #     radio_button :category, 'Non-Fiction'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="radio" name="book[category]" value="Fiction">
-        #   #  <input type="radio" name="book[category]" value="Non-Fiction">
+        #   <!-- output -->
+        #   <input type="radio" name="book[category]" value="Fiction">
+        #   <input type="radio" name="book[category]" value="Non-Fiction">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     radio_button :category, 'Fiction', class: "form-check"
+        #     radio_button :category, 'Non-Fiction', class: "form-check"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="radio" name="book[category]" value="Fiction" class="form-check">
+        #   <input type="radio" name="book[category]" value="Non-Fiction" class="form-check">
         #
         # @example Automatic checked value
         #   # Given the following params:
@@ -715,9 +1046,9 @@ module Hanami
         #     radio_button :category, 'Non-Fiction'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="radio" name="book[category]" value="Fiction">
-        #   #  <input type="radio" name="book[category]" value="Non-Fiction" checked="checked">
+        #   <!-- output -->
+        #   <input type="radio" name="book[category]" value="Fiction">
+        #   <input type="radio" name="book[category]" value="Non-Fiction" checked="checked">
         def radio_button(name, value, attributes = {})
           attributes = { type: :radio, name: _input_name(name), value: value }.merge(attributes)
           attributes[:checked] = CHECKED if _value(name).to_s == value.to_s
@@ -737,8 +1068,8 @@ module Hanami
         #     password_field :password
         #   %>
         #
-        #   # Output:
-        #   #  <input type="password" name="signup[password]" id="signup-password" value="">
+        #   <!-- output -->
+        #   <input type="password" name="signup[password]" id="signup-password" value="">
         def password_field(name, attributes = {})
           input({ type: :password, name: _input_name(name), id: _input_id(name), value: nil }.merge(attributes))
         end
@@ -760,14 +1091,27 @@ module Hanami
         #   <%=
         #     # ...
         #     values = Hash['Italy' => 'it', 'United States' => 'us']
+        #     select :store, values, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store" class="form-control">
+        #     <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     values = Hash['Italy' => 'it', 'United States' => 'us']
         #     select :store, values
         #   %>
         #
-        #   # Output:
-        #   #  <select name="book[store]" id="book-store">
-        #   #    <option value="it">Italy</option>
-        #   #    <option value="us">United States</option>
-        #   #  </select>
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store">
+        #     <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
         #
         # @example Automatic selected option
         #   # Given the following params:
@@ -782,38 +1126,52 @@ module Hanami
         #     select :store, values
         #   %>
         #
-        #   # Output:
-        #   #  <select name="book[store]" id="book-store">
-        #   #    <option value="it" selected="selected">Italy</option>
-        #   #    <option value="us">United States</option>
-        #   #  </select>
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store">
+        #     <option value="it" selected="selected">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
         #
         # @example Prompt option
         #   <%=
         #     # ...
         #     values = Hash['it' => 'Italy', 'us' => 'United States']
-        #     select :store, values, options: {prompt: 'Select a store'}
+        #     select :store, values, options: { prompt: 'Select a store' }
         #   %>
         #
-        #   # Output:
-        #   #  <select name="book[store]" id="book-store">
-        #   #    <option>Select a store</option>
-        #   #    <option value="it">Italy</option>
-        #   #    <option value="us">United States</option>
-        #   #  </select>
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store">
+        #     <option>Select a store</option>
+        #     <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
         #
         # @example Selected option
         #   <%=
         #     # ...
         #     values = Hash['it' => 'Italy', 'us' => 'United States']
-        #     select :store, values, options: {selected: book.store}
+        #     select :store, values, options: { selected: book.store }
+        #   %>
+        #
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store">
+        #     <option value="it" selected="selected">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
+        #
+        # @example Prompt option and HTML attributes
+        #   <%=
+        #     # ...
+        #     values = Hash['it' => 'Italy', 'us' => 'United States']
+        #     select :store, values, options: { prompt: 'Select a store' }, class: "form-control"
         #   %>
         #
-        #   # Output:
-        #   #  <select name="book[store]" id="book-store">
-        #   #    <option value="it" selected="selected">Italy</option>
-        #   #    <option value="us">United States</option>
-        #   #  </select>
+        #   <!-- output -->
+        #   <select name="book[store]" id="book-store" class="form-control">
+        #     <option>Select a store</option>
+        #     <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
         #
         # @example Multiple select
         #   <%=
@@ -822,11 +1180,24 @@ module Hanami
         #     select :stores, values, multiple: true
         #   %>
         #
-        #   # Output:
-        #   # <select name="book[store][]" id="book-store" multiple="multiple">
-        #   #   <option value="it">Italy</option>
-        #   #    <option value="us">United States</option>
-        #   #  </select>
+        #   <!-- output -->
+        #   <select name="book[store][]" id="book-store" multiple="multiple">
+        #    <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
+        #
+        # @example Multiple select and HTML attributes
+        #   <%=
+        #     # ...
+        #     values = Hash['it' => 'Italy', 'us' => 'United States']
+        #     select :stores, values, multiple: true, class: "form-control"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <select name="book[store][]" id="book-store" multiple="multiple" class="form-control">
+        #     <option value="it">Italy</option>
+        #     <option value="us">United States</option>
+        #   </select>
         def select(name, values, attributes = {}) # rubocop:disable Metrics/AbcSize, Metrics/MethodLength
           options    = attributes.delete(:options) { {} }
           attributes = { name: _select_input_name(name, attributes[:multiple]), id: _input_id(name) }.merge(attributes)
@@ -862,12 +1233,12 @@ module Hanami
         #     datalist :stores, values, 'books'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="text" name="book[store]" id="book-store" value="" list="books">
-        #   #  <datalist id="books">
-        #   #    <option value="Italy"></option>
-        #   #    <option value="United States"></option>
-        #   #  </datalist>
+        #   <!-- output -->
+        #   <input type="text" name="book[store]" id="book-store" value="" list="books">
+        #   <datalist id="books">
+        #     <option value="Italy"></option>
+        #     <option value="United States"></option>
+        #   </datalist>
         #
         # @example Options As Hash
         #   <%=
@@ -876,12 +1247,12 @@ module Hanami
         #     datalist :stores, values, 'books'
         #   %>
         #
-        #   # Output:
-        #   #  <input type="text" name="book[store]" id="book-store" value="" list="books">
-        #   #  <datalist id="books">
-        #   #    <option value="Italy">it</option>
-        #   #    <option value="United States">us</option>
-        #   #  </datalist>
+        #   <!-- output -->
+        #   <input type="text" name="book[store]" id="book-store" value="" list="books">
+        #   <datalist id="books">
+        #     <option value="Italy">it</option>
+        #     <option value="United States">us</option>
+        #   </datalist>
         #
         # @example Specify Custom Attributes For Datalist Input
         #   <%=
@@ -890,12 +1261,12 @@ module Hanami
         #     datalist :stores, values, 'books', datalist: { class: 'form-control' }
         #   %>
         #
-        #   # Output:
-        #   #  <input type="text" name="book[store]" id="book-store" value="" list="books">
-        #   #  <datalist id="books" class="form-control">
-        #   #    <option value="Italy"></option>
-        #   #    <option value="United States"></option>
-        #   #  </datalist>
+        #   <!-- output -->
+        #   <input type="text" name="book[store]" id="book-store" value="" list="books">
+        #   <datalist id="books" class="form-control">
+        #     <option value="Italy"></option>
+        #     <option value="United States"></option>
+        #   </datalist>
         #
         # @example Specify Custom Attributes For Options List
         #   <%=
@@ -904,12 +1275,12 @@ module Hanami
         #     datalist :stores, values, 'books', options: { class: 'form-control' }
         #   %>
         #
-        #   # Output:
-        #   #  <input type="text" name="book[store]" id="book-store" value="" list="books">
-        #   #  <datalist id="books">
-        #   #    <option value="Italy" class="form-control"></option>
-        #   #    <option value="United States" class="form-control"></option>
-        #   #  </datalist>
+        #   <!-- output -->
+        #   <input type="text" name="book[store]" id="book-store" value="" list="books">
+        #   <datalist id="books">
+        #     <option value="Italy" class="form-control"></option>
+        #     <option value="United States" class="form-control"></option>
+        #   </datalist>
         def datalist(name, values, list, attributes = {}) # rubocop:disable Metrics/MethodLength
           attrs    = attributes.dup
           options  = attrs.delete(:options)  || {}
@@ -926,6 +1297,71 @@ module Hanami
           end
         end
 
+        # Button
+        #
+        # @param content [String] The content
+        # @param attributes [Hash] HTML attributes to pass to the button tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     button 'Click me'
+        #   %>
+        #
+        #   <!-- output -->
+        #   <button>Click me</button>
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     button 'Click me', class: "btn btn-secondary"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <button class="btn btn-secondary">Click me</button>
+        def button(content, attributes = {})
+          # This is here only for documentation purposes
+          super
+        end
+
+        # Image button
+        #
+        # Visual submit button
+        #
+        # **Please note:** for security reasons, please use the absolute URL of the image
+        #
+        # @param source [String] The **absolute URL** of the image
+        # @param attributes [Hash] HTML attributes to pass to the button tag
+        #
+        # @since 1.0.0.beta2
+        #
+        # @example Basic usage
+        #   <%=
+        #     # ...
+        #     image_button "https://hanamirb.org/assets/button.png"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input type="image" src="https://hanamirb.org/assets/button.png">
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     image_button "https://hanamirb.org/assets/button.png", name: "image", width: "50"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <input name="image" width="50" type="image" src="https://hanamirb.org/assets/button.png">
+        def image_button(source, attributes = {})
+          attrs = attributes.dup
+          attrs[:type] = :image
+          attrs[:src]  = escape_url(source)
+
+          input attrs
+        end
+
         # Submit button
         #
         # @param content [String] The content
@@ -939,8 +1375,17 @@ module Hanami
         #     submit 'Create'
         #   %>
         #
-        #   # Output:
-        #   #  <button type="submit">Create</button>
+        #   <!-- output -->
+        #   <button type="submit">Create</button>
+        #
+        # @example HTML Attributes
+        #   <%=
+        #     # ...
+        #     submit 'Create', class: "btn btn-primary"
+        #   %>
+        #
+        #   <!-- output -->
+        #   <button type="submit" class="btn btn-primary">Create</button>
         def submit(content, attributes = {})
           attributes = { type: :submit }.merge(attributes)
           button(content, attributes)
@@ -1001,7 +1446,7 @@ module Hanami
         def _attributes(type, name, attributes)
           attrs = { type: type, name: _displayed_input_name(name), id: _input_id(name), value: _value(name) }
           attrs.merge!(attributes)
-          attrs[:value] = Hanami::Utils::Escape.html(attrs[:value])
+          attrs[:value] = escape_html(attrs[:value])
           attrs
         end
 
@@ -1089,6 +1534,7 @@ module Hanami
           attributes
         end
 
+        # @api private
         def _select_input_name(name, multiple)
           select_name = _input_name(name)
           select_name = "#{select_name}[]" if multiple
@@ -1097,6 +1543,8 @@ module Hanami
 
         # TODO: this has to be refactored
         #
+        # @api private
+        #
         # rubocop:disable Metrics/CyclomaticComplexity
         # rubocop:disable Metrics/PerceivedComplexity
         def _select_option_selected?(value, selected, input_value, multiple)
@@ -1106,6 +1554,7 @@ module Hanami
         # rubocop:enable Metrics/PerceivedComplexity
         # rubocop:enable Metrics/CyclomaticComplexity
 
+        # @api private
         def _check_box_checked?(value, input_value)
           !input_value.nil? &&
             (input_value.to_s == value.to_s || input_value.is_a?(TrueClass) ||