back
フォームとGUIコンポーネント (4/6)
■インプット・グループの利用
入力項目というのは、「フィールドが1つあるだけ」ということはあまりありません。たいていは、その項目名のラベルなどが合わせて表示されることになります。
特に、インライン・フォームなどで１行に項目を表示させる場合など、ラベルとフィールドが一体になって表示されてほしいことがあります。こうした「テキストなどと入力項目をグループ化して表示したい」というときに用いられるのが、Bootstrapの「インプット・グループ」と呼ばれるものです。
これは、テキストなどを１つのグループにまとめて表示するもので、以下のようにして入力項目を記述します。
入力項目を囲む<div>タグに、class="input-group"という形でタグを用意します。これにより、その中に記述したものを１つにまとめることができるようになります。
この<div>タグ内には、<input>の他に、テキストを表示するための<span>タグも用意できます。これは、以下のようにクラスを記述する必要があります。
class="input-group-addon"を指定することで、インライン・グループの要素の一つとしてテキストが表示されるようになります。
では、これも簡単な利用例を挙げておきましょう。下のリスト欄には、２つのインプット・グループを表示するサンプルを掲載してあります。
この例では、例えば以下のような形でインプット・グループが作成されています。ここでは、 class="form-group input-group"というように、フォーム・グループとインプット・グループの両方のクラスを指定してあります。
ここでは、２つの<span>と２つの<input>を１つのグループにまとめています。実際の表示を見るとわかりますが、この４つの要素が１つのグループとなり、横一列に一体化して表示されます。
インプット・グループは、１行にまとめて表示したい項目（インライン・フォームのようなもの）の作成に特に威力を発揮します。また、このインライン・フォームは<form>内に限ったものではなく、<form>を使わなくとも利用することができます。
特に、インライン・フォームなどで１行に項目を表示させる場合など、ラベルとフィールドが一体になって表示されてほしいことがあります。こうした「テキストなどと入力項目をグループ化して表示したい」というときに用いられるのが、Bootstrapの「インプット・グループ」と呼ばれるものです。
これは、テキストなどを１つのグループにまとめて表示するもので、以下のようにして入力項目を記述します。
<div class="input-group">
<input type="text" class="form-control">
……グループにまとめる項目を記述……
</div>
入力項目を囲む<div>タグに、class="input-group"という形でタグを用意します。これにより、その中に記述したものを１つにまとめることができるようになります。
この<div>タグ内には、<input>の他に、テキストを表示するための<span>タグも用意できます。これは、以下のようにクラスを記述する必要があります。
<span class="input-group-addon">テキスト</span>class="input-group-addon"を指定することで、インライン・グループの要素の一つとしてテキストが表示されるようになります。
では、これも簡単な利用例を挙げておきましょう。下のリスト欄には、２つのインプット・グループを表示するサンプルを掲載してあります。
この例では、例えば以下のような形でインプット・グループが作成されています。ここでは、 class="form-group input-group"というように、フォーム・グループとインプット・グループの両方のクラスを指定してあります。
<div class="form-group input-group">
<span class="input-group-addon">Name</span>
<input type="text" class="form-control">
<span class="input-group-addon">Password</span>
<input type="password" class="form-control">
</div>
ここでは、２つの<span>と２つの<input>を１つのグループにまとめています。実際の表示を見るとわかりますが、この４つの要素が１つのグループとなり、横一列に一体化して表示されます。
インプット・グループは、１行にまとめて表示したい項目（インライン・フォームのようなもの）の作成に特に威力を発揮します。また、このインライン・フォームは<form>内に限ったものではなく、<form>を使わなくとも利用することができます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >form</h2> </div> <form> <div class="form-group input-group"> <span class="input-group-addon">Name</span> <input type="text" class="form-control"> <span class="input-group-addon">Password</span> <input type="password" class="form-control"> </div> <div class="form-group input-group"> <span class="input-group-addon">GMail Address</span> <input type="text" class="form-control"> <span class="input-group-addon">@gmail.com</span> </div> <div class="form-group"> <input type="button" class="btn" value="Click"> </div> </form> </div> </div> </div> </body> </html>
| << 前へ | 次へ >> |