【Rails入門】text_field_tagの使い方!classや初期値の設定方法も!

みなさんこんにちは!

フリーランスプログラマーのsatoです。

突然ですが、みなさんテキストボックスを使ったことがありますでしょうか?

rails-text-field-tag-1

画像のような、よくある文字を入力する機能です。

きっと名前や住所入力などで、1度は使ったことがありますよね?

そんなどこにでもある機能ならば、なおさら他のサイトに見劣らないように作りたいものですね!

Railsでは「text_field_tag」を使用することで、簡単にテキストボックスを作成することが可能です。

そんなわけで今回は「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", "苗字" %>

これだけ記述してブラウザで確認すると、以下のようにシンプルにテキストボックスが表示されていると思います。

rails-text-field-tag-2

引数の内訳は以下となります。

第一引数・・・パラメーター名
第二引数・・・初期値

第一引数に渡している「family-name」ですが、これはパラメータ名です。

例えば別ページへ飛んだ時paramsからtextに入力された文字を取得する時に使用します。

また第二引数に送った「苗字」が初期値として表示されていますね!

form_tagと組み合わせて使おう!

基本的にtext_field_tag単体で使うことはありません。

なぜなら決定ボタンなどが一緒になければ、入力フォームとして不自然ですよね?

入力フォームに必要な表示を一式表示するためにもform_tagと一緒に使用する必要があります。

以下のリンクで、一通り説明を行っていますので、実践的な使い方を学んでみてください。

【Rails入門】form_tagの使い方まとめ
更新日 : 2019年7月31日

text_field_tagを装飾しよう!

ここまでは非常にシンプルな使い方を見てきました。

しかしやはり、見栄えをこだわりたいですよね!

ここから先ではclassやidの反映方法などを学んでみましょう。

クラスをつけよう!

つけるだけなら非常に簡単です。

以下のように、オプションでclassをつけてしまいましょう!

<%= text_field_tag "family-name", "苗字", {class: "text-center"} %>

今回は自作したtext-centerクラスを使用し文字を中央寄せにしてみました。

rails-text-field-tag-3

ちゃんと中央寄せになっていますね。

みなさんも好きなクラスを作り反映させてみましょう!

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を指定していないものと比較した画像です。

rails-text-field-tag-4

ちゃんとサイズが変わっていますね!

まとめ

今回はテキストボックスについて見てきました。

どこにでもあるテキストボックスですが、どこにでもあるということはそれだけ需要の高い機能だということです。

他のサイトに負けない高品質なものを作りたいですね!

またform_tagと組み合わせて使うことになるため、以下のリンクのform_tagは続けて見ておきましょう。

【Rails入門】form_tagの使い方まとめ
更新日 : 2019年7月31日

今回学んだことを生かして、使いやすいテキストボックスを目指してみてください!

プログラミング学習を効率良く進めたいなら…

学習を始めたけどエラーが解決できない
作りたいものはあるけど、何から始めればいいかわからない
プログラミングに対して、このような悩みを持っている方も多いですよね。

そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI ENGINEER Plus+がおすすめです。



月額2980円(税別)で、主に4つのサービスを提供させていただきます。

  • 現役エンジニアによる月1度の「マンツーマン指導」
  • 平均回答時間30分の「Q&Aサービス」
  • 作りながら学べる28種類の「教材」
  • 学習を記録&仲間と共有できる「学習ログ」

目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにプログラミングの習得が可能です。

プログラミングを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI ENGINEER Plus+」をご利用ください。
まずは30日無料体験

書いた人

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!