横並びにもできる！Bootstrapで作るform(フォーム)の作り方
初心者向けにBootstrapで作るform(フォーム)の作り方について解説しています。フォームの要素を横並びにすることも可能です。CSSで細かく設定しなくてもデバイスに合ったサイズで対応することができるので、ぜひ参考にしてみてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はBootstrapで作るform(フォーム)の作り方を紹介します。
初心者の方でもすぐに作成できるフォームなので、ぜひ参考にしてみてください。CSSで細かく設定しなくてもデバイスに合ったサイズで対応することができます。
本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。
今回はBootstrapでフォームを設置してみるよ。
田島メンター！！Bootstrapのフォームはどのような種類があるんですか〜？
テキストを入力するエリアやチェックボックス・ラジオボタン・セレクトなど一通りのタイプに対応しているんだ。
なるほど、必要なものは揃っているって感じですね。よろしくお願いします！
目次
フォームの作り方
Bootstrapではよく見るフォーム画面を簡単に作成できます。
コーディングはいたって簡単です。
<form></form>タグでフォームにするところを囲います。そして、フォームの要素、一つ一つに「class=”form-group”」を設定します。
(<div>などのタグで「class=”form-group”」を設定したい範囲を囲いましょう。)
<input>タグに「class=”form-control”」を設定すれば完成です。
Bootstrapでフォームを作成する基本の手順だね。
フォームにする部分全体を<form></form>で囲む、要素それぞれに「class=”form-group”」を設定、<input>タグに「class=”form-control”」を設定ですね。
次は実際にフォームを設置してみよう。今回はメールアドレス・パスワード・ファイルの読み込み・チェックボックスを入れてみるよ。
実際に書いてみよう
実際に書いてみましょう。以下の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の実装を手伝ってくれます。
ぜひサイト作成する上で役立ててみてください。
最後に、インラインでフォームを設置する方法を紹介したよ。
こうすれば横並びに配置することもできるんですね。
送信に使うボタンもBootstrapによってスタイルを設定することが可能なんだ。うまく組み合わせて使っていこう。
分かりました。ありがとうございます！
[お知らせ]TechAcademyではオンライン完結のBootstrap講座を開催しています。わからないことをチャットで質問すると、現役のWebデザイナーが毎日すぐに回答します。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
