入力フォームの仕様変更

前回でフォームを中央に移動させたところで、 今回は入力させたい形式なんかをいじりたいところ。

前にbootstrapを導入しているのでこれを使ったら わりかし簡単にいくらしい。

ってことでソースを見つけてくるスクリーンショット 2017-08-02 14.38.50.png

bootstrap formでググると一番上に出てきた。

そして少し下に行くと、レイアウトとソースコードが出た。

スクリーンショット 2017-08-02 14.46.47.png

んー。。アカウントに複数の属性をつけることを最終的に考えてるから マルチプルのフォームを拝借しようか。 多分、ここでは単一選択でも登録はできるだろうし・・。

とりあえず、他の入力フォームは今のところ必要なさそうな感じ。

直下にあるソースをコピペして、いるところといらないところを吟味。

<form>
Email address We'll never share your email with anyone else.
Password
Example multiple select 1 2 3 4 5
Check me out
<button type="submit" class="btn btn-primary">Submit</button> </form>

ここら辺かな? でも、このままだと何かしらエラー起こりそう。。

とりあえず今のコードと照らし合わせて、 使えそうなところを持ってくるか。

えーっと、繰り返し書かれてる「form-control」ってのがくさそうだな。

これをemail_fieldの後ろに持ってきたらいいのか。。 でもどうやって持ってくる・・?

 

(眠気と戦いながら二時間ほどググる・・🐥)

 

やっとわかった・・。

:class => 'form-control'

どうやらこの形だとエラーも出さずにクラスをゴリ押しできるのか。

どうせならフォームの中にグレーで何を入力させたいかも表示できたらいいんだが・・ ・・って思っ切りそのやり方ソースに書いとるやないか。

ほほう、placeholderの形式ならいけるのか。

じゃあ、これも同じように

:placeholder => 'メールアドレスを入力してください'

こんな感じにしてみよう。


'form-control',:placeholder => 'メールアドレスを入力してください', autofocus: true %>

全体をつなげてみたら、こんな感じのコードになった。

これでちゃんと表示してくれるかなぁ・・。(オドオド) いざ、尋常に確認!

スクリーンショット 2017-08-02 15.18.09.png

っしゃぁぁぁぁぁ!! でけとる!でけとるぞぉぉぉ!

このままの調子でパスワードのとこも一気にやってしまおう。

( characters minimum)
'form-control',:placeholder => 'パスワードを入力してください', autocomplete: "off" %>

'form-control',:placeholder => '確認のため、同じパスワードを入力してください', autocomplete: "off" %>

これでどやさ!

スクリーンショット 2017-08-02 15.23.37.png

よしよしよしよし! ええ感じにでけとるのう!

よし、ついでに英語の表記も日本語に変えたれ!

んー・・多分labelのところを変えたら何とかなるんじゃね?←安直な考え

スクリーンショット 2017-08-02 15.36.18.png

あながちうまいこといってるけどパスワードのとこの(6)が何ともなぁ。。 これはたしかdeviseで自動生成されてた部分だったよなぁ。

ってことはdeviseとminimum_passwordでググったら解決できるんかな。

 

・・・。

 

あ、今気づいたけど今回なかなかなボリュームになってきたな・・←おっそ

よし、次回にしよう。

 

すぐ続きやる!

ではー。

この記事をシェアする