laravel form methodと投稿フォームを使用してDBに保存

#はじめに
投稿数２０達成しました!!
webアプリを作成中に投稿フォームが必要になりました。調べると色々とありますが初めての試みなので簡単な投稿フォームを作成したいと思います。また、これからも投稿フォームを作成する可能性がありますので備忘録として投稿します。基本的な事としてアウトプットさせて頂きます。


#投稿者の環境
MacBook Pro (13-inch, 2019, Two Thunderbolt 3 ports)
macOS Big Sur バージョン11.0.1
PHP 7.3.23
Laravel Framework 6.20.7

#注意
laravelインストール済とDB設計が完了した状態で作業を進めます。

#form methodを作成してみよう
今回のコードはこちらになります。下記よりコードに切り分けて解説します。

```sample.blade.php
<form method="POST" action="{{ route('samples.store')}}">
```

###form method="POST"
これはどのようにデータを送信するかを定義します。もっとも一般的なものは GET メソッドと POST メソッドです。
`GETメソッドはDBに保存された値を表示してくれます。`特にコントローラーのeditの時に使用します。
`POSTメソッドはDBに入力した値を保存します。`今回は入力した値を保存しますので`POST`を使います。

###actionの設定
こちらはどのルーティングに値を保存する場所を決めます。urlでも設定は可能ですが[nameメソッド](https://qiita.com/yutarou/items/19673e6cd12e7559cd36)を使用して保存場所を確定します。nameメソッドに関しては[こちらを参考](https://qiita.com/yutarou/items/19673e6cd12e7559cd36)

#投稿フォームを作成
入力するフォームを作成します。ここからHTMLとCSSが中心になります。
イメージとしてこのように作成します。
![“スクリーンショット” 2021-02-05 15.58.01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/520bf714-9023-7b3d-9fa1-40684bd44da6.jpeg)

###labelの作成
`タイトル`と書かれているところを作成します。
labelは`インライン要素`になります。ブロック要素とインライン要素の違いは[こちらを参考](https://reffect.co.jp/html/block_and_inline_understanding)
label沢山使う場合は`for`を使用して下さい。少し変わったやり方になります。以下を参考にして下さい。

```sample.blade.php
<label for="title-display">タイトル<label>

//labelのcss
label[for="title-display"] {
  display:block; //インライン要素を強制的にブロック要素に変換
  border: solid;
  border-color:yellow;
  font-size: 20px;
}
```

#inputの作成 
こちらも`インライン要素`になります。コードを部分的に分けて解説します。

```sample.blade.php
<input type="text" name="title" id="title-field" placeholder="タイトル入力" >

//css idの場合は#を使います。
#title-field {
  display:block;
  font-size: 20px;
}
```

###input type="text"
`input="type"`こちらはいくつか種類があります。今回は１行の文章を作成したいため"text"を使います。他の種類に関しては下記のスクショを参考にして下さい。![“スクリーンショット” 2021-02-05 16.35.42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/2256db2f-bc06-c459-740a-45c6155b4864.jpeg)

###name="title"
こちらの"title"ですがDBのカラム名と同じに設定して下さい。投稿フォームに何を保存するかを決めてからカラム名を決定して下さい。
![“スクリーンショット” 2021-02-05 21.25.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/f5d5981e-5860-44ff-8736-cbf344271bcd.jpeg)


###inputのcss
こちらも`インライン要素`になります。cssで調整する場合は`id`を使用して下さい。余談ですがinputに使用するnameとidは必ず同じにしないといけないのか?という疑問があったので[こちらの記事を参考](https://www.web-officer.com/html-css/in-the-input-type-tag-do-i-have-to-make-id-and-name-attributes-the-same-name.html)にして納得ができました。`結論から申し上げると、全くもって同じにする必要はありません。`

#textareaの作成
2行以上のフォームを作成するには`textarea`を使用します。
こちらも`インライン要素`になります。また、`resize:none;`を使用することによりユーザー側で投稿フォームのサイズを変更できないようにできます。これを使用する際は `rowsとcolsを必ず指定`して下さい。

```                  
<textarea name="text" rows="2" cols="50" placeholder="70文字まで投稿"></textarea>

//css
textarea {
  width:50%;
  font-size: 20px;
  resize: none; //ユーザーが投稿フォームのサイズ調整をしないようにする
}
```

# aタグで他のページに遷移
`aタグにはclassではなくidをつけよう`
さまざまな環境でaタグにはデフォルトでCSSがついていることが多く、ある特定の箇所にのみ違う装飾を施したい時にclassをつけても反映されないことがあります。[こちらの記事を参考](https://tec-obs.com/web/how-to-html-a-tag-css)にして下さい。

```sample.blade.php
<a  href="{{ route('sample.list') }}" id="back-btn">一覧に戻る</a>
//css
#back-btn {
  text-decoration: none;
}
```

#buttonを使用して送信とリセット
inputにも`submit`と`reset`はありますがbuttonにもあります。こちらも下記のコードで設定ができます。

```
<button type="submit" value="投稿する">投稿する</button>
<button type="reset" value="リセット">リセット</button>
```

#最後に
投稿フォームのカラムが増えると色々と複雑化する可能性があります。投稿内容を増やしたい場合はまたアウトプットとして投稿したいと思います。