HTML 入力ボックスを最適化してユーザー エクスペリエンスと使いやすさを向上させる方法

今回は、HTMLの入力ボックスを最適化してユーザーエクスペリエンスと使いやすさを向上させる方法についてお届けします。次に実際のケースを見てみましょう。 ユーザー エクスペリエンスと使いやすさを向上させるために、デザイナーによっては、入力ボックスなど、Web ページでユーザーが頻繁に使用するものを最適化することがあります。一般的な入力ボックスはどのように最適化されますか?ユーザーエクスペリエンスの観点からは、マウスを入力ボックスの上に置いたときに入力ボックスの色を変更したり、入力ボックス内のデフォルトのテキストを自動的に選択したりするなど、ユーザーの手順を簡素化し、ユーザーの利便性を向上させることができます。 、またはクリックしてボックスを開いたときにデフォルトのコンテンツを自動的にクリアするなどを入力します。

この効果は複雑に思えますが、実際には非常に簡単で、ほんの短い

javascript
コードだけで解決できます。以下にいくつかのエフェクトのコードを紹介します。 1. 入力ボックスをクリックして、コンテンツの HTML コードを選択します。

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" /> 
</form>

このコードの最も重要な部分は、onfocus を使用しない場合、

onclick

を使用しても同じ効果を実現できます。 onfocus="this.select()" となります。 2. マウスが入力ボックス上にあるときに境界線の色または背景色を変更します

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

input:hover { border:1px solid #F00; }

マウスが入力ボックスの上にあると、入力ボックスの境界線が表示されます。赤に変わりますが、この方法は Firefox および IE7 以降でのみ使用可能であり、IE6 ではサポートされていないため、特定の制限があります。 方法 2 のコードは、マウス ホバー コードが最後に追加されていることを除いて、上記の例とほとんど同じです:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver"onfocus="this.select()" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" /> 
</form>

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

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

入力ボックスをクリックすると、元のデフォルトのテキストが消えます。他の新しいコンテンツを入力してからマウスを移動すると、入力ボックスの新しいコンテンツは変更されません。新しいコンテンツを入力しなかった場合、マウスは入力ボックスから離れ、デフォルトのテキストが復元されます。 この効果は、短い JavaScript 判定を追加することで実現できます:

<form id="form1" name="form1" method="post" action=""> 
<label for="textfield">输入内容：</label> 
<input name="textfield" type="text" id="textfield" value="Dreamweaver" onmouseover="this.style.borderColor=&#39;#FF6600&#39;" onmouseout="this.style.borderColor=&#39;&#39;" onFocus="if (value ==&#39;Dreamweaver&#39;){value =&#39;&#39;}" onBlur="if (value ==&#39;&#39;){value=&#39;Dreamweaver&#39;}"/> 
</form>

HTML5 では、input のプレースホルダー属性を直接使用できます:

<input type="search" name="user_search" placeholder="Search W3School" />

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

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

HTML で入力ドロップダウン メニューを実装する方法

CSS3 でプログレッシブ エンハンスメントとグレースフル デグラデーションを使用する方法

新しい単位 vw、vh、vmin の使用方法、および css3 の vmax

HTML で title 属性を使用して、マウスがホバーしている場所にテキストを表示する方法

以上がHTML 入力ボックスを最適化してユーザー エクスペリエンスと使いやすさを向上させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。