📝
HTML基本講座5 フォーム
こんにちは！
今回は、HTMLで「ユーザーからの入力」を受け取るために使う フォームタグ について解説します。
Webページでよく見かける
- お問い合わせフォーム
- ログイン画面
- 会員登録ページ
などは、HTMLのフォーム構造で作られています。
HTML基本講座5 フォーム
フォームタグとは
HTMLでユーザーの入力をサーバーに送るには、<form>タグを使います。
| タグ名 | 読み方 | 用途 |
|---|---|---|
<form> |
フォーム | 入力フォーム全体を囲むタグ |
<input> |
インプット | ユーザーが情報を入力するための汎用タグ |
<textarea> |
テキストエリア | 複数行のテキスト入力欄に使用 |
<button> |
ボタン | フォームを送信したりアクションを起こす |
formタグ：フォームの枠を作る
📌 使いどころ
<form> は、フォーム全体の開始と終了を表します。中に入力欄やボタンなどを入れます。
📖 説明
action 属性で送信先URLを指定し、method 属性で送信方法（GETやPOST）を指定します。
💡 例
inputタグ：さまざまな入力欄に使う
📌 使いどころ
<input> は、1行の入力欄、パスワード入力、チェックボックスなど、いろいろな用途に使えます。
📖 説明
type 属性によって、テキスト入力やパスワード、ラジオボタンなどに変化します。
| typeの値 | 表示される入力欄 |
|---|---|
text |
1行のテキスト入力欄 |
password |
パスワード入力欄 |
email |
メールアドレス欄 |
checkbox |
チェックボックス |
radio |
ラジオボタン |
submit |
送信ボタン |
💡 例
textareaタグ：複数行の入力欄
📌 使いどころ
自由に長文を入力できるようにしたいときに使います。お問い合わせフォームの「内容」欄などにぴったりです。
📖 説明
<input type="text"> とは違い、<textarea> では複数行の入力ができます。改行も可能です。
💡 例
buttonタグ：送信・リセットなどのアクション
📌 使いどころ
フォームの送信ボタンや、独自のJavaScriptイベントを実行するために使います。
📖 説明
<input type="submit"> でも送信できますが、<button> のほうが中にHTMLを含めたり、柔軟にスタイルを適用できます。
💡 例
まとめ
| タグ名 | 役割 | 使う場面 |
|---|---|---|
<form> |
フォーム全体を囲む | 入力内容をサーバーに送る枠組み |
<input> |
1行入力、チェックなど | ユーザーからの基本的な入力欄 |
<textarea> |
複数行のテキスト入力欄 | コメント欄、問い合わせ内容など |
<button> |
ボタン（送信・リセット） | 入力を送信する、またはJSと連携 |
フォームは、ユーザーとWebアプリケーションをつなぐ重要な橋渡し役です。
うまく活用して、使いやすく伝わるUIを作っていきましょう！
Discussion