投稿フォーム　項目一覧（随時追加）

#投稿フォーム項目
投稿フォームに必要な項目や要素は数多くあります。頭には形が浮かんでいても、やり方調べるのに苦労したり、書いてみたら全然ちゃうやんということが多くあったので、まとめます。
                 
#f.label
フォームと項目名を関連づけるのに使われます。関連づくと何が起こるか。。。。
例えば、ラジオボタンやチェックボックスにチェック入れるとき、文字を押してもチェックが入るようにするといった感じです。例えば、下の画像です。
![スクリーンショット 2018-02-24 12.12.34.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/9713ea0d-1811-9744-c1c8-027c11da1a02.gif)

この画像はlabelタグを利用して、フォーム（この場合はラジオボタン）と項目名（この場合は包み１、包み２）
この写真では、包み１、包み２の文字の部分をクリックしてもラジオボタンにチェックが入るようになっています。

```example.html.erb
#単に項目名をつけたい場合
<%= f.label :包み１%>

#フォームとの関連づけ
　　<%= f.radio_button :title, 1%>
 <%= f.label :title, "包み", value:1%>
 <%= f.radio_button :title, 2%>
 <%= f.label :title, "包み2", value:2%>
#titleはカラム名
```
radio_buttonにおいてはtitleというカラム名の後の数字に注目です。
この数字とlabelタグの中にあるvalueの数字が同じであれば関連づけがなされます。
                   
#f.text_field 
文字の入力をできるようにする。名前とかタイトルとかを入れる
![スクリーンショット 2018-02-22 0.09.49.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/948b6fcb-6f58-3063-548d-9119c043ea34.gif)
その中でもいいなと思ったオプションピックアップ

##初期値を入れておく
```example.html.erb
<%= f.text_field :title, :value =>"ああああ"%>
#titleはカラム名
```
![スクリーンショット 2018-02-24 12.56.39.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/fba14537-4ef8-8799-9bfa-de4bd0040a2e.gif)

##最大文字可能数を設定
```example.html.erb
<%= f.text_field :title, :maxlength => 100, :placeholder => "最大１００文字"%>
#titleはカラム名
```
![スクリーンショット 2018-02-24 13.00.31.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/8addbee3-8bd0-4128-327f-277f2971ab8c.gif)
placeholderで最大１００文字って入れてあげたほうが親切かもです

##入力内容を変更不可能にする
```example.html.erb
<%= f.text_field :title, :readonly => true %>
#titleはカラム名
```
![スクリーンショット 2018-02-24 13.07.13.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/3b34ba2b-e9db-4163-3f39-7969c0db2478.gif)
何に使うんだと思われますが、この項目内容でいいですか？的な確認画面で使えるかなと思ってます。

                                       
#f.text_area 
文章を入れる際に使う。紹介文とか、説明文を入れる際に使う。
使えるオプションはtext_fieldと一緒。

```example.html.erb 
 商品の説明を入れてください<br>
<%= f.text_area :introduction, placeholder:"作品説明　最大４００文字"　%>
#introductionはカラム名
```
![スクリーンショット 2018-02-22 11.16.07.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/b1d68449-0331-fa78-8ad9-cf1ea7dffe11.gif)
                  
#f.file_field
画像ファイル等を投稿する際に入れます。

```example.html.erb
 <%= f.file_field :front_cover %>
#front_coverはカラム名
```
![スクリーンショット 2018-02-24 14.09.00.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/ef4eea98-21b9-14a2-b1c3-6295dfbbc74a.gif)


                     
#f.check_box 
複数チェックを入れる、条件がある場合に使う。例えば、好きな食べ物を選んでください（複数選択可）。
とかの時に使える。

```example.html.erb
バナナ<%= f.check_box :fruits,{},checked_value = 1, unchecked_value = 0  %>
りんご<%= f.check_box :fruits,{},checked_value = 2, unchecked_value =0 %>
かき<%= f.check_box :fruits,{},checked_value = 3, unchecked_value =0 %>
#frutisはカラム名
```
![スクリーンショット 2018-02-24 14.50.35.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/6f287856-eda9-9b17-f6ef-645faef8b140.gif)

もちろん、複数でなくても選択が２つの時（メルマガを受け取るか、受け取らないか）も使える。
 
```example.html.erb
メルマガを受けりますか？<%= f.check_box :mailmagazine,{},checked_value = "true", unchecked_value = "false" %>
#mailmagazineはカラム名
```     
![スクリーンショット 2018-02-24 14.58.43.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/faf708ad-5cce-f952-4105-c306a3b7f7dc.gif)

メルマガ送る人リストを作りたい時、  はmailmagazineがtrueであるものを抜き取るだけです。


#f.radio_button 
逆にこれは、複数選択肢があっても一つしか選べないようなものに使う。
例えば、出身地はどこですか？とかいったやつですね。

```example.html.erb
<%= f.radio_button :place, "横浜" %>横浜
<%= f.radio_button :place, "東京" %>東京
#placeはカラム名
```

![スクリーンショット 2018-02-22 22.13.23.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/a3ced583-f8bf-64ae-f40b-242d94509cea.gif)

上に書いたlabelと組み合わせれば、文字の部分をクリックしてもチェックが入るようになります。

        
#f.select 
これはプルダウン型の選択窓です。あまりにも選択肢が多い場合だと、ボタン形式にすると汚く見えてしまいます。
このようにプルダウンにすれば、スッキリ見やすい形になります。

```example.html.erb
<%= f.select(:target, [["一般向け",1],["男性向け",2],["女性向け",3]]) %>
#targetはカラム名
```

![スクリーンショット 2018-02-22 22.20.04.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/6750df54-8a9a-312c-8305-c72601be366c.gif)

![スクリーンショット 2018-02-22 22.19.55.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/1f687355-35a0-b4c9-6686-5cbe17b41d34.gif)
                   
#f.hidden_field
これは、画面上にはありませんが、投稿する際に飛ばしたい項目をあらかじめ決めておくためのものです。
例えば、写真を投稿するサービスがあったとします。誰がとった写真かも投稿されるようにしたいと考え、ログイン名と同じにしたいとします。そうなった時投稿画面でもう一度、自分のログイン名を打つのもおかしな話です。
そういう時にhiddenは使えます。

```example.html.erb 
<% f.hidden_field :author, value: current_user.username %>
#authorはカラム名
```
                   
#f.email_field  
emailを投稿するために用意されています。emailの一般的なフォームと合致しているか確認してくれて、
間違っていたら指摘してくれます。

```example.html.erb
<%= f.email_field :email%>
#emailはカラム名
```
![スクリーンショット 2018-02-24 16.13.56.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/aed48250-4ecd-8b1c-6c40-84f1f91cb1b1.gif)

                
#f.number_field 
数字以外を入れることができないフォームです。自動的にフォームの右にボタンが現れ、数値をいじることができます。

```example.html.erb
<%= f.number_field :number%>
#numberはカラム名
```
![スクリーンショット 2018-02-22 23.05.16.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/d13e32b5-753c-7b72-6223-682d094a0bd4.gif)

        
#f.submit
投稿や検索の場合のクリックするボタンです。
 
```example.html.erb
<%= f.submit "検索" %>
```
![スクリーンショット 2018-02-24 16.40.18.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/85061713-3309-9cb4-bb9d-9b2b020ff2d0.gif)