フォームとGUIコンポーネント (1/6)
作成:2017-02-25 11:06
更新:2017-02-25 11:06
更新:2017-02-25 11:06
■フォーム関係の基本クラス
ユーザからの入力を行うためのものといえば、基本は「フォーム」でしょう。フォームは、HTMLにある<form>タグと、各種のコントロール類のタグを組み合わせて作成します。
フォームのタグそのものは、Bootstrap利用であっても基本的には変わりません。フォームはHTMLのタグとして用意されていますから、指定のHTMLタグを使って記述しないとフォームとして機能しませんから。
ただし、表示は独自のものを使うことができます。これはいくつかのスタイルを使って設定します。基本的な書き方を以下に整理しておきましょう。
class="form-group"について
フォームのコントロール類は、１つ１つがclass="form-group"を設定された<div>タグでまとめられています。これにより、Bootstrapはそれぞれをグループとしてレイアウトします。
例えば、<label>と<input>がその中にあれば、ラベルの下に入力項目を並べる形でレイアウトされるわけです。この入力項目のグループ化を行うのが、class="form-group"というクラス設定なのです。
class="form-control"について
入力を行うコントロール類には、class="form-control"というクラス設定を用意します。これにより、Bootstrap独自のスタイルでコントロールが表示されるようになります。
ただし、これを指定するのは、「テキスト入力関係のコントロール」と「選択リスト（<select>）」のみです。テキスト関係というのは、<input type="text">や、<input type="password">、それに<textarea>といったものですね。その他（チェックボックスとラジオボタン）については別途クラスが用意されています。
では、簡単な利用例を下に挙げておきましょう。下に、入力フィールド・パスワードフィールド・テキストエリアといったものを表示するフォームのサンプルを掲載しておきます。<input>と<textare>、<select>といったコントロール関係のタグに、それぞれ<div class="form-group">タグで囲われ、更にclass="form-control"を設定されていることがわかるでしょう。
フォームのタグそのものは、Bootstrap利用であっても基本的には変わりません。フォームはHTMLのタグとして用意されていますから、指定のHTMLタグを使って記述しないとフォームとして機能しませんから。
ただし、表示は独自のものを使うことができます。これはいくつかのスタイルを使って設定します。基本的な書き方を以下に整理しておきましょう。
<form>
<div class="form-group">
<label for="○○">ラベル</label>
<input type="text" class="form-control">
</div>
……必要なだけタグを用意……
</form>
class="form-group"について
フォームのコントロール類は、１つ１つがclass="form-group"を設定された<div>タグでまとめられています。これにより、Bootstrapはそれぞれをグループとしてレイアウトします。
例えば、<label>と<input>がその中にあれば、ラベルの下に入力項目を並べる形でレイアウトされるわけです。この入力項目のグループ化を行うのが、class="form-group"というクラス設定なのです。
class="form-control"について
入力を行うコントロール類には、class="form-control"というクラス設定を用意します。これにより、Bootstrap独自のスタイルでコントロールが表示されるようになります。
ただし、これを指定するのは、「テキスト入力関係のコントロール」と「選択リスト（<select>）」のみです。テキスト関係というのは、<input type="text">や、<input type="password">、それに<textarea>といったものですね。その他（チェックボックスとラジオボタン）については別途クラスが用意されています。
では、簡単な利用例を下に挙げておきましょう。下に、入力フィールド・パスワードフィールド・テキストエリアといったものを表示するフォームのサンプルを掲載しておきます。<input>と<textare>、<select>といったコントロール関係のタグに、それぞれ<div class="form-group">タグで囲われ、更にclass="form-control"を設定されていることがわかるでしょう。
(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"> <label for="txt1">Text:</label> <input type="text" class="form-control" id="txt1"> </div> <div class="form-group"> <label for="pw1">Password:</label> <input type="password" class="form-control" id="pw1"> </div> <div class="form-group"> <label for="ta1">Text Area:</label> <textarea class="form-control" id="ta1" rows="3"></textarea> </div> <div class="form-group"> <label for="sl1">Password:</label> <select class="form-control" id="sl1"> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> <div class="form-group"> <input type="button" class="btn" value="Click"> </div> </form> </div> </div> </div> </body> </html>
※関連コンテンツ