横並びにもできる!Bootstrapで作るform(フォーム)の作り方

初心者向けにBootstrapで作るform(フォーム)の作り方について解説しています。フォームの要素を横並びにすることも可能です。CSSで細かく設定しなくてもデバイスに合ったサイズで対応することができるので、ぜひ参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

今回はBootstrapで作るform(フォーム)の作り方を紹介します。

初心者の方でもすぐに作成できるフォームなので、ぜひ参考にしてみてください。CSSで細かく設定しなくてもデバイスに合ったサイズで対応することができます。

 

本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。

 

20163020-2

 

今回はBootstrapでフォームを設置してみるよ。

 

20160620

 

田島メンター!!Bootstrapのフォームはどのような種類があるんですか〜?

 

20163020-2

 

テキストを入力するエリアやチェックボックス・ラジオボタン・セレクトなど一通りのタイプに対応しているんだ。

 

20160620

 

なるほど、必要なものは揃っているって感じですね。よろしくお願いします!

 

目次

 

フォームの作り方

Bootstrapではよく見るフォーム画面を簡単に作成できます。

コーディングはいたって簡単です。

<form></form>タグでフォームにするところを囲います。そして、フォームの要素、一つ一つに「class=”form-group”」を設定します。

(<div>などのタグで「class=”form-group”」を設定したい範囲を囲いましょう。)

<input>タグに「class=”form-control”」を設定すれば完成です。

 

20163020-2

 

Bootstrapでフォームを作成する基本の手順だね。

 

20160620

 

フォームにする部分全体を<form></form>で囲む、要素それぞれに「class=”form-group”」を設定、<input>タグに「class=”form-control”」を設定ですね。

 

20163020-2

 

次は実際にフォームを設置してみよう。今回はメールアドレス・パスワード・ファイルの読み込み・チェックボックスを入れてみるよ。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

実際に書いてみよう

実際に書いてみましょう。以下のHTMLを書いてWebブラウザでみてください。

Bootstrapはダウンロードしているならパスを設定してください。sampleはダウンロードしてなくても動くようにCDNを使っています。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>sample</title>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  </head>
  <body style="padding: 50px;">
    <form>
      <div class="form-group">
        <label for="email">メールアドレス</label>
        <input type="email" class="form-control" id="email" placeholder="メールアドレス">
      </div>
      <div class="form-group">
        <label for="pass">パスワード</label>
        <input type="password" class="form-control" id="pass" placeholder="パスワード">
      </div>
      <div class="form-group">
        <label for="file">ファイル読み込み</label>
        <input type="file" id="file">
        <p class="help-block">ヘルプ文書も表示できます。</p>
      </div>
      <div class="check">
        <label>
          <input type="checkbox"> チェックを入れてください。
        </label>
      </div>
      <button type="submit" class="btn btn-default">送信</button>
    </form>
  </body>
</html>

ヘルプ用の文章なんかも表示できます。

またファイルの読み込みについても実装は簡単です。「placeholder=””」は入力欄に薄く表示されている文字を示します。
試しにいろいろ変えてみるといいかもしれません。

加えて、オプションとしてインラインでフォームを作ることもできます。

<form>タグに「class=”form-inline”」を付けてみましょう。

簡単にフォーム画面をおしゃれにかつ自由に実装できましたね。

送信ボタンのデザインなども実は自由に変更できます。BootstrapはシンプルにおしゃれなHPの実装を手伝ってくれます。

ぜひサイト作成する上で役立ててみてください。

 

20163020-2

 

最後に、インラインでフォームを設置する方法を紹介したよ。

 

20160620

 

こうすれば横並びに配置することもできるんですね。

 

20163020-2

 

送信に使うボタンもBootstrapによってスタイルを設定することが可能なんだ。うまく組み合わせて使っていこう。

 

20160620

 

分かりました。ありがとうございます!

 

 

[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。