あかつきのお宿

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

テキストボックス

typeを省略した場合もtextと同じです。

<input type="text" name="text" />
<input name="text" />

チェックボックス

<input type="checkbox" name="check" />

//テキストのクリックにも対応する場合
<label>
  <input type="checkbox" name="check" />
  チェックリスト
</label>

<input type="checkbox" name="check" id="check" />
<label for="check">チェックリスト</label>

ラジオボタン

<label>
  <input type="radio" name="sex" value="男性" />
  男性
</label>

<label>
  <input type="radio" name="sex" value="女性" />
  女性
</label>

ファイル

<input type="file" name="file" />

//複数のファイルを選択する場合
<input type="file" name="file" multiple />

サブミットボタン

<input type="submit" name="submit" value="ボタン" />

hidden要素

<input type="hidden" name="id" value="1" />

パスワード用のテキストボックス

<input type="password" name="password" />

カラーピッカー

<input type="color" name="color" />

//JavaScriptで選択時の色を取得
<script>
  color = document.getElementById('color');
  color.oninput = function() {
    alert(this.value);
  }
</script>

数字入力用のテキストボックス

<input type="number" name="number" />

メールアドレス入力用のテキストボックス

<input type="email" name="email" />

URL入力用のテキストボックス

<input type="url" name="url" />

日付入力用のテキストボックス

<input type="date" name="date" />

時間入力用のテキストボックス

<input type="time" name="time" />

日付と時間の両方を入力できるテキストボックス

<input type="datetime-local" name="date" />