1.1 <form>要素
フォームはウェブサイトでのユーザーインタラクションにおいて重要な部分です。フォームを使ってユーザーはデータを入力し、それがサーバーに送信されて処理されます。HTMLではフォームを作成するために<form>要素を使用します。
<form>タグはウェブページにフォームを作成するために使用されます。テキストボックスやボタン、チェックボックスなどの様々なフォームエレメントのコンテナとして機能します。ユーザーが入力したすべてのデータは、サーバーで処理されるために送信可能です。
使用例:
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">メール:</label>
<input type="email" id="email" name="email" required>
<br>
<button id="submit" type="submit">送信</button>
</form>
<script>
const userName = document.getElementById("username");
const userEmail = document.getElementById("email");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && userEmail.validity.valid) {
e.preventDefault();
alert(`あなたの名前: ${userName.value}\n` + `あなたのメール: ${userEmail.value}`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="email">メール:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="submit">送信</button>
</form>
<form>タグの属性
action属性はデータが送信されるURLを指定します。送信ボタンを押した後、ここにデータが送信されます。action属性が指定されていない場合、データは現在のURLに送信されます。
action属性の使用例:
<form action="https://example.com/submit">
<!-- フォーム要素 -->
</form>
method属性はフォームデータを送信するために使用されるHTTPメソッドを指定します。利用可能な値はGETとPOSTです。
- GET: データはURLのパラメーターとして送信されます。この方法は少量のデータを送信するのに適しており、機密情報の送信には使用されるべきではありません。
- POST: データはHTTPリクエストのボディに送信されます。この方法は大量のデータや機密情報の送信に適しています。
method属性の使用例:
<form action="/submit" method="post">
<!-- フォーム要素 -->
</form>
1.2 データ送信方法
GETメソッド
GETメソッドはデータをURLパラメーターとして送信します。method属性が指定されていない場合、デフォルトでこの方法が使用されます。
GET方法の使用例:
<form action="/search" method="get">
<label for="query">検索:</label>
<input type="text" id="query" name="query" required>
<button id="submit" type="submit">検索</button>
</form>
<script>
const searchField = document.getElementById("query");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (searchField.validity.valid) {
e.preventDefault();
alert(`あなたが検索したのは: ${searchField.value}`);
}
});
</script>
<form action="/search" method="get">
<label for="query">検索:</label>
<input type="text" id="query" name="query">
<button type="submit">検索</button>
</form>
GETメソッドの特徴
- データがURLに表示されるため、機密情報の送信には適していません
- URLの長さに制限があるため、データサイズに制限があります
- データはキャッシュされやすく、ブラウザのブックマークに保存可能です
POSTメソッド
POSTメソッドはHTTPリクエストのボディにデータを送信します。これは大量のデータや機密情報の送信に適しています。
POST方法の使用例:
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">送信</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert(`ようこそ, ${userName.value}!`);
}
});
</script>
<form action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">送信</button>
</form>
POSTメソッドの特徴
- データがURLに表示されないため、機密情報の送信に適しています
- データがリクエストボディで送信されるためサイズ制限がありません
- データはキャッシュされず、ブラウザのブックマークにも保存されません
1.3 追加の属性
enctype属性
enctype属性はPOSTメソッドでフォームデータを送信する際のエンコーディング方法を指定します。最もよく使われる値はmultipart/form-dataで、これはファイルのアップロードに必要です。
enctype属性の使用例:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">ファイルをアップロード:</label>
<input type="file" id="file" name="file">
<button type="submit">送信</button>
</form>
target属性
target属性はフォーム送信後のサーバーの応答を表示する場所を指定します。可能な値は次のとおりです:
_self(デフォルト): 同じウィンドウやタブで開きます_blank: 新しいウィンドウやタブで開きます_parent: 親フレームで開きます_top: 最上位フレームで開きます (フレーム使用時)
target属性の使用例:
<form action="/submit" method="post" target="_blank">
<!-- フォーム要素 -->
</form>
novalidate属性
novalidate属性はブラウザによる組み込みフォームのバリデーションを無効にします。
novalidate属性の使用例:
<form action="/submit" method="post" novalidate>
<label for="email">メール:</label>
<input type="email" id="email" name="email" required>
<button type="submit">送信</button>
</form>
1.4 データ送信の方法
フォームデータの送信は、<input type="submit">や<button type="submit">の送信ボタンによって行われます。ユーザーがこのボタンをクリックすると、ブラウザは指定されたメソッドとURLを使用してフォームデータをサーバーに送信します。
フォームデータ送信の主な方法は次のとおりです:
1. 送信ボタン: これが最も一般的なデータ送信方法です。送信ボタンは<input>または<button>要素を使用して作成できます。
<input>の例:
<input type="submit" value="Submit">
<button>の例:
<button type="submit">Submit</button>
2. Enterキー: フォームのテキストフィールドでEnterキーを押すと、フォームが送信されることもあります。
3. JavaScript: JavaScriptを使用してプログラムでフォームを送信することができます。これは、送信前に追加のバリデーションや他のアクションを実行する必要があるときに便利です。
JavaScriptを使ったフォーム送信の例:
<form id="myForm" action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
<br>
<button id="submit" type="submit">送信</button>
</form>
<script>
const userName = document.getElementById("username");
const password = document.getElementById("password");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
if (userName.validity.valid && password.validity.valid) {
e.preventDefault();
alert("認証に成功しました！\n" + "\n" + `ようこそ, ${userName.value}!`);
}
});
</script>
<form id="myForm" action="/submit" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="submitForm()">送信</button>
</form>
function submitForm() {
document.getElementById('myForm').submit();
}
GO TO FULL VERSION