<form>タグの解説
<form>
は、ウェブサーバーに情報を送信するための入力フォームを作成します。子要素に色々なパーツを埋め込む事で、ユーザーが操作可能な機能を提供します。
この機能を使いこなすには、クライアントのリクエストとサーバーのレスポンスを理解する必要があります。各パーツの詳細は関連する要素のページを参照して下さい。
<form>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<form>要素に指定できる属性
action
- フォームから送られるデータを処理するプログラムのURLを指定します。この値は、
<button>
や<input type="submit">
などのformaction
属性で上書きできます。また、method
属性にdialog
の値が設定された場合は無視されます。 method
- ブラウザがフォーム送信時に使用するHTTPメソッドを指定します。有効な値は三種類で、
get
、post
、dialog
となります。この値は、<button>
や<input type="submit">
などのformmethod
属性で上書きできます。 target
- フォームを送信した後に受け取ったレスポンスを表示する位置を指定します。初期値は
_self
で、送信前と同じウィンドウやタブで応答します。新しいウィンドウやタブで開きたい場合は_blank
、フレームなどの親子関係がある環境でひとつ上位に移動したい場合は_parent
、最上位に表示させたい場合は_top
"を与えます。 enctype
method
属性の値がpost
のとき、サーバーに送信するデータのMIMEタイプを指定します。この値は、<button>
や<input type="submit">
などのformenctype
属性で上書きできます。novalidate
- フォームを送信するときに検証しないことを指示します。この属性が書かれていない場合、
<button>
や<input type="submit">
などのformnovalidate
属性で上書きできます。 accept-charset
- サーバーが受け付ける文字のエンコーディングを空白区切りで列挙します。
autocomplete
- ブラウザの入力補完を受け付けるかどうかの指定を行います。この値は
on
かoff
の二種類です。これは必ずしも作動するわけではなく、ブラウザの仕様に依存します。 name
- フォームに名称を与えます。この値は他のフォームと競合してはいけません。
rel
- フォームが存在する文書と送信先のリソースとの関係を表します。注釈を表す値には
external
、nofollow
、opener
、noopener
、noreferrer
があります。リンク種別を表す値にはhelp
、prev
、next
、search
、license
があります。これらの値を空白区切りのリストで指定します。 - グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<form>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。入力・送信フォームの中には様々なデータフィールドやパーツを埋め込むことができます。最終的にクライアントからサーバーへデータを送る方法と場所を<form>
で指定します。
<form action="URL" method="type">
<input type="value" name="value">
<button>送信<button>
</form>
フォームに色々なパーツを配置した時の参考例です。各パーツの装飾はブラウザの既定値で表示されます。これをサイトのデザインに合わせたい場合はスタイルシートを使用します。
<form action="#####" method="post">
<div>
名前:
<input type="text" name="name" size="30">
</div>
<div>
性別:
<input type="radio" name="gender" value="m">男
<input type="radio" name="gender" value="w">女
</div>
<div>
端末:
<input type="checkbox" name="device" value="pc">PC
<input type="checkbox" name="device" value="i">Docomo
<input type="checkbox" name="device" value="e">au
<input type="checkbox" name="device" value="s">SoftBank
</div>
<div>
血液型:
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</div>
<div>
感想:
<textarea name="comment" rows="4" cols="40">感想があれば書いて下さい。</textarea>
</div>
<div>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</div>
</form>