プロデミア

Bootstrap_フォームコントロール

05フォームコントロール

Webアプリケーションやウェブサイトにおいて、ユーザーからの入力を受け取るためのフォームは不可欠な要素です。
フォームを通じて、ユーザーは検索クエリを送信したり、登録情報を入力したりすることができます。Bootstrapは、多くのお問い合わせフォームを作成する上での便利機能やコンポーネントを提供してくれています。

具体的には、テキストボックス、セレクトメニュー、ラジオボタン、チェックボックスなど、さまざまなinputタイプなどがあります。

Bootstrapのフォームコントロールを利用することで、これらの要素を簡単にスタイリングし、一貫性のある画面デザインを作成することができるのでこれから学んでいきましょう。

サイズ

まずはサイズ調整です。

クラス名を追記するだけで簡単に高さを変更することができます。

では実際に見ていきましょう。

【サンプルコード】

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">いろんなサイズのテキストボックス</label>
    <input type="email" class="form-control form-control-lg" id="exampleFormControlInput1"
           placeholder="name@example.com">
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
    <input type="email" class="form-control form-control-sm" id="exampleFormControlInput1"
           placeholder="name@example.com">
</div>

サンプルコードをコピペして画面を読み込んでみましょう。

いろんなサイズのテキストボックスが表示されました。

「form-control-lg」「form-control-sm」のクラスをinputタグのクラス名に付与することでフォームのサイズを変えることができます。

フォームテキスト

Bootstrapにおけるフォームテキストは、フォームの説明や補足をするときに用いられることが多いです。

例えば、パスワード入力欄に「パスワードは大文字、小文字、数字を組み合わせた～」のような注釈を一度は見たことがあるのではないでしょうか。

Bootstrapは「form-text」というクラスを付与するだけで簡単に注釈を追加することができます。

【サンプルコード】

<label for="inputPassword5" class="form-label">パスワード</label>
<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
    大文字、小文字、数字、記号を組み合わせた8文字以上のパスワードを使用してください。
</div>

サンプルコードをコピペして画面を読み込んでみましょう。

簡単に注釈が追加できました。

読み取り専用の項目

読み取り専用（Read-Only）属性は、フォームフィールドや入力要素において、ユーザーが表示されている値を見ることはできるが、その値を変更することはできないようにするために使用されます。

読み取り専用は、フォームで特定の情報をユーザーに提示する際に重宝します。

例えば、ユーザーが過去に入力した情報を確認する場合や、変更不可の値を表示する場合などに有効です。

Bootstrapでは、inputタグやtextareaタグに「readonly」属性を付与することで設定できます。

【サンプルコード】

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" value="sample@example.com" readonly>
</div>
<div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">問い合わせ内容</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" readonly>読み取り専用</textarea>
</div>

サンプルコードをコピペして画面を読み込んでみましょう。

見た目は今までとは変わりませんが、テキストエリアやテキストボックスをクリックしたりすると違いを感じられるはずです。

クリックしても、カーソルが入力エリアにあたることはなく、入力不可能になっているはずです。

ここで「disabled」属性との違いを解説します。

特性readonlydisabled
定義ユーザーがフィールドの値を見ることはできるが、変更はできない。ユーザーがフィールドの値を見ることも、変更することもできない。
見た目通常のフォームと変わりなし。フォームが薄い灰色でおおわれる。
フォーム送信内容を送信できる内容を送信できない

試しに先ほどのサンプルコードのreadonlyを１つdisabledに変更してみましょう。

以下のコードに変更

<div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">メールアドレス</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" value="sample@example.com" readonly>
</div>
<div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">問い合わせ内容</label>
    　<!-- 以下タグの「readonly」を「disabled」に変更 -->
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" disabled>読み取り専用</textarea>
</div>

サンプルコードをコピペして画面を読み込んでみましょう。

見た目も変わりましたね。

「disabled」はフォーム背景が薄い灰色になりました。

ユーザーが視覚的に入力ができないことがわかるUIになっています。

適切に使い分けられるようにしましょう。

ファイル

ファイル入力は、ユーザーがPCや携帯電話にあるファイルをWebアプリケーションやWebサイトにアップロードするために用いられます。

wordファイルや運転免許証などをアップロードしたことがある方はイメージがつくと思います。

【サンプルコード】

<form>
    <div class="mb-3">
        <input class="form-control" type="file" id="formFile">
    </div>
    <input class="btn btn-primary" type="submit" value="送信">
</form>

サンプルコードをコピペして画面を読み込んでみましょう。

ファイルを選択ボタンをクリックすると、自分のPCや携帯電話に入っているファイルを選択できるようになります。

送信ボタンをクリックしてもファイルは送信されませんが、「form-control」のクラス名を設定することで簡単にファイルをアップロードするためのフォームを作成することができます。

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です