Q&A
フローティングラベルサンプル for Bootstrap · Bootstrap
を真似してフローティングラベルのフォームを Rails で作ってみたんですが
何度かクリックしているうちに入力できなくなってしまいます
フローティングラベル自体はCSSだけで実現できるはずなので
jquery と bootstrap 以外は
https://getbootstrap.jp/docs/4.5/examples/floating-labels/floating-labels.css
このCSSを読み込んでいるだけなんですが
サンプルサイトは他にもいくつかJSを読み込んでいるのでその中のJSも必要なのでしょうか
原因がわかる方いたら教えていただきたいです
以下出力する HTML のうち必要な箇所のみ抽出したもので
MAC OS 上の chrome で開けば単独で症状が再現しました
<head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <link rel="stylesheet" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous"> <link href="https://getbootstrap.jp/docs/4.5/examples/floating-labels/floating-labels.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script> </head> <form class="form-signin" id="new_user" action="/users/sign_in" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"> <h2 class="h3 mb-3 font-weight-normal">ログイン</h2> </div> <div class="form-label-group"> <input class="form-control" autofocus="autofocus" placeholder="メールアドレス" required="required" type="email" value="" name="user[email]" id="user_email"> <label for="user[email]">メールアドレス</label> </div> <div class="form-label-group"> <input autocomplete="current-password" class="form-control" placeholder="パスワード" required="required" type="password" name="user[password]" id="user_password"> <label for="user[password]">パスワード</label> </div> <div class="checkbox mb-3"> <label> <input name="user[remember_me]" type="hidden" value="0"><input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me"> 保存する </label> </div> <button class="btn btn-lg btn-secondary btn-block" type="submit">ログイン</button> </form>
回答1件
0
ベストアンサー
こんにちは。
こういうことではないですか？
html
1<label for="user[email]">メールアドレス</label>
↓
html
1<label for="user_email">メールアドレス</label>
<label> を <input> 要素に関連付けるには、 <input> に id 属性を設定しなければなりません。そして <label> に for 属性を設定して、値を input の id と同じにします。
投稿2020/06/25 08:40
総合スコア36106
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/25 08:48