【HTML5】WordPressの既存テーマのマジでイケて無かったところ!〜placeholderを使おう〜


既存のコード

<form action="<?php echo esc_url(home_url()); ?>" id="search-form" method="get">

	<input type="text" value="<?php echo esc_attr( 'Search' ); ?>" name="s" id="s" onblur="if(this.value=='')this.value='search'" 
		onfocus="if(this.value=='search') this.value=''" />
	<input type="hidden" value="submit" />

</form>

このコードまじでイケて無いと思うのですがいかがでしょうか?
ちなみにコイツ既存のテーマのコードです。
長年放置してきたのですが気になりだしたら止まらなくなったので今日はコイツを書き換えました。


placeholderを使おう!

<form action="<?php echo esc_url(home_url()); ?>" id="search-form" method="get">

	<input type="text" value="" placeholder="search" name="s" id="s" />
	<input type="hidden" value="submit" />

</form>

僕はこれで大満足です。

スクリーンショット 2016-07-09 4.03.53


まとめ
最近UI/UXについて猛勉強しているのですが、
マイクロインタラクションまで意識するようになったら
Webをみるのが本当に楽しくなりました!

placeholderの文言たかが1つですが
placeholderの文言されど1つでもあります。

わざわざsearchの文言を消して検索って
1アクション増えてますしばかばかしいですよね。

placeholder使いましょう。


最後まで読んでいただきありがとうございます。もしこの記事を気に入って頂けたようであればシェアをお願い致します。非常に励みになります。


コメントを残す