スライドショー

【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日

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

sato

sato

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