Help us understand the problem. What is going on with this article?

text_field_tagの書き方

More than 1 year has passed since last update.

text_field_tagを書くときに、ちょっとつまずいた部分をメモします。
※以下slimで書いています。

valueにidやclassの値が入ってしまう場合

起こったこと

sample.html.slim
= text_field_tag 'datetime_interview[start_time]', class: 'time start', placeholder: "開始時間"

と書くと、
text_field_tagスクリーンショット.png
とinputのvalueにソースコードが入ってしまいます。

原因

ここでRailsのリファレンスを確認すると、

 text_field_tag(要素名 [, 値, オプション])

text_field_tagは2つ目の引数は、値(value)となるので、class: 'time start', placeholder: "開始時間"がvalueに入ってしまいます。
※なぜplaceholder: "開始時間"までvalueに含まれるのか分かる方がいらっしゃればご教授願います。

対策

sample.html.slim
= text_field_tag 'datetime_interview[start_time2]', '', class: 'time start', placeholder: "開始時間"

2つ目の引数に、空を入れることで解決します。

「data-hogehoge」などの属性を追加したい場合

起こったこと

sample.html.slim
= text_field_tag 'datetime_interview[start_time2]', '', class: 'time start', placeholder: "開始時間", data-time-format: "H:i"

「data-time-format」(timepickerにおける時刻のフォーマットを定義する属性)を追加したいのですが、syntaxエラーとなります。

原因

キーにハイフンやスペースなどが含まれていたり、数字で始まる場合はsyntaxエラーとなるようです。(コメントありがとうございます)

対策

sample.html.slim
= text_field_tag 'datetime_interview[start_time2]', '', class: 'time start', placeholder: "開始時間", 'data-time-format': "H:i"

「data-time-format」をコーテーションで囲むとうまくいきます。

text_field_tagについて、ちょっとでもあれ?と思ったところがあれば、随時追記したいと思います。

ryo-ishii
好奇心旺盛すぎるWEBエンジニアのなりたてです。 UXデザインから開発まで携わっています。 サービスつくることに、(二つの意味で)どハマり中です。
assign-navi
株式会社アサインナビは、日本最大級のエンジニア・IT企業とIT案件のマッチングサイト「アサインナビ」を運営する企業です。
https://assign-navi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした