HTML入力フォーム

WebブラウザにHTMLファイルを表示させる通常の「静的なページ」に対し、メールフォーム、掲示板、ブログなどのようにWebブラウザから入力された要求に対して Webサーバ側でプログラムを呼び出し処理した結果を返すしくみを、CGI （Common Gateway Interface ）といいます。このようなページを、 「動的なページ」といいます。

この動的なページには、サーバ側でPerl、PHPやC言語などのプログラムが使われたり、JavaScript のようにブラウザ側で処理します。 このとき WebサーバのCGI プログラムに渡すパラメータは、テキストボックスやチェックボックスなどのフォーム部品で指定します。これらのデータを入力するためのユーザインターフェース 部分を、HTMLでは<form>要素で記述します。

form 要素の構造

form 要素は、<form>〜</form>で一つの入力フォームを形成します。フォームの中には <input>、<select>、<textarea> などのフォーム部品を配置して通常、一つのサブミット（実行）ボタンを持ちます。 各入力部品に値を入力した後、サブミットボタンを押すと method 属性で指定した転送方法で、action 属性で指定したアクション（転送先 URI ）を呼び出します。

method 属性値はデータの送信方法により、get と post がよく使われます。これらはそれぞれ HTTP 要求メソッドの GET と POST に対応しています。

<form method="POST" action="URI"> 〜 </form>
【 記述例 】 
<form method="POST" action="./cgi-bin/xxx.cgi">
名前<input type="text" name="名前" value="太郎">
<input type="radio" name="性別" value="男" checked>男性
<input type="radio" name="性別" value="女">女性
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>
【 表示例 】

名前  

男性  女性

  

GET と POST

HTTP メソッドの GETと POSTは、データの送信方法が異なります。GETは action 属性に指定した URI に ? をつけ、その後にデータをつけて URI として送られます。それを受け取ったサーバは、 ? 以降を環境変数に入れて CGI プログラムに渡します。送信できる情報量には制限があります。

POSTは、URI の一部ではなく独立した本文として送られます。セキュリティの面でも有利な POST が、Web ページの入力フォームにはよく使われます。

Top ↑

<input>フォーム部品

フォーム<form>内のテキスト入力や実行ボタンなどの各フォーム部品を表示します。
下記の type 属性の値によって見栄えも動作も異なる部品となります。

【type 属性 】

text
一行テキストの入力を行なうフィールド
password
パスワードの入力フィールド
file
ファイルをアップロードするためのファイル入力フィールド
checkbox
チェックボックスで複数項目の選択
radio
ラジオボタンで一つの項目の選択
submit
実行ボタンを形成して action 指定の URI にフォームデータを渡す
reset
取消ボタンを形成してフィールド内すべてをデフォルト値にリセット
button
汎用ボタンを形成してスクリプトを起動
hidden
表示させないで、サーバ側にコントロールデータを渡す
image
任意の画像を使った送信ボタンを作成します
  
 

【 属性 】

name
フィールドのデータ名で submit と reset 以外すべてのタイプに必要
value
スクリプトに渡される値で submit、reset はボタン名として表示
checked
選択フォーム checkbox、radio の選択された初期値
size
text や password フィールドの長さを文字数で指定。初期値は20
  

以下、<input>フォーム部品の記述例と、表示例を示します。実行、送信ボタンはサンプルなのでできません。

type="text" ・・・一行テキスト入力フィールド

【 記述例 】 
名前 <input type="text" value="日本太郎">
【 表示例 】 名前

一般的な、「一行テキスト」を入力するフィールドです。フィールドの長さは size で半角英数字の文字数を指定します。 デフォルト値は 20 文字です。


type="password"　・・・パスワード入力フィールド

【 記述例 】 
パスワード <input type="password" name="pass" value="abcde">
【 表示例 】 パスワード

他人にパスワードを見られないように、入力文字はすべてアスタリスク「＊」、または「●」で表示されます。 name 属性は通常、半角英数字にします。


type="file"　・・・ファイル名入力フィールド

【 記述例 】 
ファイル名<input type="file" name="upfile">
【 表示例 】 ファイル名

ブラウザからサーバーに、ファイルをアップロードする際に用います。入力フィールドの横には「参照」ボタンが表示され、 それらの配置はブラウザによって異なる表示になります。

サーバー側には、ファイルを受け取るためのCGIスクリプトなどを設置しておく必要があります。セキュリティ上、 初期値を設定したりスクリプトで値を操作することはできません。

type="checkbox"　・・・チェックボックス

【 記述例 】 
<input type="checkbox" name="hobby" value="映画" checked> 映画
<input type="checkbox" name="hobby" value="旅行"> 旅行
<input type="checkbox" name="hobby" value="テニス"> テニス
【 表示例 】 映画 旅行 テニス

オン・オフの値を持つチェックボックスを表示します。複数項目を選択できます。通常、どれかのボックスに checked をいれて選択状態にしておきます。

Top ↑

type="radio"　・・・ラジオボタン

【 記述例 】 
<input type="radio" name="color" value="赤" checked>赤
<input type="radio" name="color"> value="青">青
<input type="radio" name="color"> value="黄">黄
【 表示例 】 赤  青  黄

同じ name 属性をもつラジオボタンで、１つのラジオボタングループを形成します。複数の中でどれかひとつしかチェックできない点が チェックボックスと異なります。これもどれかのボタンに checked をいれてデフォルト値を選択状態にしておきます。

type="submit"　・・・実行ボタン

【 記述例 】 
<input type="submit" value="実行">
【 表示例 】

このボタンを押すと、<form> タグの action 属性で指定したアクションが呼び出されます。


type="reset"　・・・取消ボタン

【 記述例 】 
<input type="reset" value="取消">
【 表示例 】

このボタンを押すと、それまでに入力した情報をすべてキャンセルして、最初から入力をやり直すことができます。


type="button"　・・・汎用ボタン

【 記述例 】 
<input type="button" value="Click !">
【 表示例 】

<input type="button" onclick="...">のようにボタンをクリックしたとき、JavaScript などを起動する際によく用いられます。


button 要素

【 表示例 】

button 要素は、type 属性により input 要素の button：汎用ボタン、submit：実行ボタン、reset：リセットボタンと同様のボタンを作成します。 form 要素内に配置してフォーム部品とするほか、フォーム以外のJavaScript でも利用できます。

【 記述例 】
<button type="button">クリック</button>

type="hidden"　・・・隠しフィールド

【 記述例 】

入力必須項目（メールアドレス、メッセージ）をCGIプログラムに指定する例

<input type="hidden" name="need" value="email メッセージ">
<input type="submit" value="送信">
【 表示例 】

実行ボタンが押されても、画面上には表示されません。ユーザが知る必要のないコントロールデータを CGI プログラムに送信する場合などに使用します。


type="image"　・・・画像ボタン

【 記述例 】 
<form method="POST" action="xyz.cgi">
<input type="image" src="./img/button-1.png" alt="送信ボタン">
</form>
【 表示例 】

画像を送信ボタンに使用します。画像には alt 属性で画像の説明が必要です。


Top ↑

<textarea>フォーム部品：テキストエリア

【 記述例 】 
<form method="POST" action="xyz.cgi">
<textarea name="msg" cols="25" rows="4">
ここにメッセージをどうぞ
</textarea>
<input type=submit value="送信">
<input type=reset value="クリア">
</form>
【 表示例 】
 

複数行のテキストを入力するフィールドです。input 要素とは異なり開始タグと終了タグを使います。タグの間に記述された内容が初期値となります。 データの名前を指定する name属性のほかに、入力エリアの横幅を示す列数（文字数）の cols 属性と、高さを示す行数のrows 属性を指定します。（必須）


<select>セレクト部品

<select> は、<form> で作成されるフォーム内の選択部品（セレクトボックス）を表示します。 size 属性で、画面に一度に表示する選択肢の行数を指定します。それぞれの選択肢を記述するには <option> を用います。 どれかに selected を入れてデフォルト値を選択状態にします。

プルダウン式で表示する場合

size 属性指定しないデフォルト値（size=1）で、プルダウンメニュー表示します。

【 記述例 】 
<form method="POST" action="xxx.cgi">
<select name="OS">
<option value="WIN" selected>Windows</option>
<option value="MAC">Macintosh</option>
<option value="UNIX">UNIX</option>
<option value="OTHER">その他</option>
</select>
<input type="submit" value="送信">
</form>
【 表示例 】

リスト形式で表示する場合

size 属性で表示行数を指定することで、リストボックス形式で表示します。

【 記述例 】
<form method="POST" action="xyz.cgi">
<select name="browser" size="4">
<option value="IE6">Internet Explorer6</option>
<option value="IE7">Internet Explorer7</option>
<option value="Fox2">Mozilla Firefox2</option>
<option value="Opera9" selected>Opera9x</option>
<option value="OTHER">その他</option>
</select>
<input type="submit" value="送信">
</form>
【 表示例 】

<optgroup> オプショングループ

