フォームタグ <form> の概要
定義
<form> タグは、ユーザーからデータを収集するためのフォームを作成するために使用されます。
フォームは、入力フィールド、ボタン、およびその他のフォーム要素を含むことができます。
役割
ユーザーからのデータをサーバーに送信するためのインターフェースを提供します。
<form> タグの基本構造
フォームは、<form> タグで囲むことで定義され、その内部にさまざまな入力要素が配置されます。
<form action="送信先のURL" method="送信方法">
<!-- フォーム要素がここに入る -->
</form>フォームタグの主要属性
action 属性
定義
フォームが送信されたときにデータが送信されるURLを指定します。
役割
データを処理するサーバースクリプトの場所を指定します。
<form action="submit_form.php" method="post">method 属性
定義
フォームデータを送信する方法を指定します。
主に get または post が使用されます。
get
URLにデータを付加して送信します。
データはURLに表示されるため、セキュリティが低く、少量のデータ送信に適しています。
post
データをリクエストの本文に含めて送信します。
データがURLに表示されないため、セキュリティが高く、
大量のデータ送信や機密データの送信に適しています。
役割
データの送信方法を決定します。
<form action="submit_form.php" method="post">enctype 属性
定義
フォームデータのエンコーディングタイプを指定します。
特にファイルのアップロードを行う場合に使用します。
application/x-www-form-urlencoded
デフォルトのエンコーディングタイプで、ほとんどのフォームで使用されます。
multipart/form-data
ファイルアップロードを含むフォームで使用されます。
text/plain
テキストのみを送信する場合に使用されますが、一般的ではありません。
役割
データのエンコード方法を指定します。
<form action="submit_form.php" method="post" enctype="multipart/form-data">target 属性
定義
フォームの送信先のウィンドウやフレームを指定します。
_self：同じウィンドウまたはフレームでフォームを送信（デフォルト）。_blank：新しいウィンドウまたはタブでフォームを送信。_parent：親フレームでフォームを送信。_top：最上位のフレームでフォームを送信。
役割
フォームの送信先ウィンドウやフレームを指定します。
<form action="submit_form.php" method="post" target="_blank">autocomplete 属性
定義
ブラウザがフォームの自動補完機能を使用するかどうかを指定します。
on：自動補完を有効にする（デフォルト）。off：自動補完を無効にする。
役割
自動補完の有効/無効を制御します。
<form action="submit_form.php" method="post" autocomplete="off">novalidate 属性
定義
フォームの送信時にHTML5のバリデーションを無効にします。
役割
ブラウザによるフォーム入力の検証を無効にします。
<form action="submit_form.php" method="post" novalidate>フォームの基本的な使い方
基本的なフォームの例
以下は、名前、メールアドレス、メッセージを入力する基本的なフォームの例です。
<!DOCTYPE html>
<html>
<head>
<title>基本的なフォームの例</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="submit_form.php" method="post">
<label for="name">名前:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">メールアドレス:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">メッセージ:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="送信">
</form>
</body>
</html>フォームのスタイリング
CSSによるスタイリング
フォームの外観をCSSでカスタマイズすることで、より魅力的なデザインにすることができます。
<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
textarea,
select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="submit_form.php" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<label for="message">メッセージ:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>まとめ
<form> タグは、ユーザーからデータを収集し、
サーバーに送信するための重要な要素です。action、method、enctype などの属性を適切に設定し、<input>、<textarea>, <select>, <button> などの入力要素を組み合わせて、
機能的で見た目も魅力的なフォームを作成できます。
また、CSSを使用してフォームのスタイリングを行い、ユーザーエクスペリエンスを向上させることが重要です。
