@ HTML

form 要素

form 要素は、ユーザが Web サーバーに情報を送信できるようにするインタラクティブなコントロールを含むドキュメントセクションを表します。

すべての HTML フォームは、以下のように form 要素から始まります。

elements_form_01

<form action="example.php" method="post">
・・・
</form>

form 要素は div 要素や p 要素と同様にコンテナ要素ですが、フォームの動作を設定するための固有の属性もサポートします。すべての属性は省略可能ですが、少なくとも action 属性と method 属性は常に設定することがベストプラクティスであると考えられます。

  • action 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義します。
  • method 属性は、データを送信するために使用する HTTP メソッド (“get” または “post”) を定義します。
form 要素の属性
属性名 説明
accept-charset 送信されるデータの文字エンコーディングを指定します。
action フォーム経由で送信された情報を処理するプログラムの URI。
autocomplete フォーム内のコントロールがデフォルトで、ブラウザによる値の入力補完を受けるかを示します。(on:オートコンプリートを有効にする。/off:オートコンプリートを無効にする。)
enctype method 属性の値が post であるとき、この属性はフォームをサーバに送信する際に使用する、コンテンツの MIME type を示します。
method フォームを送信する際にブラウザが使用する HTTP メソッドです。
name フォームの名前です。
novalidate フォームが送信された時にバリデートしない事を示す真偽値です。
target フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。

input 要素

input 要素は、form 要素で作成したフォームの中に、テキスト入力や実行ボタンなどのインプットコントロール(部品)を表示します。type 属性の値によって、見栄えや動作の異なる部品となります。

type 属性の値
type 属性の値 説明
type=”text” テキスト入力フィールド。
type=”password” パスワード入力フィールド。
type=”file” ファイル名入力フィールド。
type=”checkbox” チェックボックス。
type=”radio” ラジオボタン。
type=”hidden” 隠しフィールド。
type=”submit” 実行ボタン。
type=”reset” 取り消しボタン。
type=”button” 汎用ボタン。
type=”image” 画像ボタン。
type=”search” 検索フィールド。
type=”tel” 電話番号入力フィールド。
type=”url” url入力フィールド。
type=”email” E-Mail入力フィールド。
type=”date” 日付入力フィールド。
type=”time” 時刻入力フィールド
type=”number” 数値入力フィールド。
type=”range” 範囲入力フィールド。
type=”color” 色情報入力フィールド。
type=”datetime” 日時。
type=”datetime-local” ローカルタイムの日時。
type=”month” 月情報入力フィールド。
type=”week” 週情報入力フィールド。

使用頻度の高いフォームコントロール

type 属性が tel、search については type 属性が text の場合と変わりませんが、type 属性が email、url の場合は、メールアドレス、URL を正しい形式で入力する必要があります。

elements_form_input_type

<form action="">
  <p>tel:<input type="tel" name="tel"></p>
  <p>email:<input type="email" name="email"></p>
  <p>url:<input type="url" name="url"></p>
  <p>search:<input type="search" name="search"></p>
  <p><input type="submit" value="送信"></p>
</form>

UI を備えたフォームコントロール

数値や日付、色といったあらかじめ入力パターンが決まっているものに関しては、UI を備えた type 属性が用意されています。

数値入力

elements_form_input_type_unmber

<form action="">
  <p>number:<input type="number" name="num" min="0" max="100" step="5" value="50"></p>
</form>

elements_form_input_type_range

<form action="">
  <p>range:<input type="range" name="num" min="0" max="100" step="5" value="50" onchange="rangeValue(this.value)"></p>
  <span id="val">50</span>
  <script>
    function rangeValue(value){
      document.getElementById("val").innerHTML = value;
    }
  </script>
</form>

色の入力

elements_form_input_type_color

<form action="">
  <input type="color" name="color">
</form>

入力チェック機能

入力のチェックに関する属性には、次のようなものがあります。

autocomplete

input 要素がデフォルトで、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。

  • off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。
  • on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。

elements_form_input_autocomplete

<form action="" method="post">
  <fieldset>
    エリア:
    <input type="text" name="yourarea" autocomplete="on" list="tokyo">
    <datalist id="tokyo">
      <option value="渋谷">
      <option value="新宿">
      <option value="池袋"> 
    </datalist>
    <br>
    <input type="submit" value="送信">
  </fieldset>
</form>

novalidate

