HTMLInputElement とは？
HTMLInputElement インターフェイスは、HTML の <input > 要素を表すオブジェクトです。このインターフェイスは、ユーザーがウェブページと対話するためのさまざまな入力コントロールを提供します。これらのコントロールには、テキストフィールド、チェックボックス、ラジオボタン、ボタンなど、さまざまなものがあります。
type プロパティ
type は HTMLInputElement インターフェイスのプロパティで、 <input > 要素を入力する際に許可されるデータの型（数値、日付、メールアドレスなど）を示します。このプロパティを設定することで、ユーザーが入力できるデータの種類を制限し、適切な形式のデータを取得することができます。
以下は、type プロパティで設定できる値の一部とその説明です。
| 値 | 説明 |
|---|---|
| text | 1 行のテキスト入力フィールドを作成します。 |
| password | パスワード入力フィールドを作成します。入力されたテキストは "*" でマスクされます。 |
| number | 数値入力フィールドを作成します。 |
| メールアドレス入力フィールドを作成します。 | |
| date | 日付入力フィールドを作成します。 |
| checkbox | チェックボックスを作成します。 |
| radio | ラジオボタンを作成します。 |
| file | ファイル選択ダイアログを開くボタンを作成します。 |
| submit | フォームを送信するボタンを作成します。 |
| reset | フォームの入力内容をリセットするボタンを作成します。 |
コード例
以下は、type プロパティを使用して異なる種類の入力フィールドを作成する例です。
<input type="text" placeholder="名前を入力してください">
<input type="email" placeholder="メールアドレスを入力してください">
<input type="password" placeholder="パスワードを入力してください">
<input type="number" min="1" max="10">
<input type="date">
<input type="checkbox">同意する
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
<input type="file">
<input type="submit" value="送信">
参考資料
よくある質問
Q1: type プロパティを省略した場合はどうなるのか？
A1: type プロパティを省略した場合、デフォルト値の "text" が設定されます。つまり、1 行のテキスト入力フィールドが作成されます。
Q2: type プロパティの値に無効な値を指定した場合はどうなるのか？
A2: 無効な値を指定した場合、ブラウザはそれを "text" として扱います。
Q3: JavaScript を使用して type プロパティの値を取得または設定するにはどうすればよいのか？
A3: JavaScript の inputElement.type プロパティを使用して、type プロパティの値を取得または設定できます。 例えば、以下のように記述します。
// type プロパティの値を取得
const inputType = inputElement.type;
// type プロパティの値を設定
inputElement.type = "password";
その他の参考記事:DOM HTMLCollection オブジェクト