フォームを使ってみよう

Webページの利用者が何らかのデータを入力して送信するときにはフォームを配置します．実際に利用者が入力したデータを受け取って処理をするためにはそのためのプログラムを記述する必要があります．

テキストコントロール

ここではテキストコントロールのさまざまな使用方法を例示します．なお，フォームのコントロールのデザインを美しくするためには Bootstrap のような CSS フレームワークを適用すると良いでしょう．

簡単なフォーム

まず，簡単なフォームを <form> タグで設置し，その中にテキストコントロールを配置します．実際に文字列を入力できること試してください．

index.html（抜粋）
<form>
  <input type="text">
</form>

ブラウザでの表示結果

目次に戻る

幅の指定

テキストコントロールの幅を指定するには size 属性を利用します．

index.html（抜粋）
<form>
  <input type="text" size="10">
  <input type="text" size="20">
  <input type="text" size="30">
  <input type="text" size="40">
  <input type="text" size="50">
  <input type="text" size="60">
</form>

ブラウザでの表示結果

目次に戻る

ラベルの設定

ラベルをつけるときには <label> タグを使います．このとき，<input> に id="..." を設定し，<label for="..."> のようにその id を指定することに注意してください．また id は同一ページ内で重複しないように設定しなければなりません．ラベルを設定することで，下のブラウザの表示結果でラベルである「氏名」をマウスでクリックすると隣のテキストコントロールにフォーカスが当たる（選択されてキーボードからの入力が可能な状態になる）ことにも注意してください．

index.html（抜粋）
<form>
  <label for="name1">氏名</label>
  <input type="text" id="name1">
</form>

ブラウザでの表示結果

なお，テキストコントロールなどの部品を <label> ... </label> で囲うという方法もあります．この場合は id を設定する必要はありません．

index.html（抜粋）
<form>
  <label>
    氏名
    <input type="text">
  </label>
</form>

ブラウザでの表示結果

目次に戻る

ボタンの配置

送信ボタンは <input type="submit" value="送信"> や <button>送信</button> で配置できます．入力された文字列を送信したいテキストコントロールには name 属性で名前をつけておきます．実際に文字列を入力して送信ボタンを押してください．そうすると，ブラウザのURLの最後に ?fullname=入力した文字列 のように表示されているはずです．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname">
  </label>
  <input type="submit" value="送信">
</form>

ブラウザでの表示結果

<button>送信</button> を使った場合も同じ結果になります．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname">
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

<input type="submit"> はフォームを送信するボタンとして機能するので，通常はこのボタンがクリックされるとフォーム内のデータがサーバに送信されます．また，<button type="submit"> も type="submit が既定値となるので，type 属性を省略した <button>送信</button> でもフォーム内のデータがサーバに送信されます．

<input type="submit"> ではボタンに表示したい内容を value="送信" のように与えるので文字列しか設定できません．一方で <button> では <button>送信</button> のようにボタンに表示したい内容を与えるので，ボタンに文字列以外の画像などを表示することも可能です．

目次に戻る

プレースホルダーの設定

プレースホルダーを設定するとユーザが利用しやすいように指示を与えることができます．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname" placeholder="氏名を入力してください">
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

目次に戻る

値の設定

value 属性を指定すると値の初期値を設定することができます．なお，値を設定するとプレースホルダーに設定した内容は表示されません．入力された値を削除したときにだけプレースホルダーの内容が表示されることに注意してください．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname" placeholder="氏名を入力してください" value="神院 太郎">
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

目次に戻る

入力を必須にする

テキストコントロールの入力を必須にするには required 属性を指定します．ユーザが何も入力せずに送信ボタンを押したらエラーが表示されます．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname" placeholder="氏名を入力してください" required="required">
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

なお，required="required" の required は属性で "required" は属性値です．属性名と属性値が同じものは「論理属性 (Boolean attributes)」と呼ばれ，論理属性は省略して属性名だけ指定することができます．次の書き方でも上と同じ結果になります．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname" placeholder="氏名を入力してください" required>
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

目次に戻る

数値の入力コントロール

数値の入力を求める場合は input type="number" を使うと良いでしょう．数値だけの入力を受け付け，スピンボタンで値を増減させることもできるようになります．

index.html（抜粋）
<form>
  <label>氏名
      <input type="text" name="fullname" placeholder="氏名を入力してください" required>
  </label>
  <label>年齢
      <input type="number" name="age" placeholder="年齢を入力してください" required>
  </label>
  <button>送信</button>
</form>

ブラウザでの表示結果

上の実行結果では，ブラウザの幅によっては改行されずに横に並んでコントロールが表示されます．これを防止するために <div> で囲うという方法がしばしば採用されます．

index.html（抜粋）
<form>
  <div>
    <label>氏名
    <input type="text" name="fullname" placeholder="氏名を入力してください" required>
    </label>
  </div>
  <div>
    <label>年齢
    <input type="number" name="age" placeholder="年齢を入力してください" required>
    </label>
  </div>
  <div>
    <button>送信</button>
  </div>
</form>

ブラウザでの表示結果

目次に戻る

その他の入力コントロール

数値の入力コントロール以外にもさまざまな値を入力するためのコントロールが準備されています．メールやURLなどは不適切文字列が入力された場合にそれがチェックされる仕組みになっています．なお，このページでは本物のパスワードを入力せず，ダミーのパスワードを入力するようにしてください（パスワード欄に入力した文字列が URL に表示されるとともに Web サーバのログにも残ってしまいます）．

index.html（抜粋）
<form>
  <div><label>パスワード <input type="password" name="pw" placeholder="本物を入力しないで!!"></label></div>
  <div><label>検索 <input type="search" name="search"></label></div>
  <div><label>メール <input type="email" name="email"></label></div>
  <div><label>URL <input type="url" name="url"></label></div>
  <div><label>電話 <input type="tel" name="tel"></label></div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

目次に戻る

« 戻る次へ »