私も最近知ったのですが、覚えておくと便利な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
みなさんも機会があればぜひやってみて下さい！