inputのtype属性について3分で語ってみた

colorとかdatetime-locaは便利なんだけどUIがね……

この記事を三行にまとめると

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





テキストボックス

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" />
 もしかしたら何か関連しているかも? 
 みんなからのコメント 
まだコメントはいただけてないみたい……