HTML input要素のtype属性の種類を知りたいときの一覧

HTMLでinput要素のtype属性で使える属性値の数が多くて「絶対に覚えていられんよ」ということになったので、HTML5から追加されたtype属性の属性値も含めて簡単にですが一覧化しておきます。

そもそもinput要素のtype属性を全種類使ったことがないので、どの属性値がどんなフィールドになるのか表示させながら記事にした一覧です。

1. input要素のtype属性の種類
2. HTML5で追加されたinput要素のtype属性の種類

input要素のtype属性の種類

input要素のtype属性の属性値になる種類は22種類あります。目次にしてみたらHTML5から追加された種類のほうが多かったです。

input要素のtype属性は使う属性値の種類によって作成するフィールドの部品を組み立てていくことができ、部品を組み合わせていくことで使用したいフォームを作り上げていくことができます。

ちょいちょい記事中にname属性が登場しますがname属性は入力欄に名前をつける属性です。

<form>でデータが送信されるときに、name属性で指定した名前と入力された値が一組みになって送信されます。

関連 HTML フォーム作成で基本の要素や属性の使い方を練習

ボタン (input type button)

HTMLでinput要素のtype属性に「button」を使うと、そのまんまですがボタンが作成できます。

凡用ボタンとも言います。

ボタン：

<input type=”button”>要素の中にvalue属性を記述するとボタンのラベルとして使われます。

<input type=”button”>だけでは単なる凡用ボタンなので動作はしません。それなのでscriptなどと組み合わせて使用したりできます。

そしてform要素内で複数のボタンをグループ化して使う場合は同じnameグループをつけます。

ファイル (input type file)

input要素のtype属性に「file」を属性値で指定すると「ファイルを選択」とボタンに表示され、ボタンをクリックするとファイル選択ができるボタンを作成できます。

ブラウザによってファイル選択の表示は若干の違いがあるようです。

またform要素には「method=”post”」と「enctype=”multipart/form-data”」の指定をしておくようにします。

<form method="post" action="#" enctype="multipart/form-data">
<p>JPEGファイル：<input type="file" name="example" accept="image/jpeg"></p>
<p><input type="submit" value="送信する"></p>
</form>

そしてinput type fileの記述の後にaccept属性をつけると選択できるファイル形式の指定ができます。

jpegなら「accept=”image/jpeg”」というようにします。

input type=”file”を書くだけだとファイル選択は一つだけです。それなのでmultipleを記述してファイルの複数選択を可能にしたりもできます。

隠しデータ (input type hidden)

input要素のtype属性に「hidden」を指定すると、ブラウザには表示されない「隠しデータ」を使うことができます。

隠してるのはブラウザの表示だけなので、HTMLソースを見ると確認することができます。

隠しデータ：⇒

「送信したいデータがブラウザに表示されない」

そのための使い道としては、サーバー側のプログラムに必要な処理命令を渡すときに使う場合とか、input type=”hidden”を使って商品名ではなく品番で情報を送信して注文管理しやすくするなどがあるようです。

画像送信ボタン (input type image)

input要素のtype属性にimageを記述すると、フォームの送信ボタンを画像の送信ボタンにすることができます。

送信ボタンに使用したい画像を「src=””」で指定して「alt=””」も記述します。

チェックボックス (input type checkbox)

次はinput要素のtype属性に「checkbox」を指定した場合です。

チェックボックス：

正方形のチェックボックスが表示されて、その名の通りチェックボックスの出来上がりです。

チェックボックスは単一の値をオンにしたりオフにしたりできます。そして複数あるチェックボックスの場合は複数の選択が可能です。

チェックボックが関連していてグループにして選択できるようにする場合は、name属性の属性値を統一してチェックボックスのグループを作成します。

A：<input type="checkbox" name="example" value="選択a">
B：<input type="checkbox" name="example" value="選択肢b">
C：<input type="checkbox" name="example" value="選択肢c">

A：
B：
C：

パスワード (input type password)

type属性の属性値に「password」を指定するとパスワードの入力をするフィールドを作成できます。

フィールドに入力すると黒ポチで表示されるフィールドです。

パスワード：

例えば「size」もtype属性の中に記述すると、パスワードを入力するフィールド幅が広がります。

そして「maxlength」の指定をすると、パスワードの入力最大文字数を決めることもできます。

上記はsizeを50にした幅で、パスワード最大入力数を10文字にしてみました。

