コーディング初心者のための基本的なinputタグの使い方ガイド
コーディング初心者の皆さんがinputタグを使って簡単なフォームを作成する方法を紹介します。
inputタグには、type属性を用いて異なる入力フィールドを作成できます。テキスト入力、ラジオボタン、チェックボックス、ボタンなど、それぞれのtype属性の使い方を解説します。
参考：mdn web docs
<inupt> は HTML の要素で、ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。<inupt> 要素は入力型と属性の組み合わせの数が非常に多いため、HTML の中で最も強力かつ最も複雑な要素の一つです。
フォームを構成するinputタグの基本的な使い方
このコードは、ウェブページ全体を囲んでいる<html>タグの中に、<form>タグを使ってフォームを作成する方法を示しています。
では、実際にフォームの要素を追加してみましょう！
名前を入力しよう！
名前を入力するためには、<input type="text">というタグを使います。type="text"はテキストを入力するためのタイプです。
<label for="name">名前：</label>
<input type="text" id="name" name="name">「名前」と書いてある部分は、名前を入力するところのラベルです。<input>タグのtype="text"は、テキストを入力するためのボックスを作ることを意味します。名前を入力するテキストボックスができました！
メールアドレスを入力しよう！
メールアドレスを入力するためには、同じく<input>タグを使いますが、type="email"とします。これでメールアドレスの形式が正しいかどうかをチェックできます。
<label for="email">メールアドレス：</label>
<input type="email" id="email" name="email">同じように、メールアドレスを入力するところのラベルを書き、<input>タグのtype="email"を使います。これでメールアドレスを入力するためのボックスができました！
お問い合わせ内容を入力しよう！
長いメッセージを入力するためには、<textarea>タグを使います。<textarea>というタグで囲まれた部分が、複数行のテキストを入力できるスペースになります。
<label for="message">メッセージ：</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>複数の選択肢から1つだけ選んでみよう！
ラジオボタンは、複数の選択肢から1つだけ選ぶことができます。例えば、りんご、バナナ、オレンジの中から1つだけ選んでみましょう！<input type="radio">というコードを使います。
<label for="male">男性</label>
<input type="radio" id="male" name="gender" value="male">
<label for="female">女性</label>
<input type="radio" id="female" name="gender" value="female">複数の選択肢から複数選んでみよう！
チェックボックスは、複数の選択肢を複数選ぶことができます。例えば、スポーツ、音楽、絵を描くの中から複数選んでみましょう！<input type="checkbox">というコードを使います。
<label for="hobby1">スポーツ</label>
<input type="checkbox" id="hobby1" name="hobby" value="sports">
<label for="hobby2">音楽</label>
<input type="checkbox" id="hobby2" name="hobby" value="music">選択肢をリストから選ぼう！
セレクトボックスは、選択肢をリストから選ぶためのボックスです。例えば、好きな果物を選ぶ場合、オプションは、セレクトボックスの中に入る果物の候補のことになります。
<label for="fruits">好きな果物：</label>
<select id="fruits" name="fruits">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</select>好きな色を選んでみよう！
色を選ぶためには、<input type="color">というタグを使います。クリックするとカラーパレットが表示され、好きな色を選ぶことができます。
<label for="favorite-color">好きな色：</label>
<input type="color" id="favorite-color" name="favorite-color">送信ボタンを押そう！
入力が終わったら、<input type="submit">というタグを使います。これはフォームの内容を送信するボタンです。
<input type="submit" value="送信する">このコードは、「送信する」と書かれたボタンを作っています。ボタンをクリックすると、フォームの内容が送信されます。
フォームでよく使うその他のタグ
お問い合わせ内容を入力しよう！
長いメッセージを入力するためには、<textarea>タグを使います。
inputタグのまとめ
<form>タグの中に<input>タグを使ってフォームの要素を追加することで、名前やメールアドレスを入力することができるフォームを作ることができます。
これらのタグを組み合わせることで、簡単なフォームが作成できます。もし何か入力内容に誤りがあった場合、エラーメッセージが表示されることもあります。フォームはウェブサイトで大切な役割を果たすので、正しく使って楽しくコーディングしましょう！