Search

検索したいワードを入力してください

2019年04月04日

Railsのformを生成する方法とそのオプションのまとめ

Webアプリケーションの利用者とのインターフェース部分となるフォームを、Railsで実装するためにform関連のメソッドを習得しておきましょう。Railsでは、formの作成が簡単に行える部品も豊富に揃っています。まず基本について学んでみましょう。

formとは

form(フォーム)は、一般用語としては、形、形状、形式、形態、型、書式、伝票などを表す言葉です。IT用語としてのフォームは、ソフトウェアの操作画面やWebページなどの、利用者からの入力を受け付ける機能や利用者にデータを提示する機能を表します。

入力フォームは、クライアント(端末)側で情報を入力し、サーバにデータを受け渡す機構です。出力フォームはサーバから戻されるデータをユーザに提示する機構です。

formを生成する方法とオプションのまとめ

Railsでは、フォームを宣言するメソッドとしてform_forとform_tagが用意されています。ここでは、form_forとform_tagを使ったRailsにおけるformの作成の方法をご紹介します。

form_forとは

form_forは、Webアプリケーションで使用するフォームを作成するメソッドのひとつです。Webサイトでよく見かける個人情報の入力画面も、form_forメソッドを使って簡単に作成できます。まずは、form_forメソッドを使って基本的な入力フォームを作ってみましょう。

form_forメソッドでは、モデルに基づいたフォームを作成します。基本的に、フォームの項目とモデルの属性は一致します。

form_forの使い方

form_forメソッドは、以下の形式で使うことができます。

【基本構文】
form_for(モデルオブジェクト [, オプション]) do |f|
end


1つのテキストボックスとsubmitボタンのみのフォームを作成するサンプルコードをもとに、フォームに表示するオブジェクトを増やし、Webアプリケーションの入力フォームを作ってみましょう。

form_forを使ったサンプルコード

実際にform_forを使って入力フォームを記述してみましょう。

【サンプルコード】
<% form_for(@sample) do |f| %>
<div><%= f.text_field :name, class: "field" %></div>
<%= f.submit %>
<% end %>

form_forのオプションまとめ

form_forには:url、:namespace、:htmlの3つのオプションがあります。オプションなしでform_forを使うと、<form action="/xxxx" class="xxxx" id="xxxx" method="post">というform句が生成されます(xxxxは任意)。

オプションを指定すると、基本のform句にオプション内容が反映されたform句が生成されます。

オプション指定例form句への展開
:url:url => {:action => 'yyyy''action="/xxxx/yyyy
:html:html => {:multipart => true}enctype="multipart/form-data"

form_tagとは

モデルと紐づくフォームを作成する際に使うRailsのメソッドがform_forですが、モデルとは紐づかない、単独のフォームを作成したい場合はRailsではform_tagを使います。モデルと紐づかないために、データを扱う際にはあまり用途のないメソッドといえます。

主に「検索窓」のような、一時的なデータ保存が不要なテキストボックスを作成する場合に、Railsではform_tagが用いられます。

form_tagの使い方

form_tagメソッドは以下の形式で記述されます。

【基本構文】
form_for(モデルオブジェクト [, オプション]) do |f|
end

form_tagを使ったサンプルコード

form_tagを使って検索フォームを作ってみましょう。

【サンプルコード】
<%= form_tag("/search", method: "get") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q) %>
<%= submit_tag("検索") %>
<% end %>

form_tagのオプションまとめ

form_tagでは、以下の7つのオプションを設定することができます。

【form_tagでオプション指定できる内容】
・マルチパート(:multipart)
・HTTPメソッド(:method)
・authenticity_tokenを比較して返す(:authenticity_token)
・Ajaxでリンクを処理(:remote)
・id(:id)
・class(:class)

良く使用されるフォームのまとめ

最後に、Railsでフォームを作成する際に、よく使われるフォーム部品をご紹介しておきます。ここでご紹介するフォーム部品を押さえておけば、Railsで一般的なフォームを作成するのに役立つはずです。

いわば、Railsのフォーム作成において、基本ともいえるフォーム部品なので、使い方と機能を覚えておきましょう。

1行のテキストボックス

Railsのフォームで、氏名入力欄など、1行で収まるテキストボックスを表示するためには、text_fieldというフォーム部品を使います。

【使用するフォーム部品】
form.text_field(プロパティ名 [, オプション])

【コード記述例】
<%= form.text_field :title, class: "sample" %>

text_fieldだけでは、テキストボックスが表示されるだけになるので、多くの場合、labelと一緒に使います。

複数行のテキスト入力させる

