【HTML5】formタグとは？使い方についてまとめ

formに使える属性

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

よく使うグローバル属性

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

グローバル属性一覧はこちら

formに使える属性

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

スポンサードサーチ

<form>の使い方

<form action="confirm.php" method="get">
    <div class="form_parts">
        <label for="contactName">お名前</label>
        <input id="contactName" type="text" name="yourName" required>
    </div>
    <div class="form_parts">
        <label for="contactEmail">メールアドレス</label>
        <input id="contactEmail" type="email" name="yourEmail" required>
    </div>
    <div class="form_parts">
        <label for="contactText">お問い合わせ内容</label>
        <textarea id="contactText" rows="5" placeholder="お問い合わせ内容を入力してください。"></textarea>
    </div>
    <button type="submit">送信する</button>
</form>

ブラウザ対応状況

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

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

formの概要

formのカテゴリー

コンテンツカテゴリー

コンテンツモデル

formに入れられるタグ一覧

タグ早見表

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

formに使える属性

よく使うグローバル属性

formに使える属性

<form>の使い方

お問い合わせフォームの例

ブラウザ対応状況