【HTML】入力フォームの作成方法をわかりやすく解説(デザインサンプル有)
  • facebookページ
  • twitterページ
  • 2020.06.30

    【HTML】入力フォームの作成方法をわかりやすく解説(デザインサンプル有)

    HTMLの入力フォームとは?

    入力フォームとは、ユーザーがWebサイトからデータを入力・送信する際に用いるGUI(グラフィカルユーザインターフェース)のHTML要素のことです。

    通常はformタグ(要素)の中に設置する形で入力フォームを用意します。

    入力フォームの種類

    HTMLの入力フォームにはさまざまな種類があることをご存知でしょうか。

    例えば、次のようなものがあります。

    入力フォーム7種類
    • テキストフィールド:1行のテキストを入力可能
    • テキストエリア:複数行のテキストを入力可能
    • チェックボックス:1つまたは複数の項目を選択可能
    • ラジオボタン:複数の項目から1つを選択可能
    • プルダウン:複数の項目から1つを選択可能
    • 送信ボタン:入力内容を送信可能
    • ボタン:入力内容を送信可能

    実際にこれらの要素を作成する方法は「input要素の書き方」で説明します。

    form要素の書き方

    入力フォームに入力したデータを送信するにはform要素が必要です。

    form要素では「データの送信先」と「送信方法」を指定します。

    ■form要素の基本的な書き方

    form要素にはaction属性、method属性などを設定することが多いです。

    それぞれ次のような特徴があります。

    • action属性:フォームに入力したデータを送信先 (URLやフォルダなど) を指定します
    • method属性:データの送信方法(HTTPメソッド)を指定します

    method属性に指定できる値には「get」と「post」の2種類があり、それぞれ次のような違いがあります。

    • get:action属性の指定先URLの末尾に「?」+「入力されたデータ」を不可して送信します。method属性を省略した場合、getが初期値として選択されます。
    • post:フォームに入力したデータを、本文としてサーバープログラムへ送信します。HTMLのフォームではpostを利用することが多いです。

    input要素の書き方

    form要素の中には、データを入力・送信するためのinput要素が必須です。

    入力フォームの種類」で紹介した入力フォームの作成方法を見ていきましょう。

    テキストフィールド

    1行のテキストフィールドは、input要素のtype属性を「text」にすることで作成可能です。

    text以外にも「password」で入力した文字を見えないように*で表示させたり、「number」で数字のみ入力させる入力フォームも作成できます。

    また、通常input要素を使う場合は、入力フォームを特定するためにname属性を指定します。

    name属性の値はプログラムに渡すものなため、わかりやすい名前をつけるとよいですね。

    テキストフィールド

    テキストエリア

    複数行の入力ができるテキストエリアは、input要素ではなく「textarea要素」です。

    input要素と合わせて頻繁に使うものなので、ここで紹介してしまいました。

    cols属性はテキストフィールドの横幅を指定でき、上記でいうと30文字分です。

    rows属性はテキストフィールドの高さを指定でき、上記は5行分の高さになります。

    テキストエリア

    チェックボックス

    チェックボックスは、input要素のtype属性を「checkbox」にすることで作成可能です。

    value属性を指定することでサーバーに送る値を指定できます。

    通常、チェックボックスだけを使うことはなく、labelタグでチェックボックスの内容を示します。

    labelタグで指定するfor 属性に、input要素のidを加えるとラベルのテキスト自体がクリック可能になるので、覚えておくとよいでしょう。

    チェックボックス

    チェックボックス

    ラジオボタン

    チェックボックスは、input要素のtype属性を「radio」にすることで作成可能です。

    基本的な作成方法はチェックボックスと同じですが、ラジオボタンはname属性でグループ分けをする必要があります。

    ラジオボタン

    プルダウン

    プルダウンもinput要素ではないのですが、フォームでよく使われる要素なので説明します。

    プルダウンは、ラジオボタンと同じように複数の項目の中からひとつを選べる要素です。

    ラジオボタンとの使い分けは、項目数で決めるとよいでしょう。

    プルダウンはクリックすることで全項目を一覧で表示するため、項目数が多い選択肢を作成したい場合に有効です。

    作成するには、select要素とoption要素を使います。

    プルダウン

    プルダウン

    送信ボタン

    フォームの送信ボタンもinput要素で作成できます。

    送信ボタンは、input要素のtype属性を「submit」にすることで作成可能です。

    送信ボタン

    value属性を指定しないと、デフォルトで「送信」が表示文字になります。

    ボタンの表示名を変えたい場合はvalue属性を指定しましょう。

    送信ボタン

    ボタン

    フォームの送信ボタンとはボタンを設置したい場合は、input要素のtype属性を「button」にすることで作成可能です。

    こちらのボタンはデフォルト表示はないので、value属性に表示させたい文字を指定します。

    type属性を「reset」にすればリセットボタンにもなります。

    リセットボタンは入力内容を「初期表示の状態」にリセット可能です。

    入力内容のクリアと間違えやすいので注意してください。

    例えば、入力フォームの初期値(value属性値)に「あいうえお」と設定されていれば、リセットボタンを押すことで「あいうえお」が表示された状態にリセットされます。

    また、buttonタグを使うことで同じようにボタンを設置することもできます!

    buttonタグを使う場合は、タグの中に表示させたい文字を指定します。

    入力フォームをテーブルで作成する

    入力フォームはさまざまな方法で作成可能ですが、ここではテーブルで作成してみます。

    テーブルで作成すると、要素が均等にキレイに並ぶのでレイアウトを簡単に整えたい場合におすすめできます。

    サンプルコードで表示を確認してみましょう。

    入力フォームをテーブルで作成する

    画像のように入力フォームとそのラベルが等間隔で表示されています。

    リセットボタン、送信もcolspanを調整することでキレイに配置可能です。

    テーブル以外で入力フォームを揃える方法

    「テーブルを使わないで入力フォームをキレイに揃えたい」という人も中に入るでしょう。

    テーブルを使わない方法だと「定義リスト(dl・dt・dd)」でも入力フォームを揃えて作成可能です。

    揃え方はdtタグに「float:left;」と「clear:both;」を指定します。

    テーブル以外で入力フォームを揃える方法

    同じ要領でflexboxを使う方法もあります。

    入力フォームを横並びにする方法

    例えば、名前の入力フォームでよく「姓」「名」でわかれているものがありますよね。

    あのような横並びの入力フォームも作成してみましょう。

    ソースコードは次のようになります。

    名前のddタグの中にul・liタグを追加し、姓名でわけています。

    ulタグのlist-styleやデフォルトで入っているmargin・paddingをなくし、liタグをfloat:left;で横並びにしました。

    margin-rightはお好みで調整するとよいと思います。

    入力フォームを横並びにする方法

    入力フォームと出力フォームを作る

    入力フォームに入力した内容をもとに、データを出力したい場合もあるでしょう。

    そんな場合は「output要素」が使えます。

    output要素は、HTML5から追加された要素で出力欄を作成可能です。

    サンプルコードで動作を確認してみましょう!

    入力フォームと出力フォームを作る

    上記は数字のみ入力可能なフォームを設置し、入力した値の合計を出力しています。

    form要素の「oninputプロパティ」は、inputイベントを処理するイベントハンドラです。

    sum_output(output要素)に、first_numとsecond_numのvalueをNumber関数で数値化した値を出力します!

    入力フォームのデザインサンプル

    ここでは、入力フォームのデザインサンプルを2つ紹介します。

    ぜひ参考に利用・アレンジしてみてください!

    入力フォームデザインサンプル①

    入力フォームデザインサンプル①

    入力フォームデザインサンプル②

    こちらはFontawsomeを使うので、以下のコードをheadタグ内に記述してください。

    入力フォームデザインサンプル②

    まとめ

    HTMLの入力フォームについて説明しました。

    入力フォームを使う機会は多くあるので、基本的なフォームは作れるようになっておくと便利です。

    ぜひこの記事を参考に作成してみてください!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE