slimで書くformサンプル

slimでのformの書き方があんまりまとまってないなと思って作成しました。
自分のメモも兼ねているので、足りない部分もあると思いますが、コメントで指摘してもらえたらと思います！

準備

細かい内容は、割愛します。やったことだけ書いていきます。

1. アプリの作成

2. slim導入

   gem 'slim-rails'
   
   group :development, :test do
     gem 'html2slim'
   end
   

3. scaffold実行

   • bundle exec rails g scaffold articles

4. bootstrapの導入

   • 参考

本題

text_field

= f.text_field :title, class: 'form-control'

#=> <input class="form-control" type="text" name="article[title]" id="article_title">

select

= f.select :category, %i[a b c], {selected: 'b'}, class: 'form-control'

#=> 
<select class="form-control" name="article[category]" id="article_category">
<option value="a">a</option>
<option selected="selected" value="b">b</option>
<option value="c">c</option>
</select>

= f.select :category, [['a', 1], ['b', 2], ['c', 3]], {}, class: 'form-control'

#=>
<select class="form-control" name="article[category]" id="article_category">
  <option value="1">a</option>
  <option value="2">b</option>
  <option value="3">c</option>
</select>

check_box

多対多であれば

= f.collection_check_boxes :tag_ids, Tag.all, :id, :name do |t|
  .form-check
    = t.check_box checked: t.object.name == '技術', class: 'form-check-input'
    = t.label class: 'form-check-label'

#=>
<div class="form-group">
  <input type="hidden" name="article[tag_ids][]" value="">
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="1" checked="checked" name="article[tag_ids][]" id="article_tag_ids_1">
    <label class="form-check-label" for="article_tag_ids_1">技術</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="2" name="article[tag_ids][]" id="article_tag_ids_2">
    <label class="form-check-label" for="article_tag_ids_2">日常</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="3" name="article[tag_ids][]" id="article_tag_ids_3">
    <label class="form-check-label" for="article_tag_ids_3">ポエム</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="4" name="article[tag_ids][]" id="article_tag_ids_4">
    <label class="form-check-label" for="article_tag_ids_4">ビジネス</label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="5" name="article[tag_ids][]" id="article_tag_ids_5">
    <label class="form-check-label" for="article_tag_ids_5">その他</label>
  </div>
</div>

radio_button

.form-check
  = f.radio_button :is_publish, true, class: 'form-check-input'
  = f.label :is_publish_true, '公開', class: 'form-check-label'
.form-check
  = f.radio_button :is_publish, false, checked: true, class: 'form-check-input'
  = f.label :is_publish_false, '下書き', class: 'form-check-label'

#=>
<div class="form-check">
  <input class="form-check-input" type="radio" value="true" name="article[is_publish]" id="article_is_publish_true">
  <label class="form-check-label" for="article_is_publish_true">公開</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" value="false" checked="checked" name="article[is_publish]" id="article_is_publish_false">
  <label class="form-check-label" for="article_is_publish_false">下書き</label>
</div>

まとめ

form周りでややこしいものを中心にやってみました。
もっとこうした方がいいなどあれば、教えてください！

参考

• (Railsのビューヘルパー(View Helper)のまとめ)[http://ruby-rails.hatenadiary.com/entry/20150113/1421149061#view-helpers-fileds_for]
• https://www.sitepoint.com/save-multiple-checkbox-values-database-rails/
• http://railsdoc.com/form
• https://getbootstrap.com/docs/4.0/components/forms/