input type全部覚えられないメモ
- 2025/01/31
- aikawa
htmlのinputタグのtype属性ってMDNを確認したら、22個もあるんですね。
昔から使っていたのは、button, checkbox, file, hidden, password, radio, reset, text, submitの9つ＋numberくらいだったので、結構知らないものも。
（input typeじゃないですが、selectとtextareaも昔から使っています）
そんなわけで、ざっくりとinput typeそれぞれについてまとめました。
いかがでしたでしょうか（早い）。
昔から使っていたのは、button, checkbox, file, hidden, password, radio, reset, text, submitの9つ＋numberくらいだったので、結構知らないものも。
（input typeじゃないですが、selectとtextareaも昔から使っています）
そんなわけで、ざっくりとinput typeそれぞれについてまとめました。
いかがでしたでしょうか（早い）。
button
超有名どころ、説明不要。
動作が規定されていないのでデフォルトでは何もしません。
JS等を絡めないと、単体ではどうなんだ？ ってものです。
でもよく使います。
動作が規定されていないのでデフォルトでは何もしません。
JS等を絡めないと、単体ではどうなんだ？ ってものです。
でもよく使います。
checkbox
これも超有名どころ。
複数選択に使います。
requiredで選択必須に出来ますが、複数の中から一つでなく、requiredのあるタグは全て選択しないといけないようです。
複数選択に使います。
requiredで選択必須に出来ますが、複数の中から一つでなく、requiredのあるタグは全て選択しないといけないようです。
color
jQueryで昔使っていましたが、今はそういうの無しにカラーピッカーが使えます。
Firefoxだとクリックでこんな感じに。
Firefoxだとクリックでこんな感じに。
date
jQuery（以下略）。
minとmaxで開始終了日を指定出来てvalidateされます。
stepで選択可能な日を何日ごとと指定出来ますが、週の7以外は使わないかも。
requiredも可。
Firefoxだとクリックでこんな感じに。
minとmaxで開始終了日を指定出来てvalidateされます。
stepで選択可能な日を何日ごとと指定出来ますが、週の7以外は使わないかも。
requiredも可。
Firefoxだとクリックでこんな感じに。
datetime-local
jQuery（以下略）。
※local付ける必要が有るのか、ならlocal無し版も作れとか思いますが、それはそれで面倒に……。
日付と時刻を指定可能。
minやmax、stepは秒単位で指定可能、requiredも可。
Firefoxだと時刻はピッカーに出ません。
※local付ける必要が有るのか、ならlocal無し版も作れとか思いますが、それはそれで面倒に……。
日付と時刻を指定可能。
minやmax、stepは秒単位で指定可能、requiredも可。
Firefoxだと時刻はピッカーに出ません。
メールアドレスのvalidateが出来ます。当然patternで正規表現も可。
multipleを使うと、カンマ区切りで複数入力可能です（知らなかった）。
デフォルトでは、以下の正規表現でチェックするらしいです。
multipleを使うと、カンマ区切りで複数入力可能です（知らなかった）。
デフォルトでは、以下の正規表現でチェックするらしいです。
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;file
ファイルのアップロードに使います。
acceptでmimeか.拡張子をカンマ区切りで、デフォルトで表示するファイルを指定出来ますが、ユーザー側で解除可能で、validateも行いません。
captureを指定すると、カメラやマイクを前面か後面か選べるらしいです。
multipleで複数指定も可能。
acceptでmimeか.拡張子をカンマ区切りで、デフォルトで表示するファイルを指定出来ますが、ユーザー側で解除可能で、validateも行いません。
captureを指定すると、カメラやマイクを前面か後面か選べるらしいです。
multipleで複数指定も可能。
hidden
画面に表示されないで値を渡すのに使いますね。有名どころなのでそれくらい。
image
画像をsrc指定して表示するsubmitボタンです。submitと異なるのは、画像を指定するのと、width, heightを指定可能な事でしょうか。
透明な画像を大きくして、画面の大部分のどこかクリックで送信とか、割と怖い事も（submitもCSS使えば出来るでしょうけど）。
month
jQuery（以下略）
でもデスクトップ版Firefoxでは使えないので、jQueryの出番（無い）。
min, max, step, requiredが使えます。
Chromeだとこんな感じ。
でもデスクトップ版Firefoxでは使えないので、jQueryの出番（無い）。
min, max, step, requiredが使えます。
Chromeだとこんな感じ。
number
数字を入力する奴です。min, max, step, requiredが使えます。
password
パスワードの入力。minlength, maxlength, patternを使って、文字数と文字種類を指定可能です。
requiredで必須にする事も。
radio
これも超有名どころ。複数の中から一つだけ選択します。
requiredも使えて、これはcheckboxと違ってrequiredの有るもの全部選択しなくて良い、というか出来ないので一つだけ選択で良いようです。
range
スライダーを表示しますが、そのままだと現在値が分からないので、超不便です。もう少し何と言うか。
min, max, stepも使えますが、見た目が変わらないのでJS使えないと、うーん……。
reset
フォームを編集前の画面表示時に戻す時に使いますが、扱いづらいためか、ほぼ使った事が無いです。
人によっては初期値でなく、全部空になるとか微妙な違い的な事を求めて来て、実際にそうしても使う人がほとんど居ないので、置くだけコストが増えてしまうなら最初から置かない方が、って事になりがちな奴です。
人によっては初期値でなく、全部空になるとか微妙な違い的な事を求めて来て、実際にそうしても使う人がほとんど居ないので、置くだけコストが増えてしまうなら最初から置かない方が、って事になりがちな奴です。
search
規定されてはいるけど、ブラウザの挙動までは指定されていないと言う微妙なもの。一応Chromeだと見た目も変わりますが、それ以外では使えないので使わないだろう代表格。
tel
電話番号としてvalidateをしないので、意味が無い奴です。textでpattern使用した方が良いって話になるので。
text
言わずと知れた、inputの代表格オブ代表格。
文字を入力するのに使います。
minlength, maxlength, patternを使って文字数と文字種類を指定可能です。
requiredも使えます。
文字を入力するのに使います。
minlength, maxlength, patternを使って文字数と文字種類を指定可能です。
requiredも使えます。
time
jQue(ry
日付でなく時刻の入力。
min, max, stepで開始終了、秒単位の指定が可能です。
requiredも指定可能。
日付でなく時刻の入力。
min, max, stepで開始終了、秒単位の指定が可能です。
requiredも指定可能。
url
URLとして正しいかvalidateします。patternはデフォルトにプラスしてvalidateを行うらしく、URL内の文字列で特定のパターンを指定させたいと言った事も可能なようです。
どうしても合わないなら、textでpatternを使うのが良さそう。
week
jQue(ry
これもmonth同様、デスクトップ版Firefoxでは使えません。
ChromeのUIも微妙なので、Firefoxの件と合わせて、使い所あるの？ って感じです。
これもmonth同様、デスクトップ版Firefoxでは使えません。
ChromeのUIも微妙なので、Firefoxの件と合わせて、使い所あるの？ って感じです。
submit
トリはsubmitにしました。imageもsubmitと同じ扱いになります。
押された時にvalidateが実施され、invalidなら送信されずエラーを表示し、validなら送信しようとします。
以下の属性は普段使う事が無さそうなので、知りませんでした。
formactionは、form action=で指定したものを上書きし、このボタンを押した時だけ送信先URLを変更出来たりします。
formmethodは、form method=で指定したものを上書きし、POSTの筈がGETで送ったり出来ます。
formenctypeは、form enctype=で指定したものを上書きしますが、使う事は無さそうです。
formnovalidateは論理属性で、これ１つでform内のrequiredやvalidateを無意味にしてそのまま送信出来ます。チェック不要にしたい分岐で使えるかもしれません。
formtargetは、form target=で指定したものを上書きします。これを押したら別ウィンドウにPOSTするとか、挙動を変えたい時に使えそうです。
押された時にvalidateが実施され、invalidなら送信されずエラーを表示し、validなら送信しようとします。
以下の属性は普段使う事が無さそうなので、知りませんでした。
formactionは、form action=で指定したものを上書きし、このボタンを押した時だけ送信先URLを変更出来たりします。
formmethodは、form method=で指定したものを上書きし、POSTの筈がGETで送ったり出来ます。
formenctypeは、form enctype=で指定したものを上書きしますが、使う事は無さそうです。
formnovalidateは論理属性で、これ１つでform内のrequiredやvalidateを無意味にしてそのまま送信出来ます。チェック不要にしたい分岐で使えるかもしれません。
formtargetは、form target=で指定したものを上書きします。これを押したら別ウィンドウにPOSTするとか、挙動を変えたい時に使えそうです。
