Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【HTML Living Standard】form要素の使い方

form要素の使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

formオブジェクトは、ユーザーからの情報入力を受け付け、サーバーへ送信するための領域を定義するHTML要素を表すオブジェクトです。Webサイトにおいて、お問い合わせフォーム、ログインフォーム、検索フォームなど、ユーザーがデータを入力し、それをWebサーバーに送る際に必ず使用されます。

この要素の内部には、テキスト入力欄の<input type="text">、パスワード入力欄の<input type="password">、複数行テキスト入力欄の<textarea>、選択肢を提供する<select>、そしてデータを送信する<button type="submit">といった様々なフォームコントロール要素を配置します。

formオブジェクトにはいくつかの重要な属性があります。action属性は、フォームが送信されたときにデータが送られるサーバー側のURLを指定します。method属性は、データの送信方法を定義し、主にHTTPのGETまたはPOSTメソッドを使用します。GETはURLのクエリパラメータとしてデータを渡し、POSTはHTTPリクエストのボディにデータを埋め込んで送信します。enctype属性は、データのエンコード形式を指定するもので、特にファイルアップロードを行う際にはmultipart/form-dataを設定する必要があります。その他、target属性でフォーム送信後に結果を表示する場所を指定したり、autocomplete属性でブラウザの自動入力機能の有効・無効を制御したり、novalidate属性でブラウザによる標準のフォーム検証機能を無効にしたりできます。

formオブジェクトは、ユーザーとWebアプリケーション間の重要な接点であり、入力されたデータを安全かつ効率的にサーバーへ送信するための基盤となります。Webサービス開発において、ユーザーからの入力を受け付けるための必須の要素です。

公式リファレンス: <form>: The Form element

構文(syntax)

1<form action="/submit-data" method="post">
2  <input type="text" name="exampleInput">
3  <button type="submit">送信</button>
4</form>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

関連コンテンツ