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

Tweet

既存のコード

<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>

僕はこれで大満足です。

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

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

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

placeholder使いましょう。

Tweet

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

Related posts:

【wordpress】searchform.phpが無いときは！ 【wordpress】excerpt.phpを使おう！ 【wordpress】複数の投稿タイプの記事を一括した新着記事一覧表を作る！【PHP】【手書き】 【wordpress】excerpt.phpを使おう！【応用編】 【wordpress】excerpt.phpを導入したらやっておきたいこと。 【wordpress】個別投稿ページにレコメンド擬きを表示する！【php】 【wordpress】閲覧にログインを必須にする【プラグイン不要】 【WordPress】PHPのバージョンをようやく7.xにしました（5.6から7.3へのアップデート） 【wordpress】facebookページのイイネ！欄を作成する。【手書き】 【wordpress】カテゴリ別記事一覧を作成する。【不具合は自己責任でお願いします】 【wordpress】カテゴリ別・新着記事一覧の自動生成【php】 【wordpress】新着記事一覧ブロック作成【php】