スライドショー

【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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

sato

sato

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説