Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Declare ActionView::Helpers::FormBuilder#id
`ActionView::Helpers::FormBuilder#id` --- Generate an HTML `id` attribute value. Return the [`<form>` element's][mdn-form] `id` attribute. ```html+erb <%= form_for @post do |f| %> <%# ... %> <% content_for :sticky_footer do %> <%= form.button(form: f.id) %> <% end %> <% end %> ``` In the example above, the `:sticky_footer` content area will exist outside of the `<form>` element. [By declaring the `form` HTML attribute][mdn-button-attr-form], we hint to the browser that the generated `<button>` element should be treated as the `<form>` element's submit button, regardless of where it exists in the DOM. [A similar pattern could be used for `<input>` elements][mdn-input-attr-form] (or other form controls) that do not descend from the `<form>` element. `ActionView::Helpers::FormBuilder#field_id` --- Generate an HTML <tt>id</tt> attribute value for the given field Return the value generated by the <tt>FormBuilder</tt> for the given attribute name. ```html+erb <%= form_for @post do |f| %> <%= f.label :title %> <%= f.text_field :title, aria: { describedby: form.field_id(:title, :error) } %> <span id="<%= f.field_id(:title, :error) %>">is blank</span> <% end %> ``` In the example above, the <tt><input type="text"></tt> element built by the call to <tt>FormBuilder#text_field</tt> declares an <tt>aria-describedby</tt> attribute referencing the <tt><span></tt> element, sharing a common <tt>id</tt> root (<tt>post_title</tt>, in this case). This method is powered by the `field_id` helper declared in `action_view/helpers/form_tag_helper`, which is made available for general template calls, separate from a `FormBuilder` instance. [mdn-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form [mdn-button-attr-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form [mdn-input-attr-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-form [mdn-aria-describedby]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute [w3c-wai]: https://www.w3.org/WAI/tutorials/forms/notifications/#listing-errors
- Loading branch information
1 parent
89414f5
commit 59ca21c
Showing
6 changed files
with
183 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters