HTMLフォームの作り方：初心者向けガイド
目次
はじめに
ウェブ開発の基本的な要素であるHTMLフォームを作成する方法を学びましょう。
このガイドでは、HTMLの基本からフォームの作成、送信、そして応用的なトピックにまで焦点を当てます。
1. すべてのHTMLの基本となる構造
HTML（HyperText Markup Language）は、ウェブページを構造化するための基本的な言語です。
以下は、HTML文書の基本的な構造です。
<!-- ページ全体の構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- パソコンとスマホ、それぞれの画面サイズに合わせるための記述 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サイトのタイトル</title>
<!-- スタイルシートのリンク -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- フォームの内容をここに構築していきます -->
<!-- JavaScriptファイルのリンク -->
<script src="js/script.js"></script>
</body>
</html>
2. フォームの基本
フォームを作成するには、<form> タグを使用します。以下は、基本的なフォームの構造です。
<form action="/submit" method="post">
<!-- フォームの中身はここに -->
</form>
action属性: フォームが送信されたときの処理先のURLを指定します。method属性: フォームデータの送信方法を指定します（通常は “post” または “get”）。
2.1 “post” と “get” の違い
<form action="/search" method="get">
<!-- フォームの中身はここに -->
</form> method=”get”: URLに表示される
フォームを送信すると、ブラウザは指定されたURLにフォームの入力データが付与され、リクエストします。
この方法は主にデータを取得する場合に使用されます。
例えば、検索クエリ(URLの末尾につく?以降の文字列)やリンク経由のデータ送信に適しています。
例: https://google.co.jp/search?q=検索する文字
<form action="/login" method="post">
<!-- フォームの中身はここに -->
</form>
method=”post”: URLには表示されない
主にセキュリティ上の理由や、大量のデータを送信する場合に使用されます。
例えば、ログイン情報やファイルのアップロードに適しています。
選択するメソッドは、フォームでどのようにデータを処理するかに依存します。
通常、安全な操作（例: ログイン）や大量のデータ（例: ファイルのアップロード）を処理する場合には “post” メソッドが推奨されます。
一方で、簡単なデータの検索や共有の場合には “get” メソッドが使用されます。
3. 入力フィールドの追加
3.1 テキストボックス
名前の入力欄などに使用できるフォームのメインタグ<input type="text">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
3.2 パスワードフィールド
パスワード入力時に出てくる謎の「●●●●」の正体<input type="password">
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
4. ラジオボタンとチェックボックス
4.1 ラジオボタン
性別の選択で誰もが見たことのある「◎」<input type=”radio”>
<label>性別:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
4.2 チェックボックス
見たことありませんか？「□同意する」<input type=”checkbox”>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">同意する</label>
5. 送信ボタン
会員登録などで見たことあると思います。「確認をする」「送信する」<input type=”submit”>
<input type="submit" name="confirm" value="確認をする">
<input type="submit" name="send" value="送信する">
6. ラベルの使用
無くてもいいけどあった方が使い勝手が良くなる便利なヤツ<label>タグ
<input type="radio" id="nannkanagaiyatsu" name="nannkanagaiyatsu">
<label for="nannkanagaiyatsu">forとidを同じ名前にするとテキストをクリックしても反応してくれるよ</label>
labelタグを使うことでちっちゃい「◎」をクリックしなくてもテキストをクリックさえすれば反応をしてくれるようになる便利なヤツ
まとめ
このガイドでは、HTMLフォームの基本的な構造と要素について学びました。
<!-- ページ全体の構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<!-- スタイルシートのリンク -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ヘッダー -->
<header class="l-header">
<h1><a href="/">ロゴ</a></h1>
</header>
<!-- メインコンテンツ -->
<main class="l-content">
<!-- フォームセクション -->
<section class="form-section">
<h2>コンタクトフォーム</h2>
<form action="./" method="get" class="form">
<div class="form_group">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
</div>
<div class="form_group">
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
</div>
<div class="form_group">
<label>性別:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
</div>
<div class="form_group">
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">同意する</label>
</div>
<input type="submit" name="send" value="送信する">
</form>
</section><!-- /.form-section -->
</main>
<!-- フッター -->
<footer class="l-footer">
<small>copyright xxx all right reserved.</small>
</footer>
<!-- JavaScriptファイルのリンク -->
<script src="js/script.js"></script>
</body>
</html>次は、フォームの送信の仕方、エラーチェックの仕方、および応用的なトピックを掘り下げていきます。
