[HTML5]datalistè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„方・応用(WordPressã§å…¨ã‚¿ã‚°ã‚’検索ã®å…¥åŠ›å€™è£œã«ã—ãŸã‚Šã™ã‚‹)調ã¹ã‚‹ã€‚ 備忘録ã¨ã—ã¦webやデザインã«ã¤ã„ã¦èª¿ã¹ãŸã‚Š æ–°ã—ã知ã£ãŸã“ã¨ãªã©ã‚’書ã残ã—ã¦ã„ãカテゴリã§ã™ã€‚ datalistè¦ç´ ã¨ã¯ HTML5ã§æ–°ã—ãåŠ ã‚ã£ãŸdatalistè¦ç´ ã¯ã€list属性ã§ç´ä»˜ã‘られãŸinputè¦ç´ ã«ãƒ¦ãƒ¼ã‚¶ãƒ¼ãŒå…¥åŠ›ã™ã‚‹éš›ã«ã€datalistè¦ç´ 内ã«ç½®ã‹ã‚ŒãŸoptionè¦ç´ ã®å€¤ã‚’ãã®å…¥åŠ›å€™è£œã¨ã—ã¦è¡¨ç¤ºã•ã›ã‚‹ç‚ºã®è¦ç´ ã§ã™ã€‚ datalistタグ内ã«å…¥åŠ›å€™è£œã¨ã—ãŸã„ワードをvalue属性ã«æŒã¤optionタグを複数記述ã—ã¾ã™ã€‚ <form method="get" action=""> <input type="text" list="tools"> <datalist id="tools"> <option value="手è£å‰£"> <option value="ã¾ãã³ã—"> <option value="煙玉"> </datalist> <input type="s
![[HTML5]datalistè¦ç´ ã®åŸºæœ¬çš„ãªä½¿ã„方・応用(WordPressã§å…¨ã‚¿ã‚°ã‚’検索ã®å…¥åŠ›å€™è£œã«ã—ãŸã‚Šã™ã‚‹)](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4ef54e535052d579510001081bf0d6592bcfcbc/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F04%2Fhtml5-tag-datalist-01-150x150.png)
{{#tags}}- {{label}}
{{/tags}}