HTMLでこんなことまでできる!最近覚えたHTML技法

私も最近知ったのですが、覚えておくと便利なHTMLの様々な技法があります。
その中でも最近覚えた技法をご紹介します。

入力フォームに入力候補を標示することができる

ソースは以下になります。

<input list="productsList" id="products" name="products" placeholder="ここに製品名を入力。" />
<datalist id="productsList">
  <option value="製品B">
  <option value="製品C">
  <option value="製品D">
  <option value="製品E">
  <option value="製品F">
</datalist>

See the Pen 入力フォームに入力候補を標示することができる by sayuri (@giraffeweb) on CodePen.0

基本的には「list=”productsList”」と「datalist id=”productsList”」を合わせておくことでこんなことができるんです!
便利ですよね~★

コンテンツの中身を編集することができる!

divブロックに「contenteditable」属性を追加するだけで、最初から入っている文章にユーザー側でテキストを追加することができるんです。
すごく便利な機能ですよね!

See the Pen コンテンツの中身を編集することができる! by sayuri (@giraffeweb) on CodePen.0

みなさんも機会があればぜひやってみて下さい!