【HTML5】input要素(タグ)の使用方法

      2016/08/15

HTMLのinput要素(タグ)を使用する事で、フォーム上の様々な入力方法を提供できます。
入力方法の指定は簡単で、type属性を指定するだけです。
HTML5で追加された属性も多々あります。あとで見直せるように一覧にしました。

input要素(タグ)のtype属性

数値

type属性に"number"を指定する

数値:<input type="number">

数値:

テキストボックス

type属性に"text"を指定する

テキストボックス:<input type="text">

テキストボックス:

検索

type属性に"search"を指定する

検索:<input type="search">

検索:

パスワード

type属性に"password"を指定する

パスワード:<input type="password">

パスワード:

メールアドレス

type属性に"email"を指定する

メールアドレス:<input type="email">

メールアドレス:

URL

type属性に"url"を指定する

URL:<input type="url">

URL:

電話番号

type属性に"tel"を指定する

電話番号:<input type="tel">

電話番号:

日付

type属性に"date"を指定する

日付:<input type="date">

日付:

日時

type属性に"datetime"を指定する

日時:<input type="datetime">

日時:

ローカル日時

type属性に"datetime-local"を指定する

ローカル日時:<input type="datetime-local">

ローカル日時:

type属性に"month"を指定する

月:<input type="month">

月:

type属性に"week"を指定する

週:<input type="week">

週:

時間

type属性に"time"を指定する

時間:<input type="time">

時間:

レンジ

type属性に"range"を指定する

レンジ:<input type="range">

レンジ:

type属性に"color"を指定する

色:<input type="color">

色:

チェックボックス

type属性に"checkbox"を指定する

チェックボックス:<input type="checkbox">

チェックボックス:

ラジオボタン

type属性に"radio"を指定する

ラジオボタン:<input type="radio">

ラジオボタン:

サーバーへファイルを送信する

type属性に"file"を指定する

サーバーへファイルを送信する:<input type="file">

サーバーへファイルを送信する:

送信ボタン

type属性に"submit"を指定する

送信ボタン:<input type="submit">

送信ボタン:

画像ボタン

type属性に"image"を指定する

画像ボタン:<input type="image">

画像ボタン:

リセットボタン

type属性に"reset"を指定する

リセットボタン:<input type="reset">

リセットボタン:

汎用ボタン

type属性に"button"を指定する

汎用ボタン:<input type="button">

汎用ボタン:

隠しデータ

type属性に"hidden"を指定する
※隠しデータはブラウザ上に表示されないデータを送信するために使用する

隠しデータ:<input type="hidden">

隠しデータ:

 - HTML , , ,