9
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

form_withで、フォームの大きさを変える

Last updated at Posted at 2020-05-30

form_withとform_forどっちを使えばいいのか?
違いがわからずにいました。

登録フォームを作る際に、
railsチュートリアルや、スクールのカリキュラムでは,form_forを使っていましたが、現場で使える Ruby on Rails 5速習実践ガイドでは、form_withが使われていました。

どうやら、トレンドはform_withみたいですね。
この記事が、まとまっていてわかりやすかった。
【Rails】form_withの使い方を徹底解説!
form_withの使い方については、本記事では割愛します。

##フォームの初期値

実際にフォームを実装していると、初期設定のフォームは小さく感じる。
ユーザーの観点で考えると、かなり使いにくそう。

よく使うであろう、form.text_fieldform.text_areaの幅の初期値は以下の通り。

form.text_field
#form.text_field
#幅30文字。初期値について、以下はわざと記載しているが本来記載されていない。
<%= form.text_field :name,  size: 30 %>
form.text_area
#form.text_area
#初期値は40x20。初期値について、以下はわざと記載しているが本来記載されていない。
<%= form.text_area :description, , size: "40x20" %>

##フォームの大きさを変える

フォームの幅を指定する

<%= form.text_field :name,  size: 40 %>

<%= form.text_area :description, size: "40x20" %>

結論:

sizeの値を変えるだけで、幅が広がります。
form.text_fieldform.text_areaの初期の幅が違うので、レイアウト的に合わせたいなら、
上記のように値を合わせれば、いいと思います。

##新規投稿画面


     <%= form_with model: @question, local: true do |form| %>

        <div class="form-group">
          <%= form.label :name, 'Title', class: 'form-control' %>
          <%= form.text_field :name, placeholder: "what is about?", size: "50" %>
        </div>
        <div class="form-group">
          <%= form.label :description, 'Content', class: 'form-control' %>
          <%= form.text_area :description,  placeholder: "Please your comments in 500 words", size: "50x10"%>
        </div>
        <div class="form-group, text-white">
          <%= form.label :image %>
          <%= form.file_field :image %>
        </div>
        <%= form.submit 'Submit', class:'btn-block btn-success btn-lg' %>
        
     <% end %>

作成中の登録フォームです。
自分はform.text_fieldform.text_areaの幅は、50文字で合わせています。

余談ですが、placeholderを設定しておくと、ユーザーがフォームを記入する際の助けになって良さげそうです。

にしても全然関係ないですが、labelを使うと見た目が、ガツガツしてて疲れるので、pタグにしてしまおうか悩み中です。(実際にpタグに置き換えてもform_withは正常に動きました。)

それと、form_withを実装するのに、以下の記事が大変役立ちました。
連日格闘したform_withとの戦いに決着をつけてきた

それでは!

9
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?