フィールド幅のわりには入力文字数が少ないという、よくわからないパスワードフィールドを作ってみましたです。

ラジオボタン (input type radio)

input type=”radio”と記述するとチェックができるラジオボタンが作成できます。

チェックボックスと似てますが、チェックボックスは複数の選択をチェックできるボタンに対して、ラジオボタンは複数の選択肢から一つだけを選択できるボタンです。

ラジオ：

アンケートに使ってるラジオボタンをよく見るかと思います。

そのため複数のラジオボタンをグループ化するときがあると思うので、ラジオボタンをグループ化して使うときもHTMLの「name」属性を同じ名前にしてvalueで送信する情報を送るようになります。

A:<input type="radio" name="example" value="選択a">
B:<input type="radio" name="example" value="選択b">
C:<input type="radio" name="example" value="選択c">

A：
B：
C：

リセットボタン (input type reset)

input要素のtype属性に「reset」を属性値として指定するとフォームで入力した内容をリセットすることができます。

リセット：

value部分がリセットボタンの部分に表示されます。

value属性をつけない場合のボタン表示は「リセット」と表示されたのだと思いますが、ブラウザによっては異なるかもしれないので統一したい人は表示確認する必要もあるかと思います。

送信ボタン (input type submit)

input type=”submit”を指定すると送信ボタンを作成できます。

HTMLの送信ボタンは入力フォームに入力した内容をサーバーに送信するボタンです。

送信ボタンをクリックした結果は、使用してるプログラム(CGI等)によって異なります。

送信ボタン：

送信ボタンの部分の表示はブラウザごとに異なる場合があるようなので、value属性でボタン表示が変わらないように指定しておくといいかと思います。

一行テキスト (input type text)

input要素のtype属性に「text」を記述すると一行テキストとして入力フィールドを作成できます。

テキスト：

一行だけのテキストフィールドなので横幅を長めにするときは「size」で指定します。

value属性をつけるとテキスト入力の初期値としてテキスト内に表示させたい入力例などを付加して「優しさフィールド」にすることができます。

テキストの入力フィールドをもっと広いテキストにしたい場合は、「textarea」が適しています。

HTML5で追加されたinput要素のtype属性の種類

ここからはinput要素のtype属性がHTML5から追加された種類です。

HTMLの書き方は同じです。

ですがブラウザによっては対応してないこともあるようです。そしてスマホでの入力が私の環境では入力フィールドがうまく動作しなかったりしました。

検索フォーム (input type search)

input要素の属性の種類にある「search」で検索フォームを作成できます。

検索フィールドの表示だけ見ると、ただのテキスト入力できるだけのような気がします。

検索：

ですが検索フィールドに入力するとバツ印が現れてるのですが、これは入力した内容を取り消すボタンが表示されます。

個人的には活用方法が見えてこなかったです。

それなのでlist属性で入力候補のリストを作成するとかでパワーアップした検索フォームにできそうです。

検索候補みたいなものですかね、以下のように書いてみました。

<input type="search" name="example" list="data">

<datalist id="data">
<option value="リスト1"></option>
<option value="リスト2"></option>
<option value="リスト3"></option>
</datalist>

HTMLのdatalist要素で指定したid名を記述すると、リストを作成して検索候補を表示できます。

電話番号 (input type tel)

input要素のtype属性に「tel」を記述します。

電話番号：<input type=”tel” name=”tel” placeholder=”00-0000-0000″>

すると以下のようなフィールドが表示されます。

電話番号：

ほとんどテキストフィールドと変わらないですが、大きく違いがわかることはスマホだと電話番号の入ちょくに最適化された専用のキーパッドを表示することができます。

PCは違いがわかりづらいかもです。なので電話番号の入力だと分かるように「placeholder」を付加して入力の優しさヒントとして表示させておくといいかと思えます。

URL (input type url)

input要素の属性にurlを記述してURLを入力するフィールドになります。

URL：

urlを入力するフィールドではurl以外を入力してしまうと「URLを入力してください」と入力エラーの表示が現れます。

以下のような書き方をしてみました。

<form>
  <input type="url" placeholder="http://example.com">
  <input type="submit" value="URL以外はエラー">
</form>

placeholderで入力例を表示させておくと優しさフォームになり入力間違いが減るかと思います。

メール (input type email)

お次はinput要素の属性に「email」を記述してメールアドレスを入力するフィールドです。

メール：

