Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Make button_tag more helpful #189

Closed
wants to merge 2 commits into from

2 participants

@tomstuart

The button_tag helper isn't very helpful at the moment for two reasons:

  • it defaults the type attribute to "button", which is unexpected since type="submit" is HTML's default for the <button> element; and
  • it doesn't take a block, but the main reason to use <button> (instead of <input type="submit"> et al) is that you want to include styled text or other elements like images.

These two commits fix the implementation, tests and docs for these two issues respectively.

tomstuart added some commits
@tomstuart tomstuart Make type="submit" the default for button_tag helper
"submit" is the default value of the <button> element's type attribute
according to the HTML 4.01 and the HTML5 draft specs, so if button_tag
is going to have a default, type="submit" is a more sensible choice than
type="button".

http://www.w3.org/TR/html401/interact/forms.html#adef-type-BUTTON
http://dev.w3.org/html5/spec/the-button-element.html#attr-button-type
8ef9f48
@tomstuart tomstuart Add block support to button_tag helper
As per the HTML 4.01 spec:

  Buttons created with the BUTTON element function just like buttons
  created with the INPUT element, but they offer richer rendering
  possibilities: the BUTTON element may have content. For example, a
  BUTTON element that contains an image functions like and may resemble
  an INPUT element whose type is set to "image", but the BUTTON element
  type allows content.

Since rich content is the main purpose of the <button> element, it makes
sense for the button_tag helper to accept a block.

http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON
http://dev.w3.org/html5/spec/the-button-element.html#the-button-element
34e153e
@spastorino
Owner

Pushed thanks.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 12, 2011
  1. @tomstuart

    Make type="submit" the default for button_tag helper

    tomstuart authored
    "submit" is the default value of the <button> element's type attribute
    according to the HTML 4.01 and the HTML5 draft specs, so if button_tag
    is going to have a default, type="submit" is a more sensible choice than
    type="button".
    
    http://www.w3.org/TR/html401/interact/forms.html#adef-type-BUTTON
    http://dev.w3.org/html5/spec/the-button-element.html#attr-button-type
  2. @tomstuart

    Add block support to button_tag helper

    tomstuart authored
    As per the HTML 4.01 spec:
    
      Buttons created with the BUTTON element function just like buttons
      created with the INPUT element, but they offer richer rendering
      possibilities: the BUTTON element may have content. For example, a
      BUTTON element that contains an image functions like and may resemble
      an INPUT element whose type is set to "image", but the BUTTON element
      type allows content.
    
    Since rich content is the main purpose of the <button> element, it makes
    sense for the button_tag helper to accept a block.
    
    http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON
    http://dev.w3.org/html5/spec/the-button-element.html#the-button-element
This page is out of date. Refresh to see the latest.
View
21 actionpack/lib/action_view/helpers/form_tag_helper.rb
@@ -414,7 +414,8 @@ def submit_tag(value = "Save changes", options = {})
# <tt>reset</tt>button or a generic button which can be used in
# JavaScript, for example. You can use the button tag as a regular
# submit tag but it isn't supported in legacy browsers. However,
- # button tag allows richer labels such as images and emphasis.
+ # the button tag allows richer labels such as images and emphasis,
+ # so this helper will also accept a block.
#
# ==== Options
# * <tt>:confirm => 'question?'</tt> - If present, the
@@ -431,18 +432,22 @@ def submit_tag(value = "Save changes", options = {})
#
# ==== Examples
# button_tag
- # # => <button name="button" type="button">Button</button>
+ # # => <button name="button" type="submit">Button</button>
#
- # button_tag "<strong>Ask me!</strong>"
+ # button_tag(:type => 'button') do
+ # content_tag(:strong, 'Ask me!')
+ # end
# # => <button name="button" type="button">
# <strong>Ask me!</strong>
# </button>
#
# button_tag "Checkout", :disable_with => "Please wait..."
# # => <button data-disable-with="Please wait..." name="button"
- # type="button">Checkout</button>
+ # type="submit">Checkout</button>
#
- def button_tag(label = "Button", options = {})
+ def button_tag(content_or_options = nil, options = nil, &block)
+ options = content_or_options if block_given? && content_or_options.is_a?(Hash)
+ options ||= {}
options.stringify_keys!
if disable_with = options.delete("disable_with")
@@ -453,11 +458,9 @@ def button_tag(label = "Button", options = {})
options["data-confirm"] = confirm
end
- ["type", "name"].each do |option|
- options[option] = "button" unless options[option]
- end
+ options.reverse_merge! 'name' => 'button', 'type' => 'submit'
- content_tag :button, label, { "type" => options.delete("type") }.update(options)
+ content_tag :button, content_or_options || 'Button', options, &block
end
# Displays an image which when clicked will submit the form.
View
18 actionpack/test/template/form_tag_helper_test.rb
@@ -387,7 +387,7 @@ def test_submit_tag_with_confirmation_and_with_disable_with
def test_button_tag
assert_dom_equal(
- %(<button name="button" type="button">Button</button>),
+ %(<button name="button" type="submit">Button</button>),
button_tag
)
end
@@ -399,6 +399,13 @@ def test_button_tag_with_submit_type
)
end
+ def test_button_tag_with_button_type
+ assert_dom_equal(
+ %(<button name="button" type="button">Button</button>),
+ button_tag("Button", :type => "button")
+ )
+ end
+
def test_button_tag_with_reset_type
assert_dom_equal(
%(<button name="button" type="reset">Reset</button>),
@@ -420,6 +427,15 @@ def test_button_tag_escape_content
)
end
+ def test_button_tag_with_block
+ assert_dom_equal('<button name="button" type="submit">Content</button>', button_tag { 'Content' })
+ end
+
+ def test_button_tag_with_block_and_options
+ output = button_tag(:name => 'temptation', :type => 'button') { content_tag(:strong, 'Do not press me') }
+ assert_dom_equal('<button name="temptation" type="button"><strong>Do not press me</strong></button>', output)
+ end
+
def test_image_submit_tag_with_confirmation
assert_dom_equal(
%(<input type="image" src="/images/save.gif" data-confirm="Are you sure?" />),
Something went wrong with that request. Please try again.