背景

inputタグにはtype属性ごとに様々な種類があるので情報の整理として本記事を作成しました。
本記事では全種類ではないですが、よく見るipuutタグの使い方をサンプルコードを例にまとめています。

本記事の対象

タイトルに興味を持った方
inputタグの種類と使い方をザックリ把握した方
とりあえずinputタグをコピペで動かしたい方

inputタグのサンプル例

テキスト入力欄

<h2>テキスト入力</h2>
<input type="text" name="username" placeholder="ユーザー名を入力してください">

パスワード入力欄

<h2>パスワード入力</h2>
<input type="password" name="password" placeholder="パスワードを入力してください">

スライダー

<h2>スライダー</h2>
<input type="range">

ラジオボタン

<h2>ラジオボタン</h2>
<label for="blue">青</label>
<input type="radio" id="blue" name="color" value="blue">
<label for="red">赤</label>
<input type="radio" id="red" name="color" value="red">

チェックボックス

<h2>チェックボックス</h2>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">

セレクトボックス

<h2>セレクトボックス</h2>
<label for="country">色を以下から選択する</label>
<select id="country" name="color">
    <option value="blue">blue</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="pink">pink</option>
</select>

ファイルをアップロード

<h2>ファイルをアップロードする</h2>
<input type="file" name="file">

日付を選択

<h2>日付を選択</h2>
<input type="date" name="hogeDate">

ボタン

<h2>ボタン</h2>
<input type="button" value="クリックbtn">

送信ボタン
　フォーム内に入力されたデータをサーバー等に送信するボタンとして使用されます。

<h2>送信ボタン</h2>
<input type="submit" value="送信">

リセットボタン
フォーム内の入力フィールドの値を初期状態に戻すためのボタンとして使用されます。
ボタンがクリックされるとフォーム内のデータがクリアをするリセットボタンとして活用できます。

<h2>リセットボタン</h2>
<input type="reset" value="リセット">

時間の入力

<h2>時間の入力</h2>
<input type="time">

参考

MDN Web Docs: 入力欄（フォーム入力）要素