メールアドレスを入力できるフィールドなので、メール形式の入力ではない入力がされたときは、以下のようなエラー表示してくれます。

メールアドレス以外を入力して送信しようとすると「メールアドレスに@を挿入してください」と表示されるので適したフィールド作成ができます。メールアドレスの形式に対応させたいフォーム作成で使っちゃってください。

<input type="email" name="example" size="30" maxlength="50" placeholder="メールアドレスを入力">

sizeで入力幅の指定、maxlengthで最大入力文字数、placeholderで入力する例などを加えることによりフィールドを使いやすくできます。

日付：年月日 (input type date)

ここから5種類のinput要素のtype属性の属性値は日付関係が続きます。

まずは日付が「年月日」からです。

年月日：

dateを指定すると日付を入力するフィールドが「年、月、日」を入力することができます。

<input type="date" name="example" min="2019-08-01" max="2019-12-31" value="2019-08-01">

minで入力するときの最小日付の指定
maxで入力するときの最大日付の指定

フィールド内の一番右の三角をクリックするとカレンダーが表示されます。

そして初期値の表示は各ブラウザによって異なるようです。その場合value属性を指定しおくということになるかと思います。

日付：年月 (input type month)

次の日付の入力フィールドは「年、月」の入力フィールドです。

年月：

minで入力するときの最小日付の指定
maxで入力するときの最大日付の指定

input要素のtype属性の値、monthは先述したdateの日だけがない日付というだけの違いです。

日付：年と週 (input type week)

次の日付関係は、「年、週」を入力できるフィールドです。

年週：

日付の入力が「年と週」の入力フィールドは月曜が週の始まりのカレンダーで週の選択ができます。

選択後の週表示は「第何週」のように表示されるだけです。

個人的にはなんか使いづらく感じました。

時間 (input type time)

はい次は時間のフィールドです。

input要素のtype属性に「time」を指定します。

時間：

timeを記述することによって「時と分」が入力できる時間フィールドが表示されます。

<input type="time" name="example" min="10:00" max="19:00" step="1" value="10:00:00">

minで最小時間の指定ができて、maxで最大時間を指定して時間の入力範囲を指定できます。

そして「step=””」を記述すると秒が表示され入力可能になります。

時間フィールドで秒まで入力できるようにしたいときは、例えば「step=”1″」とすると１秒単位になり、10にすると10秒刻みでコントロールできます。

年月日と時間 (input type datetime-local)

こちらの日付フィールドは先ほどまでの日付関係のtype属性の合体作のようなフィールドです。週だけなしです。

type属性の属性値に「datetime-local」を指定します。

年月日時分：

年、月、日、分の入力ができるフォームです。秒もなかったですね。秒を刻みたい場合はstepを指定してあげてください。

フィールド内の下矢印のアイコンでカレンダー表示できます。

HTML5から追加されていた「datetime」もあったようなのですが、廃止になってるようで代わりに今説明した「datetime-local」の使用を推奨しています。

番号 (input type number)

次は番号を入力するフィールドです。

番号：

数字を入力できるフィールドはinput要素のtype属性の属性値に「number」を指定してあげてください。

フィールドで入力する番号は、小数点にすることもできました。

番号：

sizeでフィールド幅を広げて、stepで番号のカウントを小数点でカウントできるようにしてます。

そして小数点のカウントはminで最小値を0までしか指定できないようにして、maxで最大数は10まで入力できるようにするとかしてみました。

番号を使う用途によってコントロールができます。

スライダー (input type range)

inout要素の属性に「range」を属性値で指定します。すると以下のようなスライダーを表示できます。

スライダー：

スライダーは大まかな数値の入力をするときに使うことができます。

ボリューム

こっそり：：近所迷惑

上記のサンプル的なスライダーは、value属性を記述して初期値を「-5」にして「こっそり」に近づけて近所迷惑にならないようにしていきました。

カラー (input type color)

やっと最後のinput要素のtype属性まで到着しました、

最後のtype属性に使うのは「color」を属性値にします。

カラー：

colorを指定したinput要素は色の選択を入力ができるフィールドを作成できます。

valueも記述して16進数のカラーコードを書いておけば初期値のカラーとして表示されます。

そして色の候補を作成して表示することもできます。

<input id="color-list" type="color" value="#aab1ff" list="colors">

<datalist id="colors">
<option value="#776dff"></option>
<option value="#ff7555"></option>
<option value="#ff67c5"></option>
</datalist>