SYNCER

SYNCER

<form要素> - フォーム

公開日:

form要素はフォームを表す要素です。この要素を利用して、ユーザーが入力した値をサーバーサイドに送信できます。

概要

名前
form
カテゴリー
Flow content
Palpable content
配置できる場所
Flow contentが期待される場所。
コンテンツモデル
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLFormElement
仕様書
https://html.spec.whatwg.org/multipage/forms.html#the-form-element

属性

accept-charset

フォーム送信に利用する文字エンコーディング。

action

送信先となるサーバーサイドのアドレス。

autocomplete

オートフィル機能を有効にするか否か。フォーム内の全ての入力インターフェイスのデフォルト値となる。

enctype

フォーム送信に使用されるエンコードタイプ。列挙属性で、欠損値はapplication/x-www-form-urlencoded

application/x-www-form-urlencoded
URLエンコードしたデータの送信。
multipart/form-data
マルチパート形式。ファイルのアップロード。
text/plain
プレーンテキストの送信。

method

送信時のリクエストメソッド。列挙属性で、欠損値はget

get
GETメソッド。
post
POSTメソッド。
dialog
ダイアログ用のフォーム。ボタンを押した時にdialog要素が閉じて、イベントにフォームデータが渡される。

name

フォームの名前。JavaScriptでDOMを操作する時などに利用する。

novalidate

この属性を付けると、送信時に入力内容の検証を行なわない。論理属性。

target

フォームを送信するブラウジングコンテキスト(ウィンドウ)の名前。a要素のtarget属性と同じ。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

form要素の使い方は、フォームコントロールの要素(input要素select要素textarea要素button要素)をまとめて囲むだけです。送信先のURLはaction属性、リクエスト方式はmethod属性で指定して下さい。

HTML

<!-- 各フォームコントロールをform要素で囲む -->
<form action="./form.php" method="get">
	<p>名前: <input type="text" name="name"></p>
	<p>年齢: <input type="text" name="age"></p>
	<p><button>内容を送信</button></p>
</form>

デモを開く

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<form要素> - フォーム</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/form/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>form要素は、フォームを設置するための要素です。</p>

<form action="./form.php">
	<p>名前: <input type="text" name="name" value="SYNCER"></p>
	<p>年齢: <input type="number" name="age" value="3"></p>
	<p><button>内容を送信</button></p>
</form>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>