Loading article…
ウェブページ上のウェブフォーム（Webフォーム、 HTMLフォームとも呼ばれる）を使用すると、ユーザーはサーバーに送信して処理するデータを入力することが可能です。ウェブユーザーはチェックボックス、ラジオボタン、テキストフィールドなどを使用してフォームに入力するため、フォームは紙のフォームやデータベースのフォームに似ています。例えば、フォームは商品の注文時に配送先情報やクレジットカード情報を入力するため、あるいは検索エンジンから検索結果を取得するために使用できます。
フォームはHTML 要素で囲まれています。この HTML 要素は、フォームに入力されたデータが送信される通信エンドポイントと、データの送信方法を指定します。<form>GETPOST
フォームは、標準的なグラフィカルユーザーインターフェース要素で構成できます。
<button>フォームの送信、フォームのリセット、JavaScript関数の実行などのアクションに関連付けることができるボタン。<input>— ユーザー入力用の要素。この要素は、属性の値によって変化しますtype。<textarea>入力フィールドによく似ているが、 複数行のデータを表示および入力できる点が異なる。 <text><textarea><select>—ユーザーが選択できる項目のリストを表示するドロップダウンリスト入力要素には、以下のタイプがあります。
text— 1行のテキストを入力できるシンプルなテキストボックス。email-部分的に検証されたメールアドレスを必要とするタイプ<text>number-数値を必要とするタイプ<text>password— と同様に、セキュリティ目的で使用され、入力された文字は非表示になるか、* などの記号に置き換えられます。<text>tel— 電話番号radio—ラジオボタンfileファイルをアップロードするためのファイル選択コントロールreset—リセットボタン。これを有効にすると、ブラウザは現在のフォームの値を初期値に戻すように指示されます。submit—ブラウザにフォームに対して何らかのアクションを実行するよう指示するボタン（通常はサーバーに送信する）。右側のサンプル画像には、これらの要素のほとんどが示されています。
これらの基本要素は、最も一般的なグラフィカルユーザーインターフェース（GUI）要素を提供しますが、すべてではありません。たとえば、ツリービューやグリッドビューに相当するものはありません。
グリッドビューは、各セルにテキスト入力要素を含む標準的なHTMLテーブルを使用することで再現できます。ツリービューも、ネストされたテーブル、あるいはより意味的に適切なネストされたリストを使用することで再現できます。どちらの場合も、サーバー側のプロセスが情報の処理を担当し、JavaScriptがユーザーとのやり取りを処理します。これらのインターフェース要素の実装は、 jQueryなどのJavaScriptライブラリを通じて利用できます。
HTML 4 では、ユーザー インターフェイスのキャプションを表すことを目的としたタグが導入され、ラベル タグの属性でコントロールの属性を指定することで、特定のフォーム コントロールに関連付けることができます。[ 1 ]これにより、ウィンドウのサイズが変更されてもラベルが要素に留まり、よりデスクトップのような機能（たとえば、ラジオ ボタンやチェックボックスのラベルをクリックすると、関連付けられた入力要素がアクティブになる）が可能になります。<label>idfor
HTML 5 では、他のインターフェース要素で表現できる入力タイプがいくつか導入されています。テキスト入力フィールドに基づいているものもあり、特定の一般的なデータの入力と検証を目的としています。これにはemail、メールアドレス、tel電話番号、number数値の入力などが含まれます。必須フィールド、フォームを含む Web ページが読み込まれたときにキーボードフォーカスを持つべきフィールド、フィールド内に表示されるがユーザー入力ではないプレースホルダー テキスト (検索語が入力される前に多くの検索入力フィールドに表示される「検索」テキストなど) を指定するための追加属性があります。これらのタスクは以前はJavaScriptで処理されていましたが、非常に一般的になったため、標準にサポートが追加されました。date入力タイプは、ユーザーが日付または日付範囲を選択できるカレンダーを表示します。[ 2 ] [ 3 ]また、入力タイプは、仕様に従って入力された値が色の正しい16 進数表現であるcolorかどうかをチェックするだけの入力テキストとして、またはカラー ピッカー ウィジェットとして表現できます(後者は、この属性をサポートするほとんどのブラウザで使用されているソリューションです) 。
HTML フォームに入力されたデータが送信されると、フォーム要素の名前と値がエンコードされ、GETまたはPOSTを使用してHTTPリクエスト メッセージでサーバーに送信されます。歴史的には、電子メールトランスポートも使用されていました。[ 5 ]デフォルトのMIME タイプ (インターネット メディア タイプ)、application/x-www-form-urlencoded は、一般的な URIパーセント エンコードルールの非常に初期のバージョンに基づいており、改行の正規化やスペースを " " の代わりに " " に置き換えるなどのいくつかの変更が加えられています。別のエンコードとして、インターネット メディア タイプmultipart/form-dataも利用可能で、POST ベースのファイル送信でよく使用されます。+%20
フォームは通常、さまざまなプログラミング言語で記述されたプログラムと組み合わせて使用され、開発者が動的なWebサイトを作成できるようにします。最も一般的な言語には、クライアントサイド言語とサーバーサイド言語の両方が含まれます。
サーバー上でフォームのデータを処理するためにどのプログラミング言語でも使用できますが、最も一般的に使用される言語はスクリプト言語です。スクリプト言語は、C言語などのプログラミング言語よりも強力な文字列処理機能を備えている傾向があり、また、バッファオーバーラン攻撃を防ぐのに役立つ自動メモリ管理機能も備えています。
ウェブサイトにおける事実上のクライアントサイドスクリプト言語はJavaScriptです。JavaScriptをドキュメントオブジェクトモデル（DOM）上で使用することで、ブラウザ内でウェブページを動的に作成・変更できるダイナミックHTMLという手法が実現します。
フォームと併用されるクライアントサイド言語には限界があるものの、フォームデータの事前検証や、サーバーサイドプログラムへの送信準備に役立つ場合が多い。しかし、こうした用途はHTML5の新しいinputフィールドタイプと属性に取って代わられつつあるrequired。
サーバーサイドコードは、技術的またはセキュリティ上の理由からクライアントサイドコードでは実行できない、動的なWebサイトを作成するためのさまざまなタスクを実行できます。これには、ログイン認証、データベースへのデータの取得と保存、スペルチェック、電子メールの送信などが含まれます。サーバーサイド実行がクライアントサイド実行よりも優れている大きな利点は、さまざまな機能を一貫性のある標準化された方法で実装するために異なるWebブラウザに依存するのではなく、機能をサーバーに集中できることです。さらに、サーバーサイド実行がクライアントから提供されたデータを信頼しないように設計され、 HTMLサニタイズなどの技術が含まれている場合、サーバー上でフォームを処理することでセキュリティが向上することがよくあります。サーバーサイドコードの欠点の1つはスケーラビリティです。すべてのユーザーに対するサーバーサイド処理はサーバー上で行われますが、クライアントサイド処理は個々のクライアントコンピュータで行われます。
ウェブ開発でインタラクティブなフォームを設計する際によく使用されるインタプリタ型言語には、 PHP、Python、Ruby、Perl、JSP、Adobe ColdFusionなどがあり、コンパイル型言語には、JavaやASP.NETと組み合わせたC#などがあります。
PHPはサーバーサイドの「プログラミング」によく使われる言語の一つで、 Webプログラミング専用に作られた数少ない言語の一つです。[ 6 ] [ 7 ]
HTMLフォームでPHPを使用するには、PHPスクリプトのURLをactionフォームタグの属性に指定します。ターゲットPHPファイルは、フォームで使用される属性の値に応じて、 PHPの変数$_POSTまたは関数を介してフォームから渡されたデータにアクセスします。以下は、フォームの内容を表示する基本的なフォームハンドラーPHPスクリプトです。$_GETmethodファーストネームページ上の入力フィールド：
フォーム.html
< ! DOCTYPE html > < html lang = " en " > <head> <title>フォーム</title> </head> <body> < form action = " form_handler.php " > <p> <label>名前: < input name = " first_name " / > </label> </p> <p> < button type = " submit " >送信</button> </p> </form> </body> </html>form_handler.php
<!DOCTYPE html> <?php // 外部変数 "first_name" の値を要求し、フィルタリングします。$firstName = filter_input ( INPUT_GET , "first_name" , FILTER_SANITIZE_STRING ); ?> < html lang = "en" > < head > < title >出力</ title > </ head > < body > < p > <?php echo "こんにちは、{ $firstName } !" ; /* 値を表示 */ ?> </ p > </ body > </ html >上記のサンプルコードは、PHP の関数を使用して、ユーザーの入力をページに挿入する前にサニタイズします。安全なフォームプロセッサでは、ユーザー入力をチェックせずにブラウザに単純に出力 (echo) することは避けるべきです。ユーザーが JavaScript コードを入力した場合、filter_input()<script>alert(1)</script>ファーストネームフィールドでは、ブラウザがスクリプトを実行します。form_handler.phpページは、開発者がコーディングしたかのように表示されます。この方法で悪意のあるコードが実行される可能性がありました。は PHP 5.2 で導入されました。以前の PHP バージョンのユーザーは、関数または正規表現を使用して、ユーザー入力を処理する前にサニタイズすることができました。filter_input()htmlspecialchars()
Perl は、 Web 開発でよく使われる言語の 1 つです。Perl スクリプトは、従来、共通ゲートウェイインターフェイス(CGI) アプリケーションとして使用されてきました。実際、Perl は CGI を記述する一般的な方法であるため、両者が混同されることもよくあります。CGI は Perl 以外の言語で記述することもできます (複数の言語との互換性は CGI プロトコルの設計目標です)。また、CGI を使用する以外にも、Perl スクリプトをWeb サーバーと連携させる方法があります( FastCGI、Plack、Apacheのmod_perlなど)。
Perl CGIはかつてWebアプリケーションを作成する非常に一般的な方法でした。しかし、今日では多くのWebホスティングサービスが実質的にPHPのみをサポートしており、Webアプリケーション開発者はそれらとの互換性を求めることが多くなっています。
上記のような形式を持つCGIモジュールを使用した最新のPerl 5 CGIは、次のようになるでしょう。
form_handler.pl
#!/usr/bin/env perl use strict ; use CGI qw(:standard) ;my $name = param ( "first_name" ); print header ; print html ( body ( p ( "こんにちは、$name!" ), ), );サーバーサイドスクリプトの中で最もシンプルで、最も一般的に必要とされるもののひとつに、送信されたフォームの内容をそのままメールで送信するスクリプトがあります。しかし、この種のスクリプトはスパマーに悪用されることが多く、現在広く使われているフォーム送信スクリプトの多くは、スパムメール送信のために乗っ取られる危険性があります。この種のスクリプトの中で最も人気のあるものの1つが、Matt's Script Archiveが作成した「FormMail.pl」でした。現在では、アップデートの不足、セキュリティ上の懸念、設定の難しさなどから、このスクリプトは新規開発ではあまり使われなくなっています。
一部の企業はフォームをホスティングサービスとして提供しています。通常、これらの企業は、ウェブページに埋め込むことができるフォームを作成およびホストするためのビジュアルエディタ、レポートツール、インフラストラクチャを提供します。[ 8 ]ウェブホスティング会社は、アドオンサービスとしてクライアントにテンプレートを提供します。他のフォームホスティングサービスは、ユーザーがサービスのコードをサイトの HTML に貼り付けることで、自分の Web サイトにインストールできる無料の問い合わせフォームを提供しています。
ティム・バーナーズ＝リーが1991年にHTMLを開発し、後に1993年に公開したとき[ 9 ] [ 10 ]、タグは18個でした[ 10 ] 。フォーム要素とフォームフィールドはこの最初のバージョンには含まれていませんでした。
実際、私たちが知っている「HTMLフォーム」は、一瞬にして、あるいは一人の人物によって発明されたものではありません。多くの人々、組織、そして複数のブラウザが、HTMLフォームの開発と、フォームタグをHTML 2.0の標準にすることに携わりました。[ 11 ] [ 12 ]
まず、HTML+ はDave Raggettによって開発されました。ほぼ同時期に、HTML フォームがViolaブラウザで初めて実装されました。[ 13 ]しかし、最大の推進力となったのはMosaic Browserでした。具体的には、NCSA Mosaic for X 2.0 です。なぜなら、1993 年 4 月にリリースされた最初の Mosaic バージョンではフォームが利用できなかったからです。[ 11 ]
Mosaic 2.0 によりフォームが広く利用可能になり、すぐにすべての企業が問い合わせフォームを欲しがるようになりました。この間、フォームタグは公式の HTML タグではありませんでしたが、ブラウザはそれでもそれらをサポートしていました。変化は 1995 年に HTML 2.0 で起こり、FORM、INPUT、SELECT、および TEXTAREA タグが HTML に追加されました。[ 12 ]