form,inputで使えるtypeと属性

※過去ブログの転記

type

text,hidden,password,emailとか個人的によく使うものは省略。

type	view	対象
input type="url"		URLの入力の妥当性チェックを行ってくれる
input type="number"		数値の入力 スマホの時にキーボードが数値入力になる
input type="tel"		スマホの時に電話番号入力に対応したキーボードが表示される
input type="search"		検索ボックスで使用する
input type="datetime-local"		UTCによらない日時の入力(旧datetime)
input type="date"		日付の入力
input type="month"		月の入力
input type="week"		週の入力
input type="time"		時間の入力
input type="range"		レンジ入力
input type="color"		色の入力欄
input type="image"		画像ボタンの生成
動作確認用ボタン

• input type="tel"はPCや非対応ブラウザではinput type="text"の時と同じ
• search,datetime-local,date,month,week,timeは値がある場合かつフォーカスした時とホバーした時に入力欄右端にリセット(x)が表示される (今までCSS+jQueryでわざわざxボタン作ってやってました...)
• input type="search"はxボタンが表示される以外はinput type="text"の時と同じ
• input type="color"すごい!!!JSColorいらないじゃん!!!と思ったらSafari非対応だったのでクソ
• datetime系は今までdatetime-picker使ってたけどフォーマットとかに拘らないならdatetime-picker不要なのかもしれない
• type="image"はクリックした画像のxy軸がname_x,name_yに入って返ってくる。

属性

attr	view	対象
form enctype="multipart/form-data"		type="file"の時に使用するデータの形式を指定する
form novalidate="novalidate"		HTML上で設定したバリデーションチェックを行わない
input type="file" accept="image/jpeg,image/jpg"		type="file"の時にファイル形式を指定できる カンマ区切りで複数指定が可能
input autocomplete="off"		入力補完機能のon/off
input autofocus		画面表示のタイミングでautofocusを指定した入力欄にフォーカスする
input type="image" height="50" width="50"		type="image"の時に画像のwidth,heightを設定
input max="5"		入力欄のtypeの最大値を設定できる
input min="5"		入力欄のtypeの最小値を設定できる
input maxlength="5"		入力欄の最大文字数を設定できる(文字数でカウント)
input multiple		ファイル選択やドロップダウンメニューの複数選択
input pattern="^[a-z]+$"		正規表現の指定が可能
input required		入力必須とする
input size="10"		入力欄の表示サイズ
input step="10"		入力欄の倍数の指定
input list="listId"*1		listで指定したid属性のあるdatalist要素の中から入力候補を表示
動作確認用ボタン

• autocompleteは個人的にはChromeの自動入力補完機能を使って欲しくない時に使う
• max,minは入力欄のtypeによって最大(小)値を設定できる(ex. type="number" max="n",type="date" max="Y-m-d"...etc)