📝

HTMLフォームの基本と自己紹介ページ作成練習

に公開
HTML
自己紹介
web制作
form
tech

📄 HTMLフォーム基本まとめ

✅ フォームとは？

  • HTMLでユーザーからデータを受け取り、サーバーに送信するためのタグ
  • 基本構造:
    <form action="https://gsc.yju.ac.kr" method="GET">
  <label for="username">名前:</label>
  <input type="text" id="username" name="username" placeholder="名前を入力してください">
  <button type="submit">送信</button>
</form>
  • action: データを送信するサーバーのURL
  • method: 送信方式（GETまたはPOST）
  • name属性 → 変数名、入力された値がこの変数に割り当てられる

✅ HTMLフォームのデータ処理の仕組み

  • name属性はサーバーに送信される変数名
  • 入力された値はサーバー側でその変数にマッピングされる
  • 例:
    https://gsc.yju.ac.kr?username=kmj → サーバーでは$_GET['username']で取得可能

✅ なぜフォームを使用するのか？

  • ユーザーとWebアプリケーション間のインタラクションを実現するため
  • ログイン、会員登録、検索、予約、アンケートなどで活用

✅ 導入の歴史

  • HTML2.0（1995年）でフォームタグが初登場
  • HTML4.01、HTML5でさらに多様なinputタイプや検証機能が追加

✅ 最近のトレンド

  • HTML5で便利な入力補助や検証機能が充実
  • JavaScriptやAjaxによる非同期送信が一般的
  • SPA(Single Page Application)でリロードなしの送信が主流

✅ GETとPOSTの違い

区分 GET方式 POST方式
送信場所 URLに含まれる (?key=value) HTTPボディに含まれる
セキュリティ 低い（URLに表示） 高い（隠される）
容量制限 URL長制限あり 比較的自由
使用例 検索、フィルタリング ログイン、会員登録、注文など
  • GET：シンプルで高速、検索などに適合
  • POST：セキュリティが重要な処理に適合

✅ 主要な入力タグ – HTML4基準

タグ 用途 例
<input type="text"> テキスト入力 名前、ID
<input type="password"> パスワード入力 ログインパスワード
<textarea> 複数行テキスト入力 コメント、投稿文
<select> ドロップダウン選択 メニュー選択
<input type="checkbox"> 複数選択 興味ある項目
<input type="radio"> 単一選択 性別選択
<input type="file"> ファイルアップロード 履歴書提出
<input type="submit"> フォーム送信ボタン 登録ボタン

✅ 主要な入力タグ – HTML5基準

タイプ 説明
email メール形式自動検証
url URL形式入力
date, time, month 日付・時間入力UI提供
color カラー選択
range スライダー入力（数値範囲）
tel 電話番号入力
search 検索入力フィールド

🔚 まとめ:

  • HTMLフォームはユーザー入力をサーバーに送信する基本手段
  • GET/POSTの違いを理解し、適切に使い分けることが重要
  • HTML5でさらに多彩な入力体験が可能に

🎉 実習：自己紹介ページを作成してみた

HTMLとメディアタグを活用し、自己紹介ページを作成しました！以下はその成果です。

🖼️ 実際の画面

✅ トップページ（自己紹介＋ナビゲーション）

トップページ

✅ 趣味・おすすめコンテンツ

趣味とコンテンツ紹介

✅ 好きなサイト・BGM・バケットリスト

リンクと音楽と表

✍ 実習まとめ

  • <video>タグで自分の撮った動画を挿入
  • <iframe>でYouTube動画を埋め込み
  • <audio>でBGMを再生
  • <table>でバケットリストを作成
  • section, articleなどセマンティックなHTML構造を実践
  • さまざまなメディアコンテンツを組み合わせた自己紹介ページを完成させました！

Discussion