フォームが送信された時にバリデートしない事を示す真偽値です。もしこの属性が指定されていない(つまりバリデートされる)場合、この設定の初期値は <button> もしくは <input> の novalidate 属性によって上書きする事が可能です。

elements_form_novalidate

<form action="" method="get">
  <p>チェック機能が有効になっているフォーム。</p>
  <p>お名前:
    <input type="text" name="name" required>
    <strong>必須</strong></p>
  <p>
    <input type="submit" value="送信する">
  </p>
</form>

<form action="" method="get" novalidate>
  <p>チェック機能を無効にしたフォーム。(未入力でも送信が可能)</p>
  <p>お名前:
    <input type="text" name="name" required>
    <strong>必須</strong></p>
  <p>
    <input type="submit" value="送信する">
  </p>
</form>

pattern

pattern 属性は入力値のチェックを行うための正規表現を設定する属性です。

elements_form_input_pattern

<form action="">
  <p>zip:<input type="zip" name="zip" pattern="\d{3}-\d{4}" title="郵便番号は、「123-4567」のように、「3桁の数字、ハイフン(‐)、4桁の数字」の順で入力して下さい。" required></p>
  <p><input type="submit" value="送信"></p>
</form>

入力項目のグループ化

フォームの入力項目をグループ化する際には、fildset 要素を使います。

部品のグループにキャプションを付けたい場合は、fieldset 要素内の先頭に legend 要素を配置します。

elements_form_fildset

<form action="">
  <fieldset>
    <legend>基本情報</legend>
    <p>tel:<input type="tel" name="tel"></p>
    <p>email:<input type="email" name="email"></p>
    <p>url:<input type="url" name="url"></p>
    <p><input type="submit" value="送信"></p>
  </fieldset>
</form>
    

フォームの整形

css によるフォームの整形例を以下に示します。

elements_form_sample

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
form {
  width: 100%;
  /* フォームをページの中央に置く */
  margin: 0 auto;
  /* フォームの範囲がわかるようにする */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

form div + div {
  /* 各フォームウィジェットの間にいくらかスペースを設ける */
  margin-top: 1em;
}

label,span {
  /* すべてのラベルを同じサイズにして、きちんと揃える */
  display: inline-block;
  width: 90px;
  text-align: right;
}

label#man, label#woman {
  width: 15px;
  text-align: left;
}

input#name, textarea {
  /* すべてのテキストフィールドのフォント設定を一致させるデフォルトで、textarea は等幅フォントが設定されている */
  font: 1em sans-serif;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* すべてのテキストフィールドを同じサイズにする */
  width: 80%;
  /* テキストフィールドのボーダーの外見を同一にする */
  border: 1px solid #999;
}

input:focus, textarea:focus {
  /* アクティブな要素を少し強調する */
  border-color: #000;
}

textarea {
  /* テキスト入力に十分な領域を与える */
  height: 5em;
  /* ユーザが textarea を垂直方向にリサイズできるようにするこれが動作しないブラウザもある */
  resize: vertical;
  /* 複数行のテキストフィールドをラベルにきちんと揃える */
  vertical-align: top;
}

.button {
  /* ボタンを他のテキストフィールドと同じ場所に置く */
  padding-left: 90px; /* label 要素と同じサイズ */
}

button {
  /* このマージンは、ラベルとテキストフィールドの間のスペースとおおよそ同じスペースを表す */
  margin-left: .5em;
}
</style>
</head>

<body>
  <form action="" method="post">
    <div>
      <label for="name">名前:</label>
      <input id="name" type="text" name="name" size="30" value="">
    </div>
    <div>
      <span>性別:</span>
      <label id="man" for="male">男</label><input id="male" type="radio" name="sex" value="male" checked>
      <label id="woman" for="female">女</label><input id="female" type="radio" name="sex" value="female">
    </div>
    <div>
      <label for="blood">血液型:</label>
      <select id="blood" name="blood">
        <option value="A" selected>A型</option>
        <option value="B">B型</option>
        <option value="O">O型</option>
        <option value="AB">AB型</option>
      </select>
    </div>
    <div>
      <label for="comment">ご感想:</label>
      <textarea id="comment" name="kanso" rows="4" cols="30">ご感想をご記入ください。</textarea>
    </div>
    <div class="button">
      <button type="submit">送信</button>
      <button type="reset">リセット</button>
    </div>
  </form>
</body>

</html>