スーパーウルトラグレートデリシャスワンダフルブログ

初心者の初心者による初心者のためのブログ

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)

 


phpでのバリデーションではなくHTML側でできるのであればHTML側で対応したいと思って整理してみたけど正直思ったより自由度が低い...
あとブラウザ毎に対応が異なるからやっぱphpでバリデーションつけた方が確実

正規表現についてもいまいちよくわかってないからいつかちゃんとまとめたい

*1:Safariブラウザでは未対応