【bootstrap3】 フォーム(form)に関するまとめ
※2019/07/22 追記
formの書き方・作成方法
<form> </form>
フォームを作成するときは上記のように
formのタグを使って、開始タグと終了タグの間に
各パーツ(テキスト、ボタン、チェックボックス)などを
設置するようにして書く必要がある。
formに設定する属性の種類
属性とはタグの後ろにスペースを記入して入力する文字列のこと。
(例)<form class="form-inline">
上記の場合は【class】が属性
【form-inline】が属性値(属性がクラスの場合はクラス名ともいう)
●class
formのclassに設定できる属性値(クラス名)は
【form-inline】と【form-horizontal 】の2つ。
・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/
デモページがあり自分でコードを触りながら確認することができ、非常に役立ちました。
細かい部分が記載されていて助かりました。
1つ1つの項目が丁寧に解説されていて助かりました。
この記事が気に入ったらサポートをしてみませんか?