【bootstrap3】 フォーム（form）に関するまとめ

たくろう

※2019/07/22 追記

formの書き方・作成方法

<form> </form>

フォームを作成するときは上記のように

formのタグを使って、開始タグと終了タグの間に

各パーツ（テキスト、ボタン、チェックボックス）などを

設置するようにして書く必要がある。


formに設定する属性の種類

属性とはタグの後ろにスペースを記入して入力する文字列のこと。

（例）<form class="form-inline">

上記の場合は【class】が属性

【form-inline】が属性値（属性がクラスの場合はクラス名ともいう）


●class

formのclassに設定できる属性値（クラス名）は

【form-inline】と【form-horizontal 】の２つ。


・form-inline

<form class="form-inline">

横並びのレイアウトにできる。

メールアドレス【　　　】　パスワード【　　　】

こんな感じ。


・form-horizontal

<form class="form-horizontal">

水平表示のレイアウトにできる。

メールアドレス【　　　】

パスワード【　　　】

こんな感じ。


●action

<form action="CGIプログラムのURI">

action属性は必ず指定する必要がある。

フォームの送信ボタンを押して送信されるデータの送信先を指定する。

データの送信先のことをURIという。

指定するのはデータを受け渡す処理をしてくれるサーバーのCGIプログラムのURI。


●method

<form action="CGIプログラムのURI" method="getまたはpost">


・属性値がgetの場合

入力したフォームの内容のデータがURLに含まれて送信される。

（例）

http://www.hogehoge.com/cgi.ruby?name=pippi&old=21&address=osaka

上記のようにフォームで入力した内容がURLの末尾に含まれて送信される。


・属性値がpostの場合

入力したフォーム内容はURIとは別の場所に保管されて送信される。

入力したフォーム内容のデータは外側からの表示では見ることができない。

そのため安全性を考えるとpostがオススメ！


・getとpostの違い

getには送信するデータ量の制限がある

getは送信したデータ内容が送信先のサーバーにログとして残ってしまうことがある

postには送信するデータ量の制限がない

一概には言えないがgetはサーバー側にあるデータの取得に適している

一概には言えないがpostはユーザー側が情報を送信するのに適している


フォームに設置するパーツのグループ化について

<form action="CGIプログラムのURI" method="getまたはpost">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name">
    </div>
</form>

フォームに設置するパーツ（input、select、textareaなど）を

【form-group】で囲むことで自動的に最適な間隔で表示されるようになる。

<form action="CGIプログラムのURI" method="getまたはpost">

    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name">
    </div>

    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name">
    </div>

    <button type="submit" class="btn btn-default">送信</button>

</form>

上記のように各パーツごとに【form-group】で囲む必要があるので注意！

ただし「チェックボックス」や「ボタン」などは囲みは不要。

入力、選択が必要なパーツだけ囲む必要があると覚えておけばOK！


また【form-group】でクラス名を指定した場合は

クラス名に【row】を指定する必要はないので要注意！！

※【form-group】を指定することで自動的に【row】の機能が付与されるため。


フォームに関係する基本的なタグの書き方

●input、select、textareaタグ

上記のタグはクラス名を指定しない場合は

標準スタイルが適応されるが【form-control】を指定することで

bootstrap3のスタイルを適応することができる。

<form action="CGIプログラムのURI" method="getまたはpost">
 
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="Name">
    </div>

    <div class="form-group">
        <label>好きな果物を選んでください</label>
        <select class="form-control">
            <option>りんご</option>
            <option>みかん</option>
            <option>ぶどう</option>
        </select>
    </div>

    <div class="form-group">
        <label>ご質問内容を入力してください</label>
        <textarea class="form-control" rows="3">
        </textarea>
    </div>

</form>

inputのタイプの属性値は下記URLを参考にする。


参考記事まとめ

https://tetra-themes.com/bootstrap3-form-197/

デモページがあり自分でコードを触りながら確認することができ、非常に役立ちました。

細かい部分が記載されていて助かりました。

１つ１つの項目が丁寧に解説されていて助かりました。

いいなと思ったら応援しよう！