「HTML - formタグ」の版間の差分

← 古い編集新しい編集 →

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
 == 概要 ==
+<br><br>
+== formタグ ==
+<form>タグは、Webページ上でユーザからデータを収集して、サーバに送信するためのHTMLタグである。<br>
+<br>
+ <syntaxhighlight lang="html">
+ <!-- 基本的な使用例 -->
+ <form action="/submit" method="post" name="contactForm">
+   <!-- ここにフォーム要素を配置 -->
+ </form>
+ </syntaxhighlight>
+<br>
+<u>※注意</u><br>
+* ネストして使用することは推奨されない。
+* JavaScriptでフォームの送信を制御する場合は、onsubmitイベントが使用可能である。
+<br>
+==== 属性 ====
+===== action属性 =====
+フォームのデータを送信する先のURLを指定する。<br>
+ <syntaxhighlight lang="html">
+ <form action="/submit">
+ </syntaxhighlight>
+<br>
+===== method属性 =====
+データの送信方法を指定する。<br>
+* GET
+*:URLにデータを付加して送信する。(データはURLに表示)
+* POST
+*: HTTPリクエストのボディにデータを含めて送信する。(データは非表示)
+ <syntaxhighlight lang="html">
+ <form method="post">
+ </syntaxhighlight>
+<br>
+===== enctype属性 =====
+フォームデータのエンコード方式を指定する。<br>
+* application/x-www-form-urlencoded  (デフォルト値)
+* text/plain
+*: プレーンテキストとして送信する。
+* multipart/form-data
+*: ファイルアップロード時に使用する。
+ <syntaxhighlight lang="html">
+ <form enctype="multipart/form-data">
+ </syntaxhighlight>
+<br>
+===== name属性 =====
+JavaScript等で参照する場合、フォームの名前を指定する。<br>
+ <syntaxhighlight lang="html">
+ <form name="loginForm">
+ </syntaxhighlight>
+<br>
+===== target属性 =====
+フォーム送信後の結果をどこに表示するかを指定する。<br>
+* _self
+*: 同じウィンドウ、同じタブ (デフォルト)
+* _blank
+*: 新しいタブ、新しいウィンドウ
+* _parent
+*: 親フレーム
+* _top
+*: 最上位フレーム
+ <syntaxhighlight lang="html">
+ <form target="_blank">
+ </syntaxhighlight>
+<br>
+===== autocomplete属性 =====
+フォームの自動補完機能の有効 / 無効を指定する。<br>
+* 値
+*: on または off
+ <syntaxhighlight lang="html">
+ <form autocomplete="off">
+ </syntaxhighlight>
+<br>
+===== novalidate属性 =====
+Webブラウザのデフォルトの検証機能を無効にする。<br>
+ <syntaxhighlight lang="html">
+ <form novalidate>
+ </syntaxhighlight>
+<br>
+===== accept-charset属性 =====
+フォームの文字エンコーディングを指定する。<br>
+ <syntaxhighlight lang="html">
+ <form accept-charset="UTF-8">
+ </syntaxhighlight>
 <br><br>