How to use placeholders instead of labels in simple_form?

Question

I want to use placeholders everywhere in my application instead of labels. I am using simple_form and Rails (3.2.14). How can I specify in simple_form config file to use placeholders instead of labels.

In Initializers there is a file simple_form.rb ie

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  # Wrappers are used by the form builder to generate a
  # complete input. You can remove any component from the
  # wrapper, change the order or even add your own to the
  # stack. The options given below are used to wrap the
  # whole input.
  config.wrappers :default, :class => :input, :hint_class => :field_with_hint, :error_class => :field_with_errors do |b|
    ## Extensions enabled by default
    # Any of these extensions can be disabled for a
    # given input by passing: `f.input EXTENSION_NAME => false`.
    # You can make any of these extensions optional by
    # renaming `b.use` to `b.optional`.

    # Determines whether to use HTML5 (:email, :url, ...)
    # and required attributes
    b.use :html5

    # Calculates placeholders automatically from I18n
    # You can also pass a string as f.input :placeholder => "Placeholder"
    b.use :placeholder

    ## Optional extensions
    # They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
    # to the input. If so, they will retrieve the values from the model
    # if any exists. If you want to enable the lookup for any of those
    # extensions by default, you can change `b.optional` to `b.use`.

    # Calculates maxlength from length validations for string inputs
    b.optional :maxlength

    # Calculates pattern from format validations for string inputs
    b.optional :pattern

    # Calculates min and max from length validations for numeric inputs
    b.optional :min_max

    # Calculates readonly automatically from readonly attributes
    b.optional :readonly

    ## Inputs
    b.use :label_input
    b.use :hint,  :wrap_with => { :tag => :span, :class => :hint }
    b.use :error, :wrap_with => { :tag => :span, :class => :error }
  end

  # The default wrapper to be used by the FormBuilder.
  config.default_wrapper = :default

  # Define the way to render check boxes / radio buttons with labels.
  # Defaults to :nested for bootstrap config.
  #   :inline => input + label
  #   :nested => label > input
  config.boolean_style = :nested

  # Default class for buttons
  config.button_class = 'btn'

  # Method used to tidy up errors. Specify any Rails Array method.
  # :first lists the first message for each field.
  # Use :to_sentence to list all errors for each field.
  # config.error_method = :first

  # Default tag used for error notification helper.
  config.error_notification_tag = :div

  # CSS class to add for error notification helper.
  config.error_notification_class = 'alert alert-error'

  # ID to add for error notification helper.
  # config.error_notification_id = nil

  # Series of attempts to detect a default label method for collection.
  # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]

  # Series of attempts to detect a default value method for collection.
  # config.collection_value_methods = [ :id, :to_s ]

  # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
  # config.collection_wrapper_tag = nil

  # You can define the class to use on all collection wrappers. Defaulting to none.
  # config.collection_wrapper_class = nil

  # You can wrap each item in a collection of radio/check boxes with a tag,
  # defaulting to :span. Please note that when using :boolean_style = :nested,
  # SimpleForm will force this option to be a label.
  # config.item_wrapper_tag = :span

  # You can define a class to use in all item wrappers. Defaulting to none.
  # config.item_wrapper_class = nil

  # How the label text should be generated altogether with the required text.
  # config.label_text = lambda { |label, required| "#{required} #{label}" }

  # You can define the class to use on all labels. Default is nil.
  config.label_class = 'control-label'

  # You can define the class to use on all forms. Default is simple_form.
  # config.form_class = :simple_form

  # You can define which elements should obtain additional classes
  # config.generate_additional_classes_for = [:wrapper, :label, :input]

  # Whether attributes are required by default (or not). Default is true.
  # config.required_by_default = true

  # Tell browsers whether to use default HTML5 validations (novalidate option).
  # Default is enabled.
  config.browser_validations = false

  # Collection of methods to detect if a file type was given.
  # config.file_methods = [ :mounted_as, :file?, :public_filename ]

  # Custom mappings for input types. This should be a hash containing a regexp
  # to match as key, and the input type that will be used when the field name
  # matches the regexp as value.
  # config.input_mappings = { /count/ => :integer }

  # Custom wrappers for input types. This should be a hash containing an input
  # type as key and the wrapper that will be used for all inputs with specified type.
  # config.wrapper_mappings = { :string => :prepend }

  # Default priority for time_zone inputs.
  # config.time_zone_priority = nil

  # Default priority for country inputs.
  # config.country_priority = nil

  # Default size for text inputs.
  # config.default_input_size = 50

  # When false, do not use translations for labels.
  # config.translate_labels = true

  # Automatically discover new inputs in Rails' autoload path.
  # config.inputs_discovery = true

  # Cache SimpleForm inputs discovery
  # config.cache_discovery = !Rails.env.development?
end

Connell

possible duplicate of Simple Form: Is it possible to remove labels and replace them with placeholders using the labels i18n? – Inconsiderable

Relying on placeholders to behave as labels has UI and accessibility pitfalls. Once a field has contents the label disappears, placeholder contrast is very low making them hard to see, and also screen reader software may not announce the placeholder at all. Maybe worth considering alternatives. Sky-labels attempts to find a middle ground by floating the labels inside the field. At the very least consider increasing the contrast of the placeholder with the ::-<webkit|moz|ms>-input-placeholder selector in CSS. – Walloon

Answer 1

You need 3 steps to enable showing placeholders instead of labels automatically and need to do more configurations.

1. make sure b.use :placeholder in simple_form.rb

2. make sure b.use :input instead of b.use :label_input

3. most important, modify your simple_form.en.yml:

en:   
  simple_form:
    "yes": 'Yes'
    "no": 'No'
    required:
      text: 'required'
      mark: '*'
    placeholders:
      user:
        name: 'name'

in your page:

<%= simple_form_for @user do |f|%>
  <%= f.input :name%>
<% end%>

Every placeholder needs to be defined here, or it will not display.

Pontificate

Don't forget to restart your server: touch tmp/restart.txt (or powder) – Heliochrome

Answer 2

simple_form lets you hide an individual label by passing in label:false to each input. For example: <%= f.input :email, placeholder: 'Email', label:false %> will hide the label for your email input in a form.

Petronia

Answer 3

You just alter, at initializers/simple_form.rb:

## Inputs
b.use :label_input

to

## Inputs
b.use :input

and, at your views just use attribute :placeholder instead of :label

Observe

In views I am using only this:<%= f.input :name, :required => true %> – Connell

Answer 4

Solution for bootstrap-enabled forms

In order to get this to work with Bootstrap I had to update simple_form_bootstrap.rb and comment out the b.use :label entries in the config for both vertical_form and horizontal_form:

#b.use :label, class: 'control-label'
b.use :placeholder

Then as @Bigxiang correctly mentioned the placeholders then all need to have a value defined in your simple_form.{LANG}.yml.

en:
  placeholders:
    defaults:
      first_name: First name
      last_name: Last name
    user:
      email: Email

Note that you don't have to specify the model when you use generic defaults translations, like first_name, last_name in my example.

Heliochrome

Answer 5

Using placeholders instead of labels is bad practice, because it reduces the accessibility of the form to users of assistive technologies.

This doesn't mean that you can't achieve the visual effect that you're looking for: you can use the default behaviour of simple_form to create labels, and then style them with CSS to look like placeholders. Libraries like SkyLabels.js help create this visual effect without reducing accessibility.

As a general rule, pick HTML elements and attributes for their semantics rather than their default appearance.

Taro