<form> はユーザー入力を収集して送信をサーバーに送ります。主な属性は action(どこに送るか)と method(どのように送るか)です。
html
Email
Password
Sign up
ユーザーが送信ボタンをクリック(またはEnterキーを押す)すると、ブラウザは**name を持つすべてのコントロール**を収集し、エンコードして、action にリクエストを送信します。
<form method="get" action="/search"> <!-- data in the URL: /search?q=html -->
<form method="post" action="/login"> <!-- data in the request body -->
name 属性は必須です<input value="hi" /> <!-- ❌ no name → NOT submitted -->
<input name="message" value="hi" /> <!-- ✅ submitted as message=hi -->
は名前付きコントロールのみが送信されます。サーバーはそれらを name で読み取ります。
form.addEventListener("submit", (e) => {
e.preventDefault(); // stop the full-page reload to handle it with fetch/AJAX
const data = new FormData(form); // easy way to read all fields
});
フォームは、ユーザーがサーバーにデータを送信する主な方法です。
action/method の理解、name の役割、GET-vs-POSTのセマンティクス、およびJS処理用の preventDefault は、入力を伴うすべてのウェブアプリケーションの基本です。