input要素の前と後にアイコンを添えたオシャレなフォームを実装するチュートリアル

メール、リンク、外部リンク、ショッピングカート、ソーシャルメディアなどのアイコンを前後に添えたフォームを実装するチュートリアルを紹介します。

Mini Collection for Prefix & Postfix Input Form

[ad#ad-2]

• デモ
• 実装

デモ

デモページ

デモは3種類、前添え、後添え、前後+カラーリングのパターンがあります。

Prefix
前に添えたパターン

Postfix
後に添えたパターン

Coloured
前後+カラーリングのパターン

実装

HTML

HTMLはシンプルで、アイコンやカラーリングはclassで判別します。

<!-- 1st prefix with email icon and default color (grey) -->
<input placeholder="Type here..." class="ppfix pre email" type="text">

<!-- 2nd postfix with google plus icon and default color (grey) -->
<input placeholder="Type here..." class="ppfix post gplus" type="text">

<!-- 3rd prefix with home icon and blue color -->
<input placeholder="Type here..." class="ppfix pre home blue" type="text">

コードは上から順に、前、後、カラーとなっており、下記のように組み合わせて使用します。

実装のイメージ

デモのclassの切替はjQueryを使用しており、アイコンはFont Awesomeを使用しています。
また、古いブラウザにプレースホルダテキストを表示するためにModernizrをベースにスクリプトとスタイルシートを使用しています。

実装に必要なファイルは全てダウンロードできます。
ダウンロードは「Get the File」からです。