みなさんこんにちは!
フリーランスプログラマーのsatoです。
突然ですが、みなさんテキストボックスを使ったことがありますでしょうか?
画像のような、よくある文字を入力する機能です。
きっと名前や住所入力などで、1度は使ったことがありますよね?
そんなどこにでもある機能ならば、なおさら他のサイトに見劣らないように作りたいものですね!
Railsでは「text_field_tag」を使用することで、簡単にテキストボックスを作成することが可能です。
そんなわけで今回は「text_field_tag」の使い方について見ていきましょう。
それでは今回のアジェンダです。
[基本] text_field_tagの使い方!
[応用] text_field_tagを装飾しよう!
まずは基礎部分として使い方を学び、後半にclassなどで装飾する方法を学びましょう!
それではよろしくお願いいたします。
text_field_tagとは?
text_field_tagを一言で言うと「テキストボックスを作成する機能」と言えるでしょう。
基本的にform_tagとセットで使用されます。
と言っても言葉で説明するより実例を見た方が簡単でしょう。
早速実例形式で見ていきましょう。
text_field_tagの使い方!
では実際にtext_field_tagを使用してテキストボックスを作ってみましょう。
一番簡単な表示方法
まず例えば苗字の入力用にテキストボックスを作るとしましょう。
一番簡単に作るならば以下のようになります。
<%= text_field_tag "family-name", "苗字" %>
これだけ記述してブラウザで確認すると、以下のようにシンプルにテキストボックスが表示されていると思います。
引数の内訳は以下となります。
第二引数・・・初期値
第一引数に渡している「family-name」ですが、これはパラメータ名です。
例えば別ページへ飛んだ時paramsからtextに入力された文字を取得する時に使用します。
また第二引数に送った「苗字」が初期値として表示されていますね!
form_tagと組み合わせて使おう!
基本的にtext_field_tagを単体で使うことはありません。
なぜなら決定ボタンなどが一緒になければ、入力フォームとして不自然ですよね?
入力フォームに必要な表示を一式表示するためにもform_tagと一緒に使用する必要があります。
以下のリンクで、一通り説明を行っていますので、実践的な使い方を学んでみてください。
text_field_tagを装飾しよう!
ここまでは非常にシンプルな使い方を見てきました。
しかしやはり、見栄えをこだわりたいですよね!
ここから先ではclassやidの反映方法などを学んでみましょう。
クラスをつけよう!
つけるだけなら非常に簡単です。
以下のように、オプションでclassをつけてしまいましょう!
<%= text_field_tag "family-name", "苗字", {class: "text-center"} %>
今回は自作したtext-centerクラスを使用し文字を中央寄せにしてみました。
ちゃんと中央寄せになっていますね。
みなさんも好きなクラスを作り反映させてみましょう!
idをつけよう!
classが分かれば、idも簡単ですね!
classのようにidをつければ解決です!
<%= text_field_tag "family-name", "苗字", {id: "test-id"} %>
また以下のように、同時に使用することも可能です。
<%= text_field_tag "family-name", "苗字", {class: "text-center", id: "test-id"} %>
サイズを変えよう!
以下のようにsizeを指定することも可能です。
<%= text_field_tag "family-name", "size 30", {size:"30"} %>
以下はsizeを指定していないものと比較した画像です。
ちゃんとサイズが変わっていますね!
まとめ
今回はテキストボックスについて見てきました。
どこにでもあるテキストボックスですが、どこにでもあるということはそれだけ需要の高い機能だということです。
他のサイトに負けない高品質なものを作りたいですね!
またform_tagと組み合わせて使うことになるため、以下のリンクのform_tagは続けて見ておきましょう。
今回学んだことを生かして、使いやすいテキストボックスを目指してみてください!
