【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サービス開発において、ユーザーからの入力を受け付けるための必須の要素です。
構文(syntax)
1<form action="/submit-data" method="post"> 2 <input type="text" name="exampleInput"> 3 <button type="submit">送信</button> 4</form>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません