フォーム：ユーザー入力を収集する
テキストボックスやボタンなどを使った簡単なフォームを作成します
「フォーム：ユーザー入力を収集する」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
フォーム：ユーザー入力を収集する
次のレッスンへようこそ！今日は、HTMLでフォームを作成する方法を学びます。フォームを使うと、Webページ上でユーザーが名前やメールアドレスなどのデータを入力できます。
フォームとは何ですか？
フォームはユーザーから情報を収集するために使います。たとえば、アカウントを登録するときは、名前やメールアドレスなどの項目をフォームに入力します。
HTMLでは、<form>タグを使ってフォームを作成します。
基本的なフォームを作成する
<form>タグを使ってフォームを作成します。このタグの中に、入力フィールドやボタンなどを追加します。
例：
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<button type="submit">Submit</button>
</form>
フォームの入力タイプ
HTMLフォームでは、さまざまな種類の入力フィールドを使用できます。一般的なものを以下に示します。
text：短いテキストの入力に使用しますemail：メールアドレスの入力に使用しますpassword：パスワードの入力に使用しますnumber：数値の入力に使用します
例：
<form>
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<label for="age">Age:</label>
<input type="number" id="age" name="age" />
</form>
ラジオボタンとチェックボックスを追加する
ラジオボタンは1つだけ選択する場合に、チェックボックスは複数選択する場合に使用できます。
例：
<form>
<p>Favorite Color:</p>
<input type="radio" id="red" name="color" value="red" />
<label for="red">Red</label>
<br />
<input type="radio" id="blue" name="color" value="blue" />
<label for="blue">Blue</label>
<br />
<p>Hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading" />
<label for="reading">Reading</label>
<br />
<input type="checkbox" id="sports" name="hobby" value="sports" />
<label for="sports">Sports</label>
</form>
ドロップダウンメニューを追加する
<select>タグを使うと、ユーザーが選択肢の一覧から選べるドロップダウンメニューを作成できます。
例：
<form>
<label for="country">Select your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="uk">United Kingdom</option>
<option value="canada">Canada</option>
</select>
</form>
フォームのボタン
ボタンを使うと、ユーザーはフォームを送信したりリセットしたりできます。一般的には<button>タグを使用します。
例：
<form>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
フォームにスタイルを設定する
CSSを使ってフォームのスタイルを設定し、より見やすくできます。たとえば、フィールドのサイズを調整したり、色を変更したりできます。
例：
<style>
form {
width: 300px;
margin: 20px auto;
}
input, select, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
</style>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<button type="submit">Submit</button>
</form>
よくできました！
おめでとうございます！フォームの作成、さまざまな入力タイプの使用、スタイルの設定方法を学びました。フォームはユーザーデータを収集し、Webページをインタラクティブにするために欠かせません。次のレッスンでは、動画や音声などのマルチメディアを使って、ページをより動的にする方法を学びます。さらに自由な発想で取り組みましょう！
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 16
- レッスン
- 35
よくある質問
「フォーム：ユーザー入力を収集する」レッスンは無料ですか？
はい。「フォーム：ユーザー入力を収集する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「フォーム：ユーザー入力を収集する」で何を学びますか？
テキストボックスやボタンなどを使った簡単なフォームを作成します ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「フォーム：ユーザー入力を収集する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか？
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 表：データを整理する
- フォーム：ユーザー入力を収集する
- HTML属性
- マルチメディア：動画と音声を追加する