formulator v0.1.8 Formulator
Link to this section Summary
Functions
Returns an html input with an associated label. If there are errors associated with the field, it will also output a span tag with the errors
Link to this section Functions
input(Phoenix.HTML.Form.t(), atom(), []) :: binary()
Returns an html input with an associated label. If there are errors associated with the field, it will also output a span tag with the errors.
Options
:label
- When given a keyword list, the keywordtext
is extracted to use as the label text. All other options are passed along to the label. When givenfalse
, does not create a label tag. Instead, anaria-label
attribute is added to the input to improve accessibility.:validate
- Defaults to application config. When provided a form created with an Ecto changeset that contains validations, then Formulator will add HTML5 validation attributes (except regex).:validate_regex
- Defaults to application config. Like option:validate
, except this will add a pattern HTML5 validation. This should work with most simple regex patterns, but the browser’s regex engine may differ from Erlang’s.:wrapper_class
- This allows you to add a class to the div that wraps the input and label. This can also be set in your config:config :formulator, wrapper_class: "input-wrapper"
Examples
Basic input:
<%= input form, :name %>
#=> <div>
#=> <label for="user_name">Name</label>
#=> <input id="user_name" name="user[name]" type="text" value="">
#=> </div>
Without a label:
<%= input form, :name, label: false %>
#=> <div>
#=> <input id="user_name" name="user[name]" aria-label="name" type="text" value="">
#=> </div>
Passing other options:
<%= input form, :name, label: [class: "control-label"] %>
#=> <div>
#=> <label class="control-label" for="user_name">Name</label>
#=> <input id="user_name" type="text" name="user[name]" value="">
#=> </div>
Using different input types:
<%= input form, :email_address,
as: :email,
placeholder: "your@email.com",
class: "my-email-class",
label: [class: "my-email-label-class"] %>
#=> <div>
#=> <label
class="my-email-label-class"
for="user_email_address">Email Address</label>
#=> <input
id="user_email_address"
type="email"
name="user[email_address]"
placeholder: "your@email.com"
value=""
class="my-email-class">
#=> </div>
Or a number input:
<%= input form, :count, as: :number %>
#=> <div>
#=> <label for="asset_count">Count</label>
#=> <input id="asset_count" type="number" name="asset[count]" value="">
#=> <div>
If your form is using a changeset with validations (eg, with Ecto
and phoenix_ecto
),
then Formulator will add HTML5 validation attributes:
<%= input form, :email, as: :email %>
#=> <div>
#=> <label for="user_email">Email</label>
#=> <input id="user_email" type="email" name="user[email]" required="required" pattern=".+@.+" %>
#=> <div>
If you would rather not add HTML5 validation attributes, you can opt out
by supplying validate: false
:
<%= input form, :email, as: :email, validate: false %>
#=> <div>
#=> <label for="user_email">Email</label>
#=> <input id="user_email" type="email" name="user[email]" %>
#=> </div>
You may want HTML5 validations, but the browser’s regex engine is not
working with Elixir’s regex engine. You can opt-out of regex validation
with validate_regex: false
:
<%= input form, :email, as: :email, validate_regex: false %>
#=> <div>
#=> <label for="user_email">Email</label>
#=> <input id="user_email" type="email" name="user[email]" required="required" %>
#=> </div>