便利そうなHTMLのおはなし
はじめに
なんとなーく雑談しながらコード書いてたときに、
「datalist めっちゃ楽ですよ」って言われて「何それ?」っていうのがきっかけ。
対応ブラウザだのなんだのの話はありますが、知ってるだけでいざというときに引き出せるのでHTMLとかCSS見直そうと思ったのがこの記事のきっかけ。
ここ(↑)を参考にざっと見て便利そうなの並べていきます。CSSはいつか書きます。
<datalist>
冒頭でお話ししたインクリメンタルサーチで使えるやつ。
こんな便利なもんあったんかいな！
(↓下記の例だと[y]だけ入力すると[tanaka yutaka]だけ出てくると思います)
api叩いてでっかいデータを整形して入れたりもできそう。
JS書けなくてもでっかいjsonとか書けばインタラクティブっぽいUIができそう。
<details> + <summary>
いわゆるアコーディオン的なUIですね
だれかこれをいい感じにスタイル当てたやつ公開しろください。
<pre> + <code>
プログラムのコードを表記するときに使うタグ。
マークダウンで書くとあんまり機会ないかな〜と思いつつもページ翻訳とかしたときに巻き込まれないのは素敵。
form 周りの話
validation(属性)
実はHTMLだけで結構validateできます。
<input required> …… 入力必須であることを示す
<input pattern> …… 正規表現で入力値のパターンを指定する
<input min max> …… 入力できる最小値と最大値を指定する
主に使うのはこの辺り。使い所としてはクローズドなアプリケーションとかが良さそう。
JSでがっつり書くのもな〜 みたいな時にサクッとかけます。
ちなみに以下のサイトがいい感じに使用例も載せてくれてました。敬礼
multiple(属性)
select box で複数選んだり、複数のファイルアップロードできるやつ。
<optgroup>
select box の中でグルーピングされてるやつですね。
こうやって作ってたんだ。初めて知った。
※こちらは参考サイトからそのままコード転用してます
勝手なイメージですが じゃらん とかでよく見るUIな気がする。
data -(属性)
tool tipをHTMLと簡単なCSSで表現できるやつ。
ぐらいに思ってたんですが、もっと色々できたんかいな。
(例)async validate
(例)tool tip & カスタムの条件分岐でstyle付与
なんかサンプル作ろうかと思ったんですが、面倒すぎるのd(ry
というかここまでくると流石にJSに任せた方がいい気はします。
まぁでもこんなんまで出来るんやって衝撃はありました。
その他
数字の記号などで見られる下付き文字や上付き文字。
<sub> <sup>
メーター状に描画されるtag。
<progress> <meter>
まぁこれらはおまけみたいなもんですね。
両方使うところが限定的なんですが、「こんなこともできるんや」って知っとくぐらいでいいかと。
さいごに
IE対応という言葉が滅びますように。
Discussion