HTML5ならjavascriptを使わずに検索ボックスに消える文字をplaceholderを使って入れることができる！

Tweet

238

今まではjavascriptで行っていた検索に予め文字を入れておいて、フォーカスが当たると消える仕組みをHTML5ならjavascriptを使わずに簡単に実現することが可能です。

javascriptの時と若干動作が違いますが、フォーカスがあたってから7日文字が入力されてからなのかの違いです

HTML5で検索ボックスに消える文字を入れる

<form method="get" action="https://9-bb.com/">
 <input type="text" name="s" class="input-text" placeholder="検索">
 <input type="submit" class="input-button" value="">
</form>

inputのplaceholoder=”” に値を入れます
それが検索ボックス内に表示される内容になります

文字を入力して初めて、予め表示されている文字が消えます
一つ加えるだけなのでとてもシンプルです、HTML対応でないブラウザでは空白なだけです。

Tweet

短縮URL:

2014年02月12日 WEB制作系 HTML5