HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが頻繁に使用するものを最適化するデザイナーもいます。一般的な入力ボックスはどのように最適化されていますか?ユーザーエクスペリエンスの観点から、ユーザーの手順を簡素化し、ユーザーにとってより便利に使用できるようにすることが、ユーザビリティの向上につながります。たとえば、入力ボックスの上にマウスを移動すると入力ボックスの色が変わったり、入力ボックス内のデフォルトのテキストが自動的に選択されたり、入力ボックスをクリックするとデフォルトのコンテンツが自動的にクリアされたりします。

この効果は複雑に聞こえますが、実際には非常に簡単です。ほんの少しの JavaScript コードで解決できます。ここにいくつかのエフェクトのコードを示します。

1. 入力ボックスをクリックしてコンテンツの HTML コードを選択します。

コードをコピー

コードは次のとおりです。

<フォーム id="form1" 名前="form1" メソッド="投稿" アクション="">
<label for="textfield">コンテンツを入力:</label>
<input name="テキストフィールド" type="text" id="テキストフィールド" value="Dreamweaver" onfocus="this.select()" />
</フォーム>

このコードの最も重要な部分は onfocus です。onfocus を使用しない場合は、onfocus="this.select()" のように onclick を使用して同じ効果を実現することもできます。

2. 入力ボックスの上にマウスを置いたときの境界線の色または背景色を変更する

この効果を実現するには 2 つの方法があります。方法 1 は CSS で疑似要素 :focus を使用することです。方法 2 は小さな JavaScript を使用することです。方法 1 の HTML コードは、次のセクションが CSS に追加されることを除いて、上記の例と同じです。

コードをコピー

コードは次のとおりです。

入力:ホバー { 境界線:1px 実線 #F00; }

マウスを入力ボックスの上に置くと、入力ボックスの境界線が赤くなりますが、この方法は Firefox ブラウザと IE7 以上でのみ有効です。IE6 ではサポートされていないため、一定の制限があります。方法 2 のコードの大部分は上記の例と同じですが、最後にマウスホバーコードのセクションが追加されています。

コードをコピー

コードは次のとおりです。

このコードを使用すると、ほとんどのブラウザでサポートできます。

3. 入力ボックスをクリックするとデフォルトのテキストが消えます

もう一つの効果があります。マウスで入力ボックスをクリックすると、元のデフォルトのテキストが消えます。他の新しいコンテンツを入力してからマウスを離すと、入力ボックス内の新しいコンテンツは変更されません。新しいコンテンツを入力しない場合は、マウスを入力ボックスから離すとデフォルトのテキストが復元されます。この効果は、小さな JavaScript を追加することで実現できます。

コードをコピー

コードは次のとおりです。

<フォーム id="form1" 名前="form1" メソッド="投稿" アクション="">
<label for="textfield">コンテンツを入力:</label>
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor='#FF6600'" onmouseout="this.style.borderColor=''" onFocus="if (value =='Dreamweaver'){value =''}" onBlur="if (value ==''){value='Dreamweaver'}"/>
</フォーム>

HTML5 では、input の placeholder 属性を直接使用できます。

コードをコピー

コードは次のとおりです。

上記の 3 つのエフェクトは、比較的簡単な JavaScript アプリケーションです。 HTML コードの範囲を超えていますが、これらを習得すると、 HTML アプリケーションや Web ページの作成に大きな利便性がもたらされます。したがって、必要に応じて、簡単な JavaScript も習得する必要があります。

<<: Vue の高度な使用方法チュートリアル動的コンポーネント

>>: MySQL はどのようにしてマルチバージョンの同時実行性を実現するのでしょうか?