メニューは、選択肢が多くなると使いにくくなります。そこで、optgroup 要素で選択肢の option 要素をグループ化します。 グループには label 属性で名前を付けます。（必須）

【 記述例 】
<select name="area">
  <optgroup label="首都圏">
    <option selected>東京都</option>
    <option>千葉県</option>
    <option>神奈川県</option>
    <option>埼玉県</option>
  </optgroup>
  <optgroup label="京阪神">
    <option>大阪府</option>
    <option>京都府</option>
    <option>奈良県</option>
    <option>兵庫県</option>
  </optgroup>
</select>
【 表示例 】

Top ↑

<fieldset> フォームのグループ化

<form>で囲まれたフォームの入力部品をグループ化します。<legend>で グループのタイトルを記述することができます。グループ化することで、フォーム部品が多い場合などに見やすくなるのと、 非視覚系ブラウザ（音声ブラウザ）などのアクセシビリティに役立ちます。

【 記述例 】 
<form method="POST" action="xyz.cgi"> 
<fieldset> 
<legend>申込者</legend> 
お名前：<input type="text" name="name1" size="20">
電話番号：<input type="text" name="tel1" size="20"><br> 
ご住所：<input type="text" name="address1" size="50"> 
</fieldset>
 
<fieldset> 
<legend>お届け先</legend>
お名前：<input type="text" name="name2" size="20">
電話番号：<input type="text" name="tel2" size="20"><br> 
ご住所：<input type="text" name="address2" size="50"> 
</fieldset> 

<input type="submit" value="送信する"> 
<input type="reset" value="リセット">
</form>
【 表示例 】
申込者 お名前 ：   電話番号 ：
ご住所 ：
お届け先 お名前 ：   電話番号 ：
ご住所 ：

  


legend で視覚的には「タイトル付きボックス表示」になるので他の表示にも応用できそうですが、本来のフォーム以外には使用しないようにしましょう。 非視覚系ブラウザなどでは混乱することになります。フォーム以外に用いる場合は下記のようにスタイルシート CSS でできます。

【 参考 】　CSS で legend のようなラベル付き角丸ボックス表示にする

IE6〜IE8 の頃は角丸ボックス表示だったラベル付きボックス表示を CSS で行ないます。ラベル部分は h4 タグを使用していますが、文章構造に合わせて h1〜h6 を使用します。表示位置や外枠線とのパディングなどは調整してください。

【 表示例 】

こんな感じの文字でも画像でも入れられるボックス表示になります。

【HTML】 
<div class="box_f">
  <h4>【 表示例 】</h4>
  <p>こんな感じの文字でも画像でも入れられるボックス表示になります。</p>
</div>

【CSS 】 
.box_f {
  border: solid 1px #ccc;
  position: relative; /* 子要素が position を指定する時は親要素にも
                         position 指定し、基準点を親要素にします。*/
  border-radius: 6px; /* 半径 6px の角丸 */
  margin-top: 1em;        
  padding: 0.5em;
}
.box_f h4 {
  position: absolute;
  top: -0.5em;
  left: 1em;         /* ラベル文字の表示位置を調整します。*/
  margin: 0;
  padding: 0 0.5em;
  color: #05b;
  font-weight: bold;
  background-color: #fff;/* ボーダー線を背面にします。*/
  z-index: 1;            /* 絶対配置しているので */
}

Top ↑

フォーム上の実行、リセット操作の前に確認ダイアログを表示

確認ダイアログ

多くのフォーム部品で構成された入力フォームで入力した後、最後に「実行」ボタンや、「リセット」ボタンを押して CGI スクリプトに送信する前に、 JavaScript を使用して簡単に図のような確認ダイアログを表示することができます。

特に「リセット」ボタンの場合、誤って消去してしまうと再入力する気力をなくし、いらだったりする要因になります。 そのような操作ミスの可能性を減らすことができます。あるいは、リセットボタンは特別に必要性がないかぎり設置しないほうがよいかもしれません。

実行ボタンの場合は、通常 CGI スクリプトのほうで確認メッセージが入るでしょうから、ここで表示すると、「うっとうしい」と嫌がられるかもしれませんが・・・。
JavaScript の onsubmit 属性や、onreset 属性を使って下記のようにします。

【 記述例 】 
<form method="POST" action="xyz.cgi" 
onsubmit="if( !confirm('本当に送信していいですか？')) return false;" 
onreset ="if( !confirm('本当に消去していいですか？')) return false;">
<input　〜（省略）>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</form>
【 表示例 】
  お名前 ：   電話番号 ：
  ご住所 ：

  

Top ↑

HTML5 で追加された<input>フォーム部品

HTML5 では多くの入力フォームが追加されました。従来のテキスト入力フィールド type="text" と、見た目も機能も同じです。いままでは CGI 側で入力内容のチェックをしていたものがブラウザ側で簡単なチェックができるようになりました。そのために新しい属性も追加されました。 最近のモダンブラウザ IE10〜、Chrome、Firefox、Opera、Safari にほぼ実装されています。表示のしかたはそれぞれ異なり特徴があります。（2015年 2月）

【type 属性 】

search
検索テキストの入力
tel
電話番号の入力
url
URL入力
email
E-Mail アドレスの入力
date
日付の入力
time
時間の入力
number
数の入力
range
スライダーによる数の入力
color
色の入力

【 属性 】

form
通常は部品の内側のフォームが対象ですが、関連づける form 要素の id を指定できる
autofocus
ページをロードしたとき自動的にフォーカスを合わせる
disabled
部品を無効化する
readonly
読出し専用にする
required
必須属性にする
pattern
入力値のパターンを正規表現で指定する
placeholder
入力欄に薄い文字で表示する文字列
max,min,step
入力値の範囲を制御し、date、time、number、range に使用する

以下、新しい <input>フォーム部品の記述例と表示例を示します。

type="search"　・・・検索文字列

【 記述例 】　郵便番号の検索例 
<form method="get" action="xyz.cgi">郵便番号検索
<input type="search" name="post" pattern="¥d{3}¥-¥d{4}" 
placeholder="例 123-4567" title="郵便番号は
[3桁の数字]ー[4桁の数字]の順で記入してください。">
<input type="submit" value="検索">
</form>
【 表示例 】
郵便番号検索

検索文字列の入力欄を作ります。HTML5 で追加された属性の pattern は、JavaScript の正規表現を使って入力数字列（xxx-xxxx）のチェックをしています。 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ不備があればエラーメッセージと、title の内容も表示されます。そのエラー内容は「検索」ボタンをクリックして送信しないと分からないので、 この例では本ページに送っています。正しく入力した場合はリロードされページトップに移動します。

type="tel"　・・・電話番号

【 記述例 】 
<input type="tel" name="tel" placeholder="電話番号">
【 表示例 】 TEL:

電話番号の入力欄です。入力文字に制限はありませんが、スマートフォンなどでは電話番号入力用のテンキーが表示されます。pattern 属性などを使用して上記の郵便番号検索のようにチェックすることもできます。 属性の placeholder は、欄内に薄く表示される案内テキストです。入力時には消えます。

type="url"　・・・ URL

【 記述例 】 
<input type="url" name="url" value="http://">
【 表示例 】 URL:

URLの入力欄です。http:// などで始まらない文字を入力するとバリデーションエラーとなります。


type="email"　・・・ Eメール

【 記述例 】 
<input type="email" name="email" placeholder="admin@example.com">
【 表示例 】 E-Mail:

Eメールアドレスの入力欄です。メールアドレスに使用できない文字を含んだ場合や＠マークを含まない場合などにバリデーションエラーとなります。


type="date"　・・・日付

【 記述例 】 
<input type="date" name="date" placeholder="2015-01-13">
【 表示例 】 日付 :

日付の入力欄です。Chrome、Opera は、カレンダーウィジェットや日付スピナーが表示されます。


type="time"　・・・時刻

【 記述例 】 
<input type="time" name="time"　placeholder="例 23:10">
【 表示例 】 時刻 :

時刻の入力欄です。Chrome、Opera は、時刻入力スピナーが表示されます。


type="number"　・・・数値

【 記述例 】 
<input type="number" name="number" min=-5 max=5 value=0>
【 表示例 】 数値 :

数値の入力欄です。例では、-5 〜 5 の範囲で入力が可能となります。IE 以外はカーソルを置くと数値入力スピナーが表示されます。


type="range"　・・・レンジ

【 記述例 】 
<input type="range" name="range" min=0 max=10 value=5 step=1>
【 表示例 】

スライダーで数値を入力します。変化範囲やステップ幅を min、max、value、step 属性で指定します。何も指定しない初期値は 0 〜 100 を 1 ステップ幅になります。 IE は数値も表示されますが、正確な数値よりもユーザーの使い勝手を重視した用途のようです。

type="color"　・・・色

【 記述例 】 
<input type="color" name="color" value="#ff0000">
【 表示例 】 色 :

色を2桁RGB値の16進数表示で入力します。Chrome、Firefox、Opera は、ボックスをクリックするとカラーパレットが開いて任意の色を指定できます。


Next >>スタイルシートCSSの基礎 >>Top↑