libro
www.tuyano.com
初心者のためのBootstrap入門

フォームとGUIコンポーネント (1/6)

作成:2017-02-25 11:06
更新:2017-02-25 11:06

■フォーム関係の基本クラス

ユーザからの入力を行うためのものといえば、基本は「フォーム」でしょう。フォームは、HTMLにある<form>タグと、各種のコントロール類のタグを組み合わせて作成します。

フォームのタグそのものは、Bootstrap利用であっても基本的には変わりません。フォームはHTMLのタグとして用意されていますから、指定のHTMLタグを使って記述しないとフォームとして機能しませんから。

ただし、表示は独自のものを使うことができます。これはいくつかのスタイルを使って設定します。基本的な書き方を以下に整理しておきましょう。
<form>
    <div class="form-group">
        <label for="○○">ラベル</label>
        <input type="text" class="form-control">
    </div>

    ……必要なだけタグを用意……

</form>

class="form-group"について
フォームのコントロール類は、1つ1つが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"を設定されていることがわかるでしょう。

※プログラムリストが表示されない場合

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>


※関連コンテンツ

「初心者のためのBootstrap入門」に戻る