HTMLの入力フォームの作り方！初期値の設定やデータの保存。デザインサンプルあり。

この記事では、ウェブ制作に欠かせないフォームの使い方について基本から応用的なパターンまで分かりやすく解説する。

ReactやAngularといったJSフレームワークを使用しているプロジェクトでは、そのフレームワークによって拡張されたフォームを使用することも多いと思うが、HTML・CSS・JSのみを使ったレガシーな入力フォームの作成方法も知っておいたほうがいいだろう。

なお、この記事は記事執筆の時点で最新であるHTML 5に準拠している。

HTMLの入力フォームとは？

入力フォームはまとまった情報をグループ化して、ユーザに分かりやすい形で入力のサポートやデータの処理を行うためのHTMLの標準機能。

フォームは入力フィールド・日時選択・ボタンとラベルといった複数の要素から構成される。

フォームに入力された情報は認証をおこなったうえで、APIリクエストとしてダイレクトにバックエンドに送信することができる。

入力フォームを使用するユースケースとしては、ウェブサイトの会員登録画面や問い合わせフォームなどを想像してもらえば分かりやすいだろう。

HTML入力フォームのサンプル

この記事ではサンプルとして以下のとうなユーザ登録のフォームを作成してみたいと思う。

上のフォームHTMLファイルは以下のようになっている。<form>タグの内側がひとつのグループとなっていると考えてほしい。

<div class="registration-form">

  <form action="https://www.my-server.com" method="post">
    <h2>ユーザ登録</h2>

    <label for="user-name">ユーザー名 (必須)</label>
    <input id="user-name" type="text" name="user-name" placeholder="山田太郎">

    <label for="e-mail">Eメール (必須)</label>
    <input id="e-mail" type="email" name="e-mail" placeholder="taro.yammada@google.com">

    <label for="birthday">生年月日</label>
    <input id="birthday" type="date" name="birthday">

    <label for="note">備考</label>
    <textarea id="note" name="note" rows="6"></textarea>

    <label for="attachment">添付ファイル</label>
    <input id="attachment" type="file" name="attachment">

    <label>興味のある事柄</label>
    <div class="hobby-selection">
      <input id="sport" type="checkbox" name="interests" value="sport">
      <label for="sport">スポーツ</label>

      <input id="reading" type="checkbox" name="interests" value="reading">
      <label for="reading">読書</label>

      <input id="gaming" type="checkbox" name="interests" value="gaming">
      <label for="gaming">ゲーム</label>
    </div>

    <button type="submit">登録する</button>
  </form>

</div>

上記のサンプルで使用したCSSもここに記述しておく。

このサンプルではグリッドレイアウトを使用してレーベルと各フィールドを配置している。同じようなレイアウトはテーブルやフリックスレイアウトを使用して作ることもできる。

.registration-form {
  font-size: 12px;
  width: fit-content;
  padding: 20px;
  background: #dadada;
  border-radius: 15px;
}

h2 {
  grid-column: span 2;
}

form {
  display: grid;
  grid-template-columns: 150px 300px;
  grid-gap: 15px;
}

input:not([type='checkbox']) {
  width: 100%;
  height: 30px;
}

textarea {
  width: 100%;
}

.hobby-selection {
  display: flex;
}

.hobby-selection label {
  padding-top: 2px;
  margin-right: 10px;
}

button {
  grid-column: span 2;
  justify-self: end;
}

入力フォームの作り方

入力フォームを作りたいときはHTMLの<form>タグを使用する。

フォーム<form>

HTMLファイルにてフォームを使用するには<form>タグを使用する。

formタグの内側に入力フィールドなどの要素を配置する。ひとつのHTMLファイルにて複数のフォームを使用することも可能だ。

action・method属性を使用すれば、フォームの送信先を指定することができる。

<form action="https://www.my-server.com" method="post"></form>

入力フォームに使用するタグ

フォームで使用できる要素とそのタグを説明したい。

入力フィールド<input>

入力フィールドは様々な情報を入力・選択するための要素。

type属性を指定することにより、名前・住所・パスワードなどいったテキストの入力のみならず、ファイルの選択、チェックボックス、ボタンといった様々な目的に使用することもできる。

<input type="email" name="e-mail">

以下はtype属性として指定できるタイプの一覧表だ。

typeに”hidden”を設定するとそのフィールドはブラウザに表示されない。ユーザには見せたくないがフォームの一部としてデータを付随させたい場合に使用できる。

数字のみの入力フィールド

入力フィールドに入力できる文字の種類を数字だけに制限したい場合はtype属性に”number”を指定する。

<input type="number" step="30">

type属性がnumberの入力フィールドでは、デフォルトでフィールドの右側に上下の矢印ボタンが表示され、このボタンを使って入力値を変えることができる。step属性を指定すれば一回のボタンクリックで変化する値の量を調整できる。

日付選択の入力フィールド

日付選択の入力フィールドはtype属性に”date”などを指定する。右端のカレンダーボタンをクリックすれば、日付指定のためのポップアップが表示される。

ラベル<label>

ラベルはその名の通り入力フィールドの内容を表すテキスト。

通常は入力フィールドなどの要素と一対一で関連づけて使われる。

ラベルとフィールドを関連づけるには、ラベルで入力フィールドを囲いこむ方法とfor・id属性を使って紐づける方法の2つがある。

<label>名前
  <input type="text" name="user-name">
</label>

<label for="name">名前</label>
<input id="name" type="text" name="user-name">

テキストフィールド<textarea>

テキストフィールドは複数行に渡る文字列を入力するために使われる。

cols・rowsでフィールドの大きさを指定できる。

<textarea rows="6" cols="20"></textarea>

プルダウン選択<select>

プルダウン型の選択を作る。選択肢は<option>タグを使って指定する。

mutiple属性を指定すれば複数選択が可能となる。

<select name="カラーテーマ">
  <option selected>ライト</option>
  <option>ダーク</option>
  <option>カスタム</option>
</select>

初期値とプレースホルダ

入力フィールドの初期値とプレースホルダの使い方を紹介したい。

初期値の設定

初期値はフォームを開いたときにあらかじめ入力されている文字列のことでHTMLではvalue属性を使って指定する。

<input type="text" value="山田太郎">

プレースホルダの設定

プレースホルダは何も入力されてない時にフィールド内に表示される文字列の事で、placeholder属性で指定する。プレースホルダはデフォルトでは薄めの色で表示される。

<input type="text" placeholder="山田太郎">

入力値の検証とエラー表示

入力フィールドに入力された値の検証とエラー表示にまつわる機能を紹介したい。

有効な文字列の長さを制限する

文字列の入力フィールドにおいて、文字列の有効な文字列の長さを制限したい場合はminlength・maxlengthを指定する。会員番号などの長さが決まっている文字列の入力に使用できる。

<input type="text" minlength="8" maxlength="12">

入力された文字列が短すぎる、もしくは長すぎる場合はエラーメッセージが表示される。

最小値・最大値の設定

数字の入力フィールドでは、min属性とmax属性を使い入力できる数の最小値と最大値を指定することができる。

<input type="number" min="1" max="99">

入力の必須化

入力フィールドやチェックボックスの選択を必須項目としたい場合はその要素のタグにrequired属性を追加する。

<input type="text" placeholder="山田太郎" required>

必須項目を入力しないまま、登録ボタンを押すなどフォームの「submit」が呼ばれると以下のようにデフォルトのエラーメッセージが表示される。

メッセージはユーザのブラウザで設定された言語で表示される。また、エラー表示のデザインはブラウザにより異なる。