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

HTML5 プレースホルダーにスタイルを付ける
このエントリーをはてなブックマークに追加
PR

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

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

 

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

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

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

 


 

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)