<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>