- HTMLの、<form>タグを使うと、ユーザーが入力したデーターをサーバーに送ることができます。
- formでは少なくとも2つの属性を与えます。
- ひとつは「action」。これで、データの送り先を指定します。
- そして「method」。これでデータをやり取りする形式を決めます。
- 受け取ったデータをサーバー側では、phpが「$_GET['name']」という変数で管理します。
- 入力フォーム
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="getform.php" method="get">
<p>お名前 <input type="text" name="your_name"></p>
<p>ご年齢 <input type="text" name="your_age"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>
- 出力の表示。
- サーバで変数として管理されている入力内容を引っ張ってきます。
<?php
$your_name=$_GET['your_name'];
$your_age=$_GET['your_age'];
?>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>getform</title>
</head>
<body>
<?php echo ($your_name); ?>
</body>
</html>
- ブラウザのアドレスには入力した内容が丸見えになっている。これは「get」を使ったため。
- たとえば以下の文を入力フォームに入力すると…
- <h1>このサイトの管理人は異常者です</h1><p>こんなサイトで買い物するのはやめましょう。</p><p><a href="https://www.w3.org/TR/css-position-3/">おすすめの店</a>
- コードがそのまま実行されてしまいます。
- コードはただの文字列として表示されます。
概要
HTML form 要素 (
<form>
) は、ユーザが Web サーバーに情報を送信できるようにするインタラクティブなコントロールを含むドキュメントセクションを表します。
<form>
要素には、:valid
及び、:invalid
の 2 つの CSS 擬似クラスが使用可能です。
コンテンツカテゴリ フローコンテンツ、パルパブルコンテンツ 許可された内容 フローコンテンツ。ただし、 <form>
要素の中に別の<form>
要素を内包することは許可されていません。タグの省略 不可。開始と終了タグの両方が必要。 許可された親要素 フローコンテンツを受け入れるすべての要素 DOM インターフェイス HTMLFormElement
属性
他のすべての HTML要素と同じく、この要素はグローバル属性をサポートしています。
accept
HTML 4- サーバが受け付けるコンテンツ・タイプのカンマ区切りリスト。
accept-charset
- サーバーを受け付ける文字エンコーディングのリスト。リストはスペースまたはカンマで区切ることができます。ブラウザは、それらがリストされている順序を優先順位として使用します。デフォルト値である予約語 "UNKNOWN" は、form 要素を含むドキュメントのエンコーディングと同じであることを示します。
以前のバージョンの HTML では、さまざまな文字エンコーディングをスペースまたはカンマで区切ることができました。これは HTML5 では当てはまらず、スペースだけが適切です。action
- フォーム経由で送信された情報を処理するプログラムの URI。 この値は
<button>
または<input>
のformaction
属性 によって上書きする事が可能です。autocapitalize
- これは iOS 版 Safari Mobile で使用する非標準属性であり、子孫のテキスト型フォームコントロールでユーザが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。
autocapitalize
属性を個別にフォームコントロール子孫要素で指定した場合は、フォーム全体に設定したautocapitalize
より優先します。非推奨とされていない値は、iOS 5 以降で使用できます。既定値はsentences
です。以下の値を指定できます。autocomplete
HTML5- input 要素がデフォルトで、ブラウザによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の
autocomplete
属性で上書きできます。以下の値が指定可能です。ほとんどの現行ブラウザ (Firefox 38+、Google Chrome 34+、IE 11+) では autocomplete 属性を設定しても、ブラウザのパスワードマネージャがユーザにログイン情報 (ユーザ名やパスワード) を保存したいかを問い合わせる、またユーザが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません。The autocomplete attribute and login fields をご覧ください。
off
: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。on
: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。enctype
method
属性の値がpost
であるとき、この属性はフォームをサーバに送信する際に使用する、コンテンツの MIME type を示します。以下の値が指定可能です。
application/x-www-form-urlencoded
: 初期値。属性を指定していない場合、この値が使用されます。multipart/form-data
:type
属性で "file" を指定した<input>
要素のために使用する値です。text/plain (HTML5)
この値は、
<button>
または<input>
のformenctype
属性によって上書きする事が可能です。method
- フォームを送信する際にブラウザが使用する HTTP メソッドです。以下の値が指定可能です。
post
: HTTP POST メソッドに相当します。フォームのデータはボディに収めてサーバに送信します。get
: HTTP GET メソッドに相当します。フォームのデータは '?' をセパレータとしてaction
属性の URI に追加して、その結果となる URI をサーバに送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。この値は、
<button>
または<input>
のformmethod
属性によって上書きする事が可能です。name
- フォームの名前です。HTML 4 では推奨されていません (代わりに
id
を用いるべきです)。name 属性は文書内で固有のものでなくてはならず、また常に何らかの内容を持たねばなりません。novalidate
HTML5- フォームが送信された時にバリデートしない事を示す真偽値です。もしこの属性が指定されていない(つまりバリデートされる)場合、この設定の初期値は
<button>
もしくは<input>
のformnovalidate
属性によって上書きする事が可能です。target
- フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、ブラウズ・コンテキスト の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます:
_self
: 応答を現在と同じ HTML 4 フレーム (または HTML5 ブラウズ・コンテキスト) に表示します。この値は、属性が指定されていない場合のデフォルト値です。_blank
: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 のブラウズ・コンテキストに読み込みます。_parent
: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親ブラウズ・コンテキストに読み込みます。親要素がない場合、このオプションは_self
と同じ振る舞いをします。_top
: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルのブラウズ・コンテキストに読み込みます (現在のブラウズ・コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは_self
と同じ振る舞いをします。- iframename: 応答を、名前のついた
<iframe>
に読み込みます。