formを設計するには、コマンド一発できます。

そこにデザインをつけるにはbootstrapを使うといい出ようね。

まずはruby で設計したときに出てくるコードとそこで出力されるものがどのようなものなのかを確認してみましょう。

品目の編集（テキストフィールド）

ruby

<div class="field">
   <%= form.label :品目 %>
   <%= form.text_field :item %>
 </div>

html上ではこちら（要素の調査から）

<div class="field">
<label for="item_品目">品目</label>
<input type="text" name="item[item]" id="item_item">
</div>

これにCSSをつけるにはどうすればいいでしょうか？

bootstrapはこのように入れます　参考例

<div class="form-group">
     <label for="usr">Name:</label>
     <input type="text" class="form-control" id="usr">
   </div>

インプットのところにクラスが入っていますね

class="form-control"

そうすると次のように変更すると入力フィールドがきれいになります。

<div class="form-group">
    <label for="item_品目">品目</label>
    <input type="text" class="form-control" name="item[item]" id="item_item">
  </div>

実際に表示は次のようになります。

同じようにほかのところも編集してみましょう。

購入金額の編集（ナンバーフィールド）

金額を調整するところはtextフィールドではないので、注意が必要です。

まずはRubyのコードを見てみましょう

<div class="field">
<%= form.label :購入金額 %>
<%= form.number_field :price %>
</div>

ここで、ナンバーフィールドになっています。

たとえば　number fieldについてはこちらを見てみましょう

numberフィールドにすることでユーザーは強制的に数値を入力させることができます。

くわしくはこちら

この表示からわかるように最大値、最小値を設定することができるので便利ですね。

ではあらためて、Rubyのコードを見てみましょう。

<div class="field">
   <%= form.label :購入金額 %>
   <%= form.number_field :price %>
 </div>

ここから

<div class="form-group">
    <label for="item_購入金額">購入金額</label>
    <input type="number" class="form-control" name="item[price]" id="item_price">
  </div>

このように変更するとどうでしょうか？

これで入力画面がうまくできましたね。

コメント欄の確認

まずはRubyのコードを確認しましょう

<div class="field">
   <%= form.label :コメント %>
   <%= form.text_field :comment %>
 </div>

これはテキストフィールドですが、もう少しおおきなテキストエリアというものがあるのがそれを使ってみましょう。

テキストエリアはこちらが参考になります。

 <div class="form-group">
 <label for="comment">Comment:</label>
 <textarea class="form-control" rows="5" id="comment"></textarea>
</div> 

これを参考に編集しなおしましょう。

通常のiputで考える以下のようになりますね。

<div class="form-group">
    <label for="item_コメント">コメント</label>
    <input type="text" class="form-control" name="item[comment]" id="item_comment">
  </div>

そして、テキストエリアを考慮して編集するとこうなります。

<div class="form-group">
<label for="item_コメント">コメント</label>
<textarea class="form-control" rows="5" name="item[comment]" id="item_comment"></textarea>
</div>

このようなかんじでテキストフィールド、ナンバーフィールド、テキストエリアをうまく作れました。

これで非常に見やすく入力ができるようになりますね。