はじめに
HTML では、<input> タグを使用してさまざまな種類の入力フィールドを作成します。この実験では、適切な type 属性を持つ <input> タグを使用して HTML フォームで異なる種類の入力フィールドを作成する方法を示します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 で Web サービスを実行します。その後、Web 8080 タブを更新して Web ページをプレビューできます。
テキスト入力フィールドを作成する
index.html という名前の新しい HTML ファイルを作成します。このファイルには入力フォームの HTML コードが含まれます。
テキスト入力フィールドを作成するには、次の HTML コードを使用します。
<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />
コードでは、入力フィールド用のラベルを作成し、type 属性を "text" に設定し、id と name 属性を割り当てています。このコードにより、ユーザーがユーザー名を入力するためのテキスト入力フィールドが作成されます。
パスワード入力フィールドを作成する
パスワード入力フィールドを作成するには、次のコードを使用します。
<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />
コードでは、type 属性を "password" に設定しており、これによりユーザーが入力するパスワード文字が隠されます。
チェックボックス入力フィールドを作成する
チェックボックス入力フィールドを作成するには、次のコードを使用します。
<label for="vehicle1">I have a car</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">I have a boat</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />
コードでは、ユーザーが選択できるように 3 つのチェックボックスを作成しました。各チェックボックスには異なる id、name、および value 属性があることに注意してください。
ラジオボタン入力フィールドを作成する
ラジオボタン入力フィールドを作成するには、次のコードを使用します。
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other" />
コードでは、ユーザーが性別を選ぶための 3 つのラジオボタンを作成しました。各ラジオボタンには異なる id、name、および value 属性があることに注意してください。
送信ボタンを作成する
送信ボタンを作成するには、次のコードを使用します。
<input type="submit" value="Submit" />
コードでは、ユーザーがフォームを送信するためにクリックするボタンを作成しました。
まとめ
この実験では、適切な type 属性を持つ <input> タグを使用して、HTML フォームでさまざまな種類の入力フィールドを作成する方法を学びました。テキスト入力、パスワード入力、チェックボックス入力、ラジオボタン入力、および送信ボタンを作成しました。これらの例を、ユーザー入力を収集するより複雑な HTML フォームを作成するための出発点として使用できます。
