form_withのlabel(ラベルテキスト)をclass指定してcssを適応させる方法

Question

環境

macOS 10.15.5
Rails 5.2.4.2
Docker 19.03.12

前提・実現したいこと

form_withのlabel(ラベルテキスト)をclass指定してcssを適応させたい

対象のコード

こちらの下記のコードになります。

    <%= form_with model: @user do |f| %>
      <%= f.label :メールアドレス %>
      <li>
      <%= f.email_field :email %>
      </li>
      <%= f.label :パスワード %>
      <li>
      <%= f.password_field :password %>
      </li>
      <%= f.submit "ログイン" %>
    <% end %>

試したこと

調べてみた結果下記のようにclass:emailを書き足してみましたが適応されず...他の方法などを検索などで探しても期待される検索結果が得られませんでした。
情報が少なくぜひご教授をして頂きたく存じます。よろしくお願い致します。

    <%= form_with model: @user do |f| %>
      <%= f.label class:email, :メールアドレス %>
      <li>
      <%= f.email_field :email %>
      </li>
      <%= f.label :パスワード %>
      <li>
      <%= f.password_field :password %>
      </li>
      <%= f.submit "ログイン" %>
    <% end %>

###補足

こちらの画像のように現状ログインフォームの作成を行なっています。このままだとフォームが詰まって見た目が悪いので理想としてラベルテキストにmargin-top:20pxをかけてフォームの間隔開けてきれいな見た目にしたいです。

CSSでいうと

//親要素のclassがlogin-formのため
.login-form email {
  margin-top: 20px;
}

そのためにラベルテキストにCSSをかけてフォームの間隔を空けたいです。しかし全く反応がなく画像のような状態から見た目に変化がありません...

###HTML全体

Answer 1

ここは素直に f.label :emain,class: "なにがし" とし、I18nをつかって メールアドレス と表示させることをお薦めします。

理由は３つあります

1. f.label の後に :email とするのは、validationにてemailに問題が有った時にエラー表示をしてくれるhelperがいろいろあります。それへの目印になっています。

htmlをみると <label for="user_email>メールアドレス</label> になると思います。

1. 習離破という言葉がありますが、いまはまだ習段階だと思います。標準形を身につけてください。(習でなく修だったかも）
2. ポートフォリオなら、基本が身についていることを示せるほうが良いでしょう

Comments

[tomtomtomtom]

守破離ですね^^;

[winterboum]

そだそだ

[_chii]

ご回答ありがとうございます。
参考にさせて頂きます。

Answer 2

f.label class:email, :メールアドレス

↑これを

f.label :メールアドレス,class:"email"

↑これで如何でしょうか？

Comments

[_chii]

ご回答ありがとうございます。
反応がありませんでした...

[tomtomtomtom]

f.label :email, class:"email"
これで如何でしょうか？

[_chii]

こちらも反応がありませんでした...

[tomtomtomtom]

すいません。
ちょっとわからないのですが、
反応がないとはどのような状態でしょうか？
エラーなどはでていますか？
生成されているhtmlは確認できますか？

[_chii]

補足を追加しました！こちらの説明でなんとなく伝わりますでしょうか...

[tomtomtomtom]

なるほど！
すいません^^;ちょっと伝わらないですね^^;
もうしわけありませんm(-_-)m

追加された画像部分（デザイン洒落てますね^^）
の、まずはhtmlをみたいですね^^
とくに該当のf.label部分です。
お願いできますでしょうか？？

[_chii]

当該のページのHTMLの全体を説明の下部に追加しました！
お褒めの言葉嬉しいです♪

[tomtomtomtom]

なるほど
えーと、言い方が悪かったと思います。
これはerbでhtmlではないように思います。
該当の画像部分のhtmlは
ブラウザの
・検証ツール
・デベロッパーツール
・ページのソースを表示
などで確認出来るかと思います^^

[_chii]

失礼しました汗
早速説明文に補足させて頂きました！

[tomtomtomtom]

こちらも色々検証しました。
この書き方なら
```
<%= f.label :メールアドレス %>
```
↓
```
<label class="aaa">メールアドレス</label>
```
でよいかと思います。

[_chii]

ありがとうございます！ただそれだとform_withだけのフォームではないような気がして...
実はポートフォリオ用のオリジナルアプリなのでコード自体もきれいにしたくて、その前まではpタグで囲っていてそれで期待するフォールの形ができていたのですがもし<label class="aaa">メールアドレス</label>でも大丈夫であれば<p>タグでも大丈夫でしょうか？

<%= form_with model: @user do |f| %>
<p>メールアドレス</p>
<li>
<%= f.email_field :email %>
</li>
<p.パスワード</p>
<li>
<%= f.password_field :password %>
</li>
<%= f.submit "ログイン" %>
<% end %>

こんな感じですが...

[_chii]

これだとform_withとしておかしいコードという評価にならないでしょうか？

[tomtomtomtom]

なるほどですね
それなら
= f.label :メールアドレス
これも少しおかしいかと思います。
cf.https://railsdoc.com/form
間違っているかもしれませんが、
本来なら以下のような使い方かな？？？と思います。
usersテーブルにemailカラムが存在していると思いますので、
= f.label :email,class:"email"
↑これだとラベルが「メールアドレス」にならず「email」になるので
そこを日本語化するのが、恐らく本来のやり方になるのでは？？
と思います。

[tomtomtomtom]

あと、簡単に使うなら
= f.label :emil,"メールアドレス",class:"email"
かなと、、、

何れにせよ、usersテーブルにemailカラムがあることが大前提です。

なるべく質問者様の形を崩さずにと考えていたのですが
結果的にだいぶ崩れてしまうかもで申し訳ません。

[_chii]

そうですよね…ご丁寧ありがとうございます。でもこれだとCSSを適応させることも難しいですよね…
テキストを〈p〉タグで囲んでも動作しますがコードを見られる方からしたらそれでも大丈夫でしょうか？

[tomtomtomtom]

？
classがあるので簡単にcssを適応できますよ？

[tomtomtomtom]

>コードを見られる方からしたらそれでも大丈夫でしょうか？
何をもって大丈夫とするのかによるかと思います。
動けばいいと思ってる人が見たのなら大丈夫と思います。
=f.labelやform_withの理解などを見たい人からすれば
大丈夫とは言えないかと、、、

[tomtomtomtom]

それと、
= f.label :emil,"メールアドレス"としておいて、
cssに
.login-form label{
margin-top: 20px;
}
これでもいいと思います。

[_chii]

ご丁寧に本当にありがとうございました。
なんとか形として成立させることができました！

[tomtomtomtom]

問題が解決してよかったと思います。
ほっとしました。
また何かありましたら宜しくお願いいたします^^