【html】formについて分かりやすく解説します

form フロントエンド
記事内に広告が含まれています。

はじめに

HTMLのform要素はウェブサイトでユーザーと対話するための必須要素です。

例えばお問い合わせフォームなんかがいい例ですね。

しかし、ただフォームを設置するだけでは実力は発揮できません。

この記事では、フォームの各属性について詳しく解説し、実装例も合わせてご紹介します。

なお、全ての属性において、何も設定しなかった場合の挙動も書いてあるので、参考にしてください。

HTMLフォームの基礎

HTMLフォームは、ユーザーが情報を入力しウェブサーバへ送信する領域を提供します。

フォーム内にはテキストボックス、パスワードフィールド、ファイルアップロード、送信ボタンなどが含まれており、バックエンド側ではこれらの情報を受け取り処理することで、ログイン、注文、問い合わせなど多様な機能を実現できます。

フォームを構成する基本属性

フォームの動作や見た目、送信内容の形式は各種属性によって決定されます。

次の章から、特に重要な属性を順位別に詳しく解説します。

1. action 属性

  • 目的: ユーザーが入力した情報を送信する先のURLを指定します。
  • ポイント: action属性が指定されていない場合、フォームは「現在のページ」にデータを送信します。
<!-- action 属性未指定の場合、同一ページにデータが送信されます --> 
<form method="post"> <!-- 入力フィールドなど --> </form>

2. method 属性

  • 目的: フォーム送信時に使用するHTTPメソッドを指定します。
  • 主な値:
    • get: データはURLに付加され、主に情報取得に向いています(既定値)。
    • post: データはリクエスト本体として送信され、セキュアなデータ送信に向いています。
    • dialog: 対話型ダイアログ内での利用に特化した特殊な値です。
<!-- method 属性が未指定の場合、GETメソッドで送信されます -->
 <form action="/submit"> <!-- 入力フィールドなど --> </form>

3. enctype 属性

  • 目的: 送信するフォームデータのエンコード方式を指定します。
  • 主な値:
    • application/x-www-form-urlencoded(既定値)
    • multipart/form-data:ファイル送信時に利用
    • text/plain:デバッグ用途
<!-- ファイルアップロード時は multipart/form-data を使用 --> 
<form action="/submit" method="post" enctype="multipart/form-data"> 
<!-- 入力フィールドなど --> </form>

4. target 属性

  • 目的: フォーム送信後のレスポンス表示先を制御します。
  • 主な値:
    • _self: 現在のウィンドウまたはタブ(既定値)
    • _blank: 新しいウィンドウまたはタブで表示
    • _parent: 親フレームで表示
    • _top: 最上位のフレームで表示
<!-- target 属性で送信結果の表示先を指定可能 --> 
<form action="/submit" method="post" target="_self">
 <!-- 入力フィールドなど -->
 </form>

5. name 属性

  • 目的: JavaScriptや他のスクリプトからフォームを識別するための一意な名前を設定します。
  • 注意: 指定がない場合、フォームの識別が難しくなります。
<!-- name 属性でフォームに固有の識別名を付与 --> 
<form action="/submit" method="post" name="contactForm"> 
<!-- 入力フィールドなど --> 
</form>

6. autocomplete 属性

  • 目的: ブラウザーによるオートコンプリート機能を制御します。
  • 主な値:
    • on: 補完を有効にする(既定値)
    • off: 補完を無効にする
<!-- autocomplete 属性でユーザーの入力支援を調整 -->
 <form action="/submit" autocomplete="on">
<!-- 入力フィールドなど --> 
</form>

7. rel 属性

  • 目的: フォームが生成するリンクに対してリレーションを付与。SEOやクロールにおける意味付けに利用できます。
<!-- rel 属性は通常省略されますが、必要に応じて設定可能 --> 
<form action="/submit" rel="noopener"> 
<!-- 入力フィールドなど --> 
</form>

実践!フォーム実装例

すべての基本属性を活用した実装例をご紹介します。下記のコードスニペットは、ユーザー名、パスワード、そしてファイルアップロードを含むフォームです。

<form action="/submit" method="post" enctype="multipart/form-data" target="_self" name="myForm" autocomplete="on">
    <input type="text" name="username" placeholder="ユーザー名">
    <input type="password" name="password" placeholder="パスワード">
    <input type="file" name="upload">
    <button type="submit">送信</button>
</form>

この例では、各属性が以下のように機能します:

  • action: 明確に送信先URL(/submit)が設定されています。
  • method: データは POST メソッドで送信され、セキュアな方法で情報を伝えます。
  • enctype: ファイルアップロードに対応するため、multipart/form-data が使用されています。
  • target: 送信後のレスポンスは同じウィンドウで表示されます(_self)。
  • name と autocomplete: フォームの識別やユーザー入力補助のために設定されています。

HTMLフォームの活用ポイントとアクセシビリティ

  • バリデーションの実装
    フォーム送信時に、HTML5の novalidate 属性を使えば検証をスキップ可能です。また、CSSの :valid や :invalid 疑似クラスを利用して、入力状態に応じたスタイリングもできます。
  • アクセシビリティへの配慮
    フォームは通常、ARIAの form ロールを持ち、特定の役割(例:search や presentation)を明示できるため、スクリーンリーダー対応もスムーズに行えます。
  • SEOのポイント
    フォームはユーザーエクスペリエンスに直接影響します。入力がスムーズで直感的なフォームは、ユーザーの滞在時間の向上につながり、結果的にSEO評価の改善が期待できます。
  • 適切な属性設定とアクセシビリティを意識することで、サイト全体の評価もアップします。

まとめ

いかがだったでしょうか。

HTMLフォームは、ウェブアプリケーションやサイトの基盤となる要素です。

基本属性を正しく理解・実装することで、ユーザーとの円滑なコミュニケーションが実現でき、セキュリティやアクセシビリティ、そしてSEOの観点からも大きな効果を発揮します。

この記事が、あなたのウェブ制作におけるフォーム実装の参考となれば幸いです。

よいWeb開発ライフを!

参考サイト

: フォーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN
は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。

タイトルとURLをコピーしました