formの使い方についてまとめ

formの概要

formとは、フォーム関連の要素をとりまとめ、ユーザーが入力・選択したデータをサーバーに送信する要素です。inputタグ、selectタグ、textareaタグなどのフォーム部品を配置してフォームを作ります。 入力された値はmethod属性で指定した転送方法とenctype属性で指定したデータ形式でサーバへ送信され、action属性で送信先のURLを指定します。

formのカテゴリー

formに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure footer h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)

入れられるタグのカテゴリー・モデル

formに使える属性

属性とは<form> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id 概要 要素に対してID固有の識別名を付けることができます。
属性の値 英字から始まる英数字
class 概要 要素に対して分類名を付けることができます。
属性の値 英字から始まる英数字
style 概要 要素に対して直接スタイルを指定することができます。
属性の値 スタイルシートのコード

formに使える属性

accept-charset 概要 フォーム送信時の文字コードを指定します。
属性の値 文字コード(空白文字区切り)
action 概要 フォーム送信時のURLを指定します。この値は、buttonまたはinputformaction属性によって上書きできます。
属性の値 URL(空文字は不可)
autocomplete 概要 フォーム内のオートコンプリート機能のデフォルト値を指定します。この設定はフォーム関連要素のautocomplete属性で上書きできます。
属性の値 onまたはoff
enctype 概要 method属性の値がpostのとき、フォームのデータを送信する際のデータ形式をMIMEタイプで指定します。
属性の値 application/x-www-form-urlencodedまたはmultipart/form-dataまたはtext/plain
method 概要 フォームのデータを送信する際にブラウザが使用するHTTPメソッドを指定します。初期値は="get"です。
属性の値
  • ="post" フォームのデータはHTTP通信のボディデータとして送信されます。
  • ="get" フォームのデータはリクエストURLの末尾に追加されて送信されます。
name 概要 フォームの名前を指定します。ドキュメント内のフォームごとに固有の名前をつける必要があります。JavaScript等で参照されます。
属性の値 テキストで指定(空文字列は不可)
novalidate 概要 フォームを送信する際に、入力(選択)内容チェックを行わないことを示します。
属性の値 論理属性(属性名だけで指定可能)
target 概要 フォームデータの送信結果の開き方を指定します。この値は、<button>または<input>formtarget属性によって上書きすることが可能です。
属性の値
  • ="_self" 現在のウィンドウ、現在のフレームに開く。属性が指定されていない場合の既定値です。
  • ="_blank" 新規ウィンドウで開く
  • ="_parent" 親ウィンドウ、親フレームに開く。
  • ="_top" ウィンドウ全体に開く。フレームは解除する。親要素がない場合、="_self"と同じ振る舞いをします。

スポンサードサーチ

<form>の使い方

ブラウザ対応状況

ブラウザの対応(PC)
Chrome あり
Safari あり
Internet Explorer あり
Edge あり
Firefox あり
Opera あり
ブラウザの対応(SP)
Chrome あり
Safari あり
Samsung Internet あり

WORK REQUEST

CONTACT