formタグとは?|HTML文書に入力・送信フォームを設置しよう

formタグとは?|HTML文書に入力・送信フォームを設置しよう
リンゴ
ユーザーが気軽にコンタクトをとれるように問い合わせフォームを設置したいけど、なんか難しそうだな…
博士
リンゴくん、そんなときは<form>タグを使えば、簡単にフォームを作成できるぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<form>タグとは

 

<form>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / パルパブル・コンテンツ
利用場所tr要素の子要素として
内容フロー・コンテンツ(ただし、form要素を子要素とすることは不可)


 
 
<form>タグは、問い合わせやアンケートなど、ユーザーがデータを入力して送信する仕組みをWebページに設置する際に使用するタグです。

<form>タグの中には、フォームを構成するさまざまな部品を配置していきます。
 
 

リンゴ
自分好みの問い合わせフォームが作れるってことですね!
 
 

accept-charset属性

データを送信するときの文字エンコーディングを指定します。
通常フォームで送信されるデータはページのエンコーディングと同じになりますが、accept-charset属性を指定することで、異なるエンコーディングに変換して送信できるようになります。
 
 

博士
複数の文字エンコーディングを指定したいときは、それぞれを空白スペースで区切ろう。
この場合、指定した順に優先順位が付けられるぞ。
 
 

使用例

 
 

スポンサーリンク

action属性

フォームに入力されたデータを処理する、PHPやCGIなどのプログラムのURLを指定します。
 
 

使用例

 
 
input要素button要素にformaction属性が指定されている場合は、そのformaction属性の値が優先されます。
 
 

autocomplete属性

テキスト入力フィールドなどで、オートコンプリート機能を有効にするかどうかを指定します。

オートコンプリート
以前に入力した内容をブラウザが覚えておき、次回同じフォームにアクセスしたときに、入力候補を予測して自動的に表示する機能。
 
 
指定できる値は、「on」「off」のどちらかです。
autocomplete属性がない場合は、「autocomplete=”on”」として扱われます。
 
 

使用例

 
 

スポンサーリンク

enctype属性

データを送信するときに、どのような形式にエンコードするのかを指定します。
指定できる値は以下の3種類です。

  • application/x-www-form-urlencoded
    デフォルト
  • multipart/form-data
    ファイルを添付するようなフォーム
  • text/plain
    テキストのみのフォーム

 
 
enctype属性がない場合は、「enctype=”application/x-www-form-urlencoded”」として扱われます。
 
 

使用例

 
 

method属性

データをどのような方法で送信するかを指定します。
指定できる値は以下の2種類です。

  • get
    action属性で指定したURLの後に「?」とフォームのデータを追加して送信(デフォルト)
  • post
    フォームのデータのみを本文として送信

 
 
method属性がない場合は、「get」として扱われます。
 
 

使用例

 
 
input要素やbutton要素にformaction属性が指定されている場合は、そのformaction属性の値が優先されます。
 
 

スポンサーリンク

name属性

フォームの名前を指定します。
同じ文書中の他のフォームと重複した名前は指定できません。
 
 

使用例

 
 
博士
name属性の値には空文字は指定できんぞ。
 
 

novalidate属性

フォームを送信するときに、入力されたデータが適切かどうかの検証を無効にすることができます。

検証が有効になっている場合、フォームの送信時に入力内容の妥当性がチェックされます。
例えば、入力必須の項目が未入力になっている場合には、エラーメッセージが表示されて送信できなくなります。

novalidate属性を指定すると、このチェック機能を無効でき、項目が未入力のままでも送信を可能にすることができるようになります。
 
 

使用例

 
 

スポンサーリンク

target属性

データの送信結果をどのウィンドウ(またはフレーム)に表示するかを指定できます。
 
 

使用例

 
 
博士
指定できる値はa要素と同じじゃ。
 
 

フォームのサンプルコード

 
 

表示例

趣味

 
 

スポンサーリンク

まとめ

<form>タグは、問い合わせやアンケートなどの入力・送信フォームを作成する際に使用するタグです。
属性を指定することで、フォームを構成するさまざまな部品を配置することができます。
 
 

博士
ページの内容に応じて、最適なフォームを作成しよう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








formタグとは?|HTML文書に入力・送信フォームを設置しよう