Railsのフォームで通信欄など、複数行に渡って文字入力をするためのテキストボックスにあたるオブジェクトを表示するためには、text_areaというフォーム部品を使います。

【使用するフォーム部品】
form.text_area(プロパティ名 [, オプション])

【コード記述例】
<%= form.text_area:biko, class: "sample", size: "100x50" %>

text_areaだけでは、テキストエリアが表示されるだけになるので、多くの場合、labelと一緒に使います。

メールアドレスを入力させる

Railsのフォームでe-mailのアドレスを入力する欄を表示する場合、text_fieldで代替することもできますが、email_fieldというフォーム部品を知っていると、メールアドレスの形式チェックを部品が行ってくれます。

【使用するフォーム部品】
form.email_field(プロパティ名 [, オプション])

【コード記述例】
<%= form..email_field :email, :size => "40" %>

数字のみを入力させる

Railsで注文個数など数字を入力する欄を表示する際は、テキストボックスでも代替できますがnumber_fieldというフォーム部品を知っていると便利です。

【使用するフォーム部品】
form.number_field(プロパティ名 [, オプション])

【コード記述例】
<%= form.number_field :order, class: "sample" %>

number_fieldでは、数値を入力するだけでなく、数値の増減させるためのボタンも利用できるようになります。

選択のリストボックス

Railsのフォームで選択肢から回答を選ぶ、いわゆる「リストボックス」を表示する際は、selectというフォーム部品を使います。

【使用するフォーム部品】
form.select(プロパティ名, タグの情報 [, オプション])

【コード記述例】
<%= form.select :name, [["花子", "hanako"], ["由美子", "yumiko"]] %>

ファイルを選択する

アップロードファイルを選ぶ場合など、ファイルの保存場所とファイル名を指定するときに、テキストボックスでファイルパスを入力させるよりも、ファイル選択のオブジェクトが表示された方が、利用者にとっては便利です。

ファイル選択の部品を表示させるためには、file_fieldのフォーム部品を使いましょう。

【使用するフォーム部品】
form.file_field(プロパティ名 [, オプション])

【コード記述例】
<%= form.file_field :fine_name %>

パスワード入力欄

パスワードを設定する画面などで、利用者が入力した文字列を*などでマスキングして表示させたい場合は、password_fieldを使いましょう。

【使用するフォーム部品】
form.password_field(プロパティ名 [, オプション])

【コード記述例】
<%= form.password_field :pass %>

さっそくRailsでフォームを作成してみよう!

Railsでは、form_forメソッドを使うことで、データと紐づけたフォームを簡単に作成することができます。また、利用者がフォームにデータを入力しやすいフォーム部品も多数用意されています。

まずは、Railsを使って、いろいろなフォーム部品を使ったフォームを作成して、フォームの動作や利用者としての使い勝手を試してみましょう。

【PR】多くの人がプログラミングを諦めてしまう理由をご存知ですか?



近年プログラミングを勉強する人が増えています。

プログラミング学習者の多くは独学から取り組もうとしますが、だいたい80%ほどは3ヶ月も続かずに諦めてしまいます。早い人は1日目で。

多くの人がプログラミングを独学しようとして諦める理由は、次の3つ。
●モチベーションが維持できない
●エラーの原因・解決方法が分からない
●どう学習すればよいか分からない

TechBoostというプログラミングスクールでは、みんなと一緒にプログラミングをするのでモチベーションの維持ができ、分からないことがあればマンツーマンで教えてくれ、徹底的に研究された初心者向けの教材が揃っています。

TechBoostを卒業後、実際にエンジニアとして転職した方もいるほど。

本気でプログラミングを学びたい方は、一度無料のカウンセリングでご相談ください。プログラミングを嫌いになる前に。

tech boostについて

オーダーメイド型の学習コンテンツを提供する「tech boost」 は、エンジニアのキャリア支援に特化したサービスを複数展開している株式会社Branding Engineerが運営しているプログラミングスクールです。最短3ヶ月間で、未経験から『プログラミングの基礎』、『実際に業務で必要となるスキル』、『今のトレンドとなっている知識』まで学べ、ご希望の方にはプロのキャリアアドバイザーによる就業支援を行うことができます。

tech boost卒業生インタビュー

tech boostの卒業生の声を聞きました。あなたがプログラミングを学びたい理由を、一度考えてみてください。
営業→Javaエンジニア→Rubyエンジニアと転向し、第一志望のFinTech企業で働く山下さん
元営業、ビジネスのわかるエンジニアを目指す菅原さん
サンフランシスコに交換留学し、シリコンバレーのVCでインターン中の梅本さん
予備校の営業から半年でエンジニア転職を果たした小田島さん

tech boostの口コミ



Related