HTMLテーブルタグとフォームタグの基本ガイド

HTMLテーブルタグの基本

HTMLテーブルは、データを構造化して表示するために使用されます。テーブルは行（tr）とセル（td）で構成され、ヘッダー部分（thead）と本体部分（tbody）に分けることができます。

基本的なテーブルの例


<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>製品情報表</title>
</head>
<body>
    <table border="1" width="100%" style="border-collapse: collapse;">
        <thead style="background-color: #f2f2f2;">
            <tr>
                <th style="padding: 8px;">製品名</th>
                <th style="padding: 8px;">価格</th>
                <th style="padding: 8px;">在庫状況</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding: 8px;">スマートフォンX</td>
                <td style="padding: 8px;">¥89,800</td>
                <td style="padding: 8px;">在庫あり</td>
            </tr>
            <tr>
                <td style="padding: 8px;">ノートブックY</td>
                <td style="padding: 8px;">¥129,800</td>
                <td style="padding: 8px;">在庫切れ</td>
            </tr>
            <tr>
                <td style="padding: 8px;">タブレットZ</td>
                <td style="padding: 8px;">¥59,800</td>
                <td style="padding: 8px;">在庫あり</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

HTMLフォームタグの基本

HTMLフォームは、ユーザーからの入力を収集し、サーバーに送信するための要素です。フォームは、入力フィールド、ボタン、セレクトボックスなどのコントロールを含むことができます。

フォームの基本構造


<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ユーザー登録フォーム</title>
</head>
<body>
    <form action="/register" method="post" name="userRegistration">
        <fieldset>
            <legend>基本情報</legend>
            
            <div>
                <label for="userName">お名前:</label>
                <input type="text" id="userName" name="userName" required>
            </div>
            
            <div>
                <label for="userEmail">メールアドレス:</label>
                <input type="email" id="userEmail" name="userEmail" required>
            </div>
            
            <div>
                <label for="userPassword">パスワード:</label>
                <input type="password" id="userPassword" name="userPassword" required>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>興味のある分野</legend>
            
            <div>
                <input type="checkbox" id="tech" name="interests" value="technology">
                <label for="tech">テクノロジー</label>
            </div>
            
            <div>
                <input type="checkbox" id="sports" name="interests" value="sports">
                <label for="sports">スポーツ</label>
            </div>
            
            <div>
                <input type="checkbox" id="music" name="interests" value="music">
                <label for="music">音楽</label>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>性別</legend>
            
            <div>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男性</label>
            </div>
            
            <div>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女性</label>
            </div>
            
            <div>
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">その他</label>
            </div>
        </fieldset>
        
        <div>
            <label for="comments">コメント:</label>
            <textarea id="comments" name="comments" rows="4" cols="50"></textarea>
        </div>
        
        <div>
            <button type="submit">登録する</button>
            <button type="reset">リセット</button>
        </div>
    </form>
</body>
</html>

フォームの主要属性

  • action: フォームデータが送信されるURLを指定します
  • method: データ送信の方法（GETまたはPOST）を指定します
  • name: フォームの一意の識別子を指定します
  • enctype: フォームデータのMIMEタイプを指定します（ファイルアップロード時など）

GETとPOSTの違い

  • GET:
    • URLにデータが表示されます
    • 少量のデータ送信に適しています
    • ブックマーク可能で、キャッシュされます
    • 検索フォームなどに適しています
  • POST:
    • URLにデータが表示されません
    • 大量のデータや機密情報の送信に適しています
    • サーバー側でデータを処理する場合に適しています

主要なフォーム入力タイプ

  • type="text": 一行のテキスト入力
  • type="password": パスワード入力（文字が非表示）
  • type="checkbox": 複数選択可能なチェックボックス
  • type="radio": 一つだけ選択可能なラジオボタン
  • type="submit": フォーム送信ボタン
  • type="reset": フォームリセットボタン
  • type="button": 一般的なボタン
  • type="email": メールアドレス入力
  • type="number": 数値入力
  • type="date": 日付選択

タグ: HTML テーブル フォーム Web開発 フロントエンド

5月24日 11:13 投稿

ホットタグ

©2026 異端開発室