HTML <form> タグ

定義と使用法

<form> タグはユーザーからの入力を受け入れるHTMLフォームを作成するために使用されます。

<form> 要素は以下のいずれかの表单要素を含むことができます：

も参照してください：

HTMLチュートリアル：HTMLフォームと入力

HTML DOMリファレンスマニュアル：フォームオブジェクト

CSSチュートリアル： フォームのスタイル設定

例

例1

二つの入力フィールドと送信ボタンを持つHTMLフォーム：

<form action="/action_page.php" method="get">
  <label for="fname">名：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">姓：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="送信">
</form>

自分で試してみる

例2

チェックボックス付きのHTMLフォーム：

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1">私に一辆の自転車があります</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2">私に一辆の車があります</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3">私に一艘の船があります</label><br><br>
  <input type="submit" value="送信">
</form>

自分で試してみる

例 3

ラジオボタンのHTMLフォーム：

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="送信">
</form>

自分で試してみる

属性

属性 値 説明
accept-charset 文字セット フォームを送信時に使用する文字コードを指定します。
action URL フォームを送信時にフォームデータをどこに送信するかを指定します。
autocomplete
  • on
  • off
 フォームに自動完了機能を有効にするかどうかを指定します。
enctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 フォームデータをサーバーに送信する際に、フォームデータをどのようにエンコードするかを指定します。
method
  • get
  • post
 フォームデータを送信する際に使用するHTTPメソッドを指定します。
name テキスト フォームの名前を指定します。
novalidate novalidate フォームを送信時にフォームを検証しないように指定します。
rel
  • external
  • help
  • license
  • next
  • nofollow
  • noopener
  • noreferrer
  • opener
  • prev
  • search
 リンクリソースと現在のドキュメントの関係を定義します。
target
  • _blank
  • _self
  • _parent
  • _top
 フォームを送信した後にどこに応答を表示するかを定義します。

グローバル属性

<form> タグはサポートしています HTMLのグローバル属性。

イベント属性

<form> タグはサポートしています HTMLのイベント属性。

デフォルトの CSS 設定

ほとんどのブラウザでは以下のデフォルト値で表示されます <form> 要素：

form {
  display: block;
  margin-top: 0em;
}

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート