HTML: HTML入力タイプリファレンス

<form>
<label>ユーザー名：<input type="text" name="username" placeholder="ユーザー名を入力"></label><br>
<label>パスワード：<input type="password" name="password" placeholder="6文字以上"></label><br>
<label>メール：<input type="email" name="email" placeholder="you@example.com"></label><br>
<label>電話番号：<input type="tel" name="phone" placeholder="09012345678"></label><br>
<label>Webサイト：<input type="url" name="website" placeholder="https://"></label><br>
<label>検索：<input type="search" name="q" placeholder="検索キーワード"></label>
</form>

<form>
<label>数量（1〜10）：<input type="number" name="qty" min="1" max="10" value="1"></label><br>
<label>音量：<input type="range" name="volume" min="0" max="100" value="50"></label><br>
<label>テーマカラー：<input type="color" name="theme" value="#ff6600"></label>
</form>

<!-- rangeとnumberの同期（JSが必要） -->
<input type="range" id="slider" min="0" max="100" value="50">
<input type="number" id="numDisplay" min="0" max="100" value="50">
<script>
const slider = document.getElementById('slider');
const num = document.getElementById('numDisplay');
slider.addEventListener('input', () => num.value = slider.value);
num.addEventListener('input', () => slider.value = num.value);
</script>

<form>
<label>日付：<input type="date" name="date"></label><br>
<label>時刻：<input type="time" name="time"></label><br>
<label>日付＋時刻：<input type="datetime-local" name="datetime"></label><br>
<label>月：<input type="month" name="month"></label><br>
<label>週：<input type="week" name="week"></label>
</form>

<form>
<p>趣味（複数選択可）：</p>
<label><input type="checkbox" name="hobby" value="reading"> 読書</label>
<label><input type="checkbox" name="hobby" value="music"> 音楽</label>
<label><input type="checkbox" name="hobby" value="sports"> スポーツ</label>

<p>性別（単一選択）：</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<p>アバターアップロード（画像のみ）：</p>
<input type="file" name="avatar" accept="image/png, image/jpeg, image/gif">
</form>

<form action="/submit" method="post">
<label>名前：<input type="text" name="name"></label><br>

<!-- 送信ボタン -->
<input type="submit" value="フォームを送信">

<!-- リセットボタン -->
<input type="reset" value="リセット">

<!-- 汎用ボタン -->
<input type="button" value="クリック" onclick="alert('こんにちは！')">

<!-- 画像ボタン -->
<input type="image" src="btn-submit.png" alt="送信">
</form>

<form action="/update-profile" method="post">
<!-- ユーザーには見えないが、フォームとともに送信される -->
<input type="hidden" name="user_id" value="12345">
<input type="hidden" name="token" value="abc123xyz">

<label>ニックネーム：<input type="text" name="nickname"></label>
<input type="submit" value="保存">
</form>