HTML入力ボックスを最適化する方法

今回は 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 サイトの他の関連記事に注目してください。

関連記事:

WebページでEnterを押した後にフォームが自動的に送信され、他のページにジャンプする場合の問題を解決する方法

テーブルの幅を修正する方法 table-layout:fixed

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