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を使って、いろいろなフォーム部品を使ったフォームを作成して、フォームの動作や利用者としての使い勝手を試してみましょう。