WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > HTMLタグ・リファレンス > HTMLタグ一覧(ABC順) > <form>「入力フォーム域」

<form> 「入力フォーム域」[読み方:フォーム]

<form>~</form>の間に<input><select><textarea>などの入力部品を配置することで、サーバのプログラム(CGIなど)に入力内容を引き渡すことが出来ます。
1ページに複数の<form>を指定することが出来ます。

HTML規格HTML4.01HTML5
使用可否
広告

<form> の仕様

カテゴリー使用できる場所(親要素)コンテンツモデル(子要素)タグ省略
フローコンテンツ
パルバブルコンテンツ
フローコンテンツを子要素にもてる場所フローコンテンツ
但し、<form>は不可
不可

<form> の属性

【構文】
<form href="送信先URI" name="フォーム名" target="_blank" ・・・>
入力フォーム域
</form>
属性意味値のサンプルなど
accept-charset="文字コード"送信する文字コード「UTF-8」「Shift_JIS」など
action="URI"フォームを送信するURL「sample.cgi」
「http://www.cman.co.jp/abc.cgi」など
autocomplete="on" or "off" オートコンプリートの利用有無
※HTML5で追加
意味
onオートコンプリート有効
(デフォルト値)
offオートコンプリート無効
enctype="値" 送信時のエンコーディング方法
application/x-www-form-urlencoded
(デフォルト値)
multipart/form-data
text/plain
method="get" or "post"送信時のHTTPプロトコル「get」、「post」、「dialog」
name="名前"フォームの名前「form01」「f001」など
novalidate指定するとバリデーションチェックを行わない
※HTML5で追加
「novalidate」
target="値"フォーム送信後のページ表示方法
意味
_blank新規のウィンドウに表示
_self現在のウィンドウに表示
_parent親ウィンドウに表示
_top現在のウインドウに表示
(フレームは解除される)
任意名任意のウィンドウに表示
rel="値"リンクの種類「noreferrer」、「noopener」、「opener」
廃止された属性
  • accept
グローバル属性
  • accesskey
  • autocapitalize
  • autofocus
  • class
  • contenteditable
  • dir
  • draggable
  • enterkeyhint
  • hidden
  • id
  • inert
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • nonce
  • popover
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate
  • writingsuggestions
イベント属性
ページTOP

<form>タグのサンプル

入力内容の送信
<form action="http://www.cman.jp" name="f01">
<table>
<tbody>
<tr><th>値</th><th>意味</th></tr>
<tr>
 <td>テキスト</td>
 <td><input type="text" name="s1" value="テキスト入力欄"></td>
</tr>
<tr>
 <td>パスワード</td>
 <td><input type="password" name="s2" value="パスワード入力欄"></td>
</tr>
<tr>
 <td>ラジオボタン</td>
 <td><input type="radio" name="s3" value="ラジオボタン"></td>
</tr>
<tr>
 <td>チェックボックス</td>
 <td><input type="checkbox" name="s4" value="チェックボックス"></td>
</tr>
<tr>
 <td>隠しデータ(非表示)</td>
 <td><input type="hidden" name="s6" value="NoScreen"> ;</td>
</tr>
<tr>
 <td>オプションメニュー</td>
 <td><select name="s7">
  <option value="Sample001">Sample001</option>
  <option value="Sample002">Sample002</option>
  <option value="Sample003">Sample003</option>
 </select></td>
</tr>
<tr>
 <td>オプションメニュー</td>
 <td><select name="s8" size="3">
  <option value="Sample001">Sample001</option>
  <option value="Sample002">Sample002</option>
  <option value="Sample003">Sample003</option>
 </select></td>
</tr>
<tr>
 <td>テキストエリア<br>(複数行入力)</td>
 <td><textarea name="s9" cols="30" rows="3">複数行の入力</textarea></td>
</tr>
<tr>
 <td>リセットボタン</td>
 <td><input type="reset" value="リセットボタン"></td>
</tr>
<tr>
 <td>汎用ボタン</td>
 <td><input type="button" value="汎用ボタン"></td>
</tr>
<tr>
 <td>画像ボタン</td>
 <td><input type="image" src="../../../image/image_button.gif" alt="送信ボタン"></td>
</tr>
<tr>
 <td>送信ボタン</td>
 <td><input type="submit" value="送信ボタン"></td>
</tr>
</tbody>
</table>
</form>
意味
テキスト
パスワード
ラジオボタン
チェックボックス
隠しデータ(非表示)
オプションメニュー
オプションメニュー
テキストエリア
(複数行入力)
リセットボタン
汎用ボタン
画像ボタン
送信ボタン
ファイルのアップロード
<form action="http://www.cman.jp" name="f01" enctype="multipart/form-data">
<table>
<tbody>
<tr>
 <td>UPLOADファイル</td>
 <td><input type="file" name="file1" style="width:300px"></td>
 <td><input type="submit" value="アップロードする"></td>
</tr>
</tbody>
</table>
</form>
UPLOADファイル
ページTOP

留意事項

  • method="GET"」には文字数制限があります。送信するデータ量が多い場合は「method="POST"」を使用する必要があります。
    (例)Microsoft Internet Explorer では、2048文字までの制限となっています。
    ※ブラウザにより異なります。
  • 1ページに複数の<form>を指定することができます。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン