Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Формы Основы разработки на Ruby on Rails

Программа урока

  • Работа с одиночными полями
  • Работа с коллекциями
  • Возможности хэлперов
  • Отображение ошибок
  • Настройка SimpleForm
  • Дополнительные возможности
  • Интеграции

SimpleForm

# Gemfile
# https://github.com/heartcombo/simple_form
gem 'simple_form'
bin/rails g simple_form:install

bin/rails g migration add_fields_to_articles published:boolean edited_at:datetime

bin/rails db:migrate

# Установка simple_form с поддержкой bootstrap
rails generate simple_form:install --bootstrap

После установки simple_form можно кастомизировать в инициалайзере config/initializers/simple_form.rb

Примеры использования

# https://github.com/heartcombo/simple_form
= simple_form_for article do |f|
  = f.input :title
  = f.input :body
  = f.input :author
  # text: Create/Update article
  = f.button :submit

#   <form class="simple_form new_article" id="new_article" novalidate="novalidate" action="/articles" accept-charset="UTF-8"
#     method="post"><input type="hidden" name="authenticity_token"
#       value="">
#     <div class="input string required article_title"><label class="string required" for="article_title"><abbr
#           title="required">*</abbr> Title</label><input class="string required" type="text" name="article[title]"
#         id="article_title"></div>
#     <div class="input text required article_body"><label class="text required" for="article_body"><abbr
#           title="required">*</abbr> Body</label><textarea class="text required" name="article[body]"
#         id="article_body"></textarea></div>
#     <div class="input string required article_author"><label class="string required" for="article_author"><abbr
#           title="required">*</abbr> Author</label><input class="string required" type="text" name="article[author]"
#         id="article_author"></div><input type="submit" name="commit" value="Create Article" class="btn"
#       data-disable-with="Create Article">
#   </form>

# input выводит внутри div инпут, подсказки, ошибки
f.input :title

# Поля отображаются обязательными, это происходит из-за валидации полей в модели
f.input :title, placeholder: 'Title', required: false
# Добавление атрибутов для лейбла, подсказки, инпута, обёртке инпута
f.input :body, label_html: { class: 'input-group' }, hint_html: { id: 'hint '}, input_html: {class: 'text-input'}, wrapper_html: {class: 'wrapper-class'}

# Отключение поля ввода
f.input :title, disabled: true

# Отображение ошибок и подсказок отдельно
f.input :title, placeholder: 'Title', required: false, error: false, hint: false
f.error :title
f.hint 'No special characters, please!'

# Can't be blank
f.error :title
# Title can't be blank
f.full_error :title

# input_field создаёт инпут без обертки и дополнительных выводов (ошибок, подсказок)
f.input_field :title
f.error :title
f.hint 'No special characters, please!'

# В зависимости от типа атрибута, будут созданы разные инпуты
f.input :published
f.input :edited_at
# <div class="input boolean optional article_published"><input value="0" type="hidden" name="article[published]"><label class="boolean optional checkbox" for="article_published"><input class="boolean optional" type="checkbox" value="1" name="article[published]" id="article_published">Published</label></div>

# Radio buttons
f.input :published, as: :radio_buttons
# <div class="input radio_buttons optional article_published"><label class="radio_buttons optional">Published</label><input type="hidden" name="article[published]" value=""><span class="radio"><label for="article_published_true"><input class="radio_buttons optional" type="radio" value="true" name="article[published]" id="article_published_true">Yes</label></span><span class="radio"><label for="article_published_false"><input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="article[published]" id="article_published_false">No</label></span></div>

# True по дефолту
f.input :published, as: :radio_buttons, checked: true

# Галочка по дефолту для чекбокса
f.input :published, input_html: { checked: true }

# При передаче коллекции поле становится селектом
f.input :title, collection: ['Title 1', 'Title 2']
# <div class="input select required article_title"><label class="select required" for="article_title"><abbr title="required">*</abbr> Title</label><select class="select required" name="article[title]" id="article_title"><option value="" label=" "></option>
# <option value="Title 1">Title 1</option>
# <option value="Title 2">Title 2</option></select></div>

# При передаче массива массивов первый элемент будет отображаться для пользователя, второй - будет значением
f.input :title, collection: [['Title 1', 1], ['Title 2', 2]]

# label_method и value_method применяются к каждому элементу чтобы получить значение и лейбл
f.input :gender, as: :radio_buttons, collection: [['0', 'female'], ['1', 'male']], label_method: :second, value_method: :first

# prompt - подсказка для ввода. При false будет первое значение из списка
f.input :title, collection: [['Title 1', 1], ['Title 2', 2]], prompt: 'Select please'

# Выбранное значение по дефолту (selected: value)
f.input :title, collection: [['Title 1', 1], ['Title 2', 2]], selected: 2

# Текст для кнопки вместо автогенерируемого
f.button :submit, 'Submit'

# Установка классов и атрибутов
f.button :submit, class: 'btn-success', id: 'submit'

# Также simple form позволяет создавать кастомные билдеры форм
# https://github.com/heartcombo/simple_form#custom-form-builder

Создание своего инпута

f.input :title, as: :currency

app/inputs/currence_input.rb

class CurrencyInput < SimpleForm::Inputs::Base
  def input(kwargs)
    options = merge_wrapper_options(input_html_options, kwargs)

    "#{@builder.text_field(attribute_name, options)} $".html_safe
  end
end

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Разработчик на Ruby on Rails
Профессия
c опытом
Создание веб-приложений со скоростью света
2 февраля 5 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»
Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу