技術メモ

Laravelの水平フォームの作り方(Bootstrap4使用)

こんにちは!

 

今日もLaravel開発してます🍀

 

秋晴れで気持ちいいですね。まぁ、外に出る事はないんですが(笑)

 

さて、今日はLaravelでフォームを作る事はよくありますが、

 

Bootstrapを使用した上で水平フォームを作っていきたいと思います^^

 

ちな、基本のフォームはこんな感じです。

 

idを付ける(水平にしたいもの同士をドッキング!)

 

結論から言うと、ドッキングしたいもの同士をidで繋ぎます。

 

ソースコードを見ていただいて、

 

labelにはfor="ID名"の形をlaravel形式で書いてます。

 

textの方にはid="ID名"の形をlaravel形式で書いてます。

 

それらをform-groupで囲むことで水平になります。

 

ただ、widthの基本設定は横幅いっぱいになので、双方にclass="サイズ"をBootstrapの書き方で書くことで、

 

双方のサイズ感で見映えを整えてくれます。

 

<div class="form-group row">
   {!! Form::label('title', 'タイトル', ['for' => 'staticTitle', 'class' => 'col-sm-2 col-form-label']) !!}
   <div class="col-sm-6">
      {!! Form::text('title', old('title'), ['class' => 'form-control', 'id' => 'staticTitle']) !!}
   </div>
</div>

 

そうすると、こうですね。タイトルの部分が水平フォームになりました。

 

評価ボタンをだいぶ大きすぎますよね💦(笑)

 

これも、水平フォームにしちゃいます。

 

<div class="form-group row">
   {!! Form::label('value', '評価:', ['for' => 'staticValue', 'class' => 'col-sm-2 col-form-lable']) !!}
    <div class="col-sm-3">
      {!! Form::select('value', ['Great', 'Good', 'so so ...'], old('value'), ['class' => 'form-control', 'id' => 'staticValue']) !!}
    </div>
</div>

 

これはプルダウンメニューのフォーム(?セレクトボックス?)です。

 

これも同じ要領でidをつけます。

 

前提の話になりますが、rowを入れるのは、

 

そのあとにgrid(グリッド)でアイテムの幅を指定するためには書かないといけないセオリーです。

 

rowと書くことで、col-sm-2などが正常に機能してサイズ感をイイ感じにしてくれます。

 

では、これでブラウザ確認。

 

 

こうですね。ワイヤーフレームで作成した通りのデザインに出来ました^^

 

まだ上のナビタブとの連携させてないので、あれですが、良い感じです。

 

まとめ

機能重視、システムが正常に動くことが一番大事ですが、

 

デザインも、やっぱりある程度はイイ感じにしたいですよね。

 

自分で設計したデザイン通りのものができると、

 

ゴールに近づけていると思えてモチベにも繋がります。

 

でも、システムがちゃんと動くことがまず第一だし、

 

こだわりすぎて時間がかかりすぎのはいけないですけどね。

 

楽しみつつ、時間も意識してパフォーマンスを上げていきたいと思います。

ももの公式メールマガジン

プログラミングに興味がある人やプログラミング学習を始めた人のために、

とっても大切なマインドについて公開しています。

 

私が思うに、マインドが整っていれば、どんな手段から学べます。

 

無料で学習しても、プログラミングスクールで学習したとしても自分の力にしていけます。

 

でもマインドが整っていないと、せっかくプログラミングスクールにお金を払っても、うまくいかなくて泣く思いをしてしまいます。

 

そんな風になってほしくないから、メルマガを始めました。

 

詳細はこちらのページを覗いてみて下さい^^

COMMING SOON...

-技術メモ

Copyright© とある新人SEは、走らない。 , 2021 All Rights Reserved Powered by AFFINGER5.