HTML5 / 05. Form input


Formについて。なんだか色々追加されている模様。
詳しくはコチラを見て頂くとして、つまみ食いで見て行きます。

ブラウザはfirefox 3.6, Chrome 5.0.342.7 beta, Safari 4.0.5,  Opera 10.10, OSはMac OS X 10.6.2 です。簡単ですが、こちらから確認できます。

追加属性について

まずは、追加された属性から。今まで、Javascript で対応していた様な事が標準で出来るようになるみたいです。

autofocus

ページ見たときに最初からフォーカスが合うようになります。(文字カーソルが設定され、すぐにテキスト打てる)
複数つけるとあとに記述した方にフォーカスされます。

firefox ×
chrome
safari
opera ×

autocomplete / datalist

選択候補が補完されます。<datalist>で選択候補の一覧も作れます。本格的なものを作る場合はこれまで通りJavascriptとか組み合わせなきゃだけど、簡単なものならこれでも。
プルダウンとテキストフィールドの組み合わせでやってたような、タグ付けみたいなところで使えるかも。

firefox ×
chrome ×
safari ×
opera

placeholder

テキストフィールドにうっすら情報を表示してくれるアレですね。
autofocus設定しちゃうと消えちゃいますね。結局入力するときに見えないので個人的にはテキストフィールド下に補足テキストでいい気もしますが、Webアプリとか常用するものはあるとイイのかな。

firefox ×
chrome
safari
opera ×

required

必須かどうかチェックしてくれます。name属性の指定が必要なので、軽くチェックだけと思って省くと動作確認できませんでした。
すべてに言えることだけど、サーバ側のチェックをしなくてもよくなる訳じゃないので、あくまでユーザの利便性向上って範囲で。

firefox ×
chrome ×
safari ×
opera

他にも入力値に正規表現を使える pattern、数値の上限/下限を指定できる max/min とかあります。

追加要素について

次に追加されたInput要素。上記の属性と組み合わせるとイロイロ便利になるのかな。

search / tel / url / email

フォームの見た目を調整しつつ、場合によっては入力値のチェックも。operaだとメールアドレスもチェックしてくれますが、この辺は微妙な気も…

旧jphoneで/+?とか使えたんですが、これは通りますね。連続した … とか @直前の . とかピリオド関連もdocomoで使えたのですが、これはエラーに。今はこちらにあるように使えないようですが、昔から使っている人は引き続き使えている模様。
メールに関しては日本の携帯がアレなので、使わない方が無難な気もします。

全角を半角にしたり、ひらがなとカタカナの相互変換とかあるといいのですが、まあ日本だけの問題ですからね…

search tel url email
firefox × × × ×
chrome × × ×
safari × × ×
opera ×

date / time / datetime / datetime-local / month / week

カレンダー入力ができるようになります。min / max / step といった属性の設定が可能。
これデフォルトで出来ると助かりますが、使い勝手が悪いとみんな使わなそうな気も。今のところoperaだけですが、もう一声な感じです。

firefox ×
chrome ×
safari ×
opera

number

数値入力のみ受け付けます。こちらも min / max / step が設定可能で、step は小数も使えます。
全角で入力すると無視されますね…たまに気にせず入力する人もいるので微妙ですね。テキストフィールド横に数値を上下できるボタンがでるのはちょっとイイかもですが。

firefox ×
chrome ×
safari ×
opera

range

スライダで値を選択できます。min / max で範囲を指定できます。(デフォルト0〜100)

firefox ×
chrome
safari
opera

他にも追加要素はありますが、まだまだ各ブラウザの実装を待たねばならない段階ですね。今のところoperaが一歩リードというところでしょうか。
各要素と属性の組み合わせについては下記が詳しいので参考にして下さい。
HTML5.jp / input要素

Error: Suspended

この本を読みながら勉強中

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です