HTMLのinput要素とlabel要素の使用方法

input要素の基本的な使用法: input要素は、ユーザーからの入力を受け付けるために使用されます。以下は、いくつかの一般的なinputタイプの例です。
- テキスト入力: <input type="text" name="username">
- パスワード入力: <input type="password" name="password">
- チェックボックス: <input type="checkbox" name="agree">
- ラジオボタン: <input type="radio" name="gender" value="male">
label要素との組み合わせ: label要素は、input要素と関連付けるために使用されます。これにより、ユーザーがテキストをクリックして入力フィールドにフォーカスすることができるようになります。
- テキスト入力と関連するラベル:
```
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
```
- チェックボックスと関連するラベル:
```
<label for="agree">同意する:</label>
<input type="checkbox" id="agree" name="agree">
```

フォームのバリデーション: input要素とlabel要素を組み合わせて、フォームのバリデーション（入力の検証）を行うこともできます。以下は、JavaScriptを使用した基本的なバリデーションの例です。

<form>
 <label for="email">メールアドレス:</label>
 <input type="email" id="email" name="email" required>
 <input type="submit" value="送信">
</form>
<script>
 document.querySelector('form').addEventListener('submit', function(event) {
   var emailInput = document.querySelector('#email');
   if (!emailInput.checkValidity()) {
     alert('有効なメールアドレスを入力してください。');
     event.preventDefault();
   }
 });
</script>

上記の例では、input要素のtype属性を使用して、メールアドレスの入力フィールドを作成しています。さらに、required属性を指定することで、必須入力項目であることを示しています。JavaScriptを使用して、フォームが送信された際に入力のバリデーションを行い、無効な入力がある場合にはアラートを表示します。

これらのコード例を参考にしながら、HTMLのinput要素とlabel要素を使用したフォームの作成とバリデーションを行ってみてください。