form パーツの type
◆ プロパティでとればデフォルトのが入ってる
◆ おもったより IE が対応してた
◆ けど未対応の type セットしたらエラー起きるのはどうかと思う
◆ おもったより IE が対応してた
◆ けど未対応の type セットしたらエラー起きるのはどうかと思う
前記事書いてるときに気づいたのですが type 属性は省略すると空ですが type プロパティは最初からあります
input なら text で button なら submit というデフォルトの挙動が入っています
このおかげで
ということをしなくて済みました
昔こんなことやってた気がします
どれに type があるのか調べるために form 系をいろいろ試してみました
datetime は deprecated で chrome では text になってます
ブラウザの違いは
Firefox
input タグの日付系が text
date/datetime/datetime-local/month/time/week
keygen が undefined
Edge
keygen と fieldset が undefined
IE11
input タグの日付系と color がエラー
IE だと input タグにない type をいれるとエラーが起きます
color/date/datetime/datetime-local/month/time/week
keygen/output/fieldset が undefined
button など input 以外に存在しない type を入れるとデフォルト値でなく "" になります
IE でエラーが出るのは困るところですが 全体的には対応してるの多いと思います
keygen は deprecated ですし fieldset は input 系じゃなくグループ化するもので type はあっても使わないでしょうし IE でエラーになる input の color は OS 標準のカラーピッカーがでるだけで余り使いたくないものです
日付系以外は気にすることなさそうです
input なら text で button なら submit というデフォルトの挙動が入っています
このおかげで
var type = button_elem.getAttribute("type") || "submit"
if(type === "submit"){ ... }
if(type === "submit"){ ... }
ということをしなくて済みました
昔こんなことやってた気がします
どれに type があるのか調べるために form 系をいろいろ試してみました
const getTagsType = (tagname, props = {}) =>
Object.assign(document.createElement(tagname), props).type
getTagsType("button")
"submit"
getTagsType("button", {type: "button"})
"button"
getTagsType("button", {type: "reset"})
"reset"
getTagsType("button", {type: "aa"})
"submit"
getTagsType("input", {type: "aa"})
"text"
getTagsType("input")
"text"
getTagsType("input", {type: "button"})
"button"
getTagsType("input", {type: "checkbox"})
"checkbox"
getTagsType("input", {type: "color"})
"color"
getTagsType("input", {type: "date"})
"date"
getTagsType("input", {type: "datetime"})
"text"
getTagsType("input", {type: "datetime-local"})
"datetime-local"
getTagsType("input", {type: "email"})
"email"
getTagsType("input", {type: "file"})
"file"
getTagsType("input", {type: "hidden"})
"hidden"
getTagsType("input", {type: "image"})
"image"
getTagsType("input", {type: "month"})
"month"
getTagsType("input", {type: "number"})
"number"
getTagsType("input", {type: "password"})
"password"
getTagsType("input", {type: "radio"})
"radio"
getTagsType("input", {type: "range"})
"range"
getTagsType("input", {type: "reset"})
"reset"
getTagsType("input", {type: "search"})
"search"
getTagsType("input", {type: "submit"})
"submit"
getTagsType("input", {type: "tel"})
"tel"
getTagsType("input", {type: "text"})
"text"
getTagsType("input", {type: "time"})
"time"
getTagsType("input", {type: "url"})
"url"
getTagsType("input", {type: "week"})
"week"
getTagsType("select")
"select-one"
getTagsType("select", {multiple: true})
"select-multiple"
getTagsType("keygen")
"keygen"
getTagsType("output")
"output"
getTagsType("textarea")
"textarea"
getTagsType("fieldset")
"fieldset"
getTagsType("option")
undefined
getTagsType("optgroup")
undefined
getTagsType("progress")
undefined
getTagsType("meter")
undefined
getTagsType("legend")
undefined
getTagsType("form")
undefined
getTagsType("label")
undefined
Object.assign(document.createElement(tagname), props).type
getTagsType("button")
"submit"
getTagsType("button", {type: "button"})
"button"
getTagsType("button", {type: "reset"})
"reset"
getTagsType("button", {type: "aa"})
"submit"
getTagsType("input", {type: "aa"})
"text"
getTagsType("input")
"text"
getTagsType("input", {type: "button"})
"button"
getTagsType("input", {type: "checkbox"})
"checkbox"
getTagsType("input", {type: "color"})
"color"
getTagsType("input", {type: "date"})
"date"
getTagsType("input", {type: "datetime"})
"text"
getTagsType("input", {type: "datetime-local"})
"datetime-local"
getTagsType("input", {type: "email"})
"email"
getTagsType("input", {type: "file"})
"file"
getTagsType("input", {type: "hidden"})
"hidden"
getTagsType("input", {type: "image"})
"image"
getTagsType("input", {type: "month"})
"month"
getTagsType("input", {type: "number"})
"number"
getTagsType("input", {type: "password"})
"password"
getTagsType("input", {type: "radio"})
"radio"
getTagsType("input", {type: "range"})
"range"
getTagsType("input", {type: "reset"})
"reset"
getTagsType("input", {type: "search"})
"search"
getTagsType("input", {type: "submit"})
"submit"
getTagsType("input", {type: "tel"})
"tel"
getTagsType("input", {type: "text"})
"text"
getTagsType("input", {type: "time"})
"time"
getTagsType("input", {type: "url"})
"url"
getTagsType("input", {type: "week"})
"week"
getTagsType("select")
"select-one"
getTagsType("select", {multiple: true})
"select-multiple"
getTagsType("keygen")
"keygen"
getTagsType("output")
"output"
getTagsType("textarea")
"textarea"
getTagsType("fieldset")
"fieldset"
getTagsType("option")
undefined
getTagsType("optgroup")
undefined
getTagsType("progress")
undefined
getTagsType("meter")
undefined
getTagsType("legend")
undefined
getTagsType("form")
undefined
getTagsType("label")
undefined
datetime は deprecated で chrome では text になってます
ブラウザの違いは
Firefox
input タグの日付系が text
date/datetime/datetime-local/month/time/week
keygen が undefined
Edge
keygen と fieldset が undefined
IE11
input タグの日付系と color がエラー
IE だと input タグにない type をいれるとエラーが起きます
color/date/datetime/datetime-local/month/time/week
keygen/output/fieldset が undefined
button など input 以外に存在しない type を入れるとデフォルト値でなく "" になります
IE でエラーが出るのは困るところですが 全体的には対応してるの多いと思います
keygen は deprecated ですし fieldset は input 系じゃなくグループ化するもので type はあっても使わないでしょうし IE でエラーになる input の color は OS 標準のカラーピッカーがでるだけで余り使いたくないものです
日付系以外は気にすることなさそうです