HTMLフォーム要素

フォームはユーザーからの入力データ（テキスト、選択肢、ファイルなど）を収集し、サーバー側に送信するためのインターフェースを提供します。

form要素の属性

• action: データ送信先のURLを指定
  • 未指定時: 現在のページURLに送信
  • 完全URL: https://www.example.com
  • パスのみ: /submit/（ベースURLは自動補完）
• method: HTTPメソッドを指定（getまたはpost）
• enctype: エンコーディング方式
  • multipart/form-data: ファイルアップロード時に使用

<form action="/submit/" method="post" enctype="multipart/form-data">
  <!-- フォームコンテンツ -->
</form>

input要素の種類

label要素と組み合わせて使用するとアクセシビリティが向上します。

<label for="username">
  ユーザー名: <input type="text" id="username" name="username" value="初期値" disabled>
</label>

主なinputタイプ:

• text: 単一行テキスト入力
• password: パスワード入力（マスク表示）
• radio: 単一選択

  <input type="radio" name="gender" value="male">男性
  <input type="radio" name="gender" value="female">女性

• checkbox: 複数選択

  <input type="checkbox" name="hobby" value="sports" checked>スポーツ

• file: ファイルアップロード
• submit: 送信ボタン

その他のフォーム要素

select要素（ドロップダウン）:

<select name="prefecture">
  <option value="tokyo">東京</option>
  <option value="osaka">大阪</option>
</select>

textarea要素（複数行テキスト）:

<textarea name="description" cols="40" rows="5"></textarea>

CSSの基本概念

CSS（Cascading Style Sheets）はHTML要素の視覚的表現を制御するスタイルシート言語です。

CSSの記述方法

コメントの書き方:

/* 単一行コメント */

/*
複数行コメント
複数行コメント
*/

基本構文: セレクタ {プロパティ: 値;}

CSSの読み込み方法

1. 外部ファイル読み込み（推奨）:

   <link rel="stylesheet" href="styles.css">

2. style要素内に直接記述:

   <style>
     body { font-family: sans-serif; }
   </style>

3. インラインスタイル（非推奨）:

   <p style="color: blue;">テキスト</p>

CSSセレクタの種類

基本セレクタ

• 要素セレクタ: 特定のHTML要素を選択

  p { color: black; }

• IDセレクタ: 特定のIDを持つ要素を選択

  #header { background: gray; }

• クラスセレクタ: 特定のクラスを持つ要素を選択

  .highlight { color: red; }

結合子セレクタ

• 子孫セレクタ: スペースで区切る

  div p { margin: 10px; }

• 子セレクタ: ＞記号で直接の子要素を選択

  div > span { color: blue; }

• 隣接セレクタ: ＋記号で直後の兄弟要素を選択

  h1 + p { font-size: 1.2em; }

属性セレクタ

input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: green; }

擬似クラス

リンクの状態によるスタイル設定:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }

フォーカス状態のスタイル:

input:focus { outline: 2px solid orange; }

セレクタの優先順位

1. 同じセレクタの場合: 後に記述されたスタイルが優先
2. 異なるセレクタの場合:
   • インラインスタイル > IDセレクタ > クラスセレクタ > 要素セレクタ