HTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法
現代の Web デザインでは、フォームは不可欠なコンポーネントの 1 つです。ユーザー エクスペリエンスを向上させるために、多くの場合、ユーザーがフォームに正しく入力できるように、フローティング プロンプトをフォームに追加する必要があります。この記事では、HTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法を紹介し、具体的なコード例を示します。
まず、HTML フォームを作成する必要があります。フォームには、いくつかの入力フィールドと、対応するラベルおよびプロンプト情報を追加する必要があります。
<form id="myForm"> <div class="form-group"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <span class="tooltip">请输入您的姓名</span> </div> <div class="form-group"> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> <span class="tooltip">请输入有效的邮箱地址</span> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <span class="tooltip">密码长度应为6-12位</span> </div> <button type="submit">提交</button> </form>
次に、CSS を使用してフォームのスタイルとレイアウトを定義し、フローティング プロンプトにスタイルを追加する必要があります。
.form-group { position: relative; margin-bottom: 20px; } .tooltip { position: absolute; top: 100%; left: 0; background-color: #eee; padding: 5px; display: none; } .tooltip::before { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #eee transparent; } .tooltip::after { content: ""; position: absolute; top: -5px; left: 50%; margin-left: -3px; border-width: 3px; border-style: solid; border-color: transparent transparent #fff transparent; }
上記のコードでは、フォーム内の各入力フィールドの親要素に、相対的に配置されたクラス「form-group」を追加しました。次に、フローティング チップの絶対配置クラス「tooltip」を定義します。 「display: none;」を使用して、最初はプロンプトを非表示にし、プロンプトのスタイルにいくつかの変更を加えます。
最後に、jQuery を使用して、ユーザーが入力フィールド上にマウスを置いたときにフローティング チップを表示する機能を実装する必要があります。
$(document).ready(function() { $('input').on('mouseover', function() { $(this).next('.tooltip').fadeIn(); }); $('input').on('mouseout', function() { $(this).next('.tooltip').fadeOut(); }); $('#myForm').on('submit', function() { // 表单验证逻辑 if ($('input#name').val() === '') { $('input#name').next('.tooltip').fadeIn(); return false; } if ($('input#email').val() === '') { $('input#email').next('.tooltip').fadeIn(); return false; } // 其他表单验证逻辑 return true; }); });
上記のコードでは、ユーザーが入力フィールド上にマウスを置くと、「fadeIn()」メソッドを使用して、対応するフローティング プロンプトを表示します。 「fadeOut()」メソッドを使用して、マウスが入力フィールドの外に出たときにフローティングチップを非表示にします。さらに、フォームが送信されるときに、必要に応じてフォーム検証ロジックを追加し、検証が失敗した場合に対応するフローティング プロンプトを表示できます。
上記の HTML、CSS、および jQuery コードを使用して、フローティング プロンプトを持つフォームを正常に作成できました。ユーザーがフォームに入力すると、フローティング プロンプトを通じて対応するプロンプト情報を取得できるため、ユーザー エクスペリエンスが向上します。この記事が、HTML、CSS、jQuery を使用してフォームを作成する際の参考になれば幸いです。
以上がHTML、CSS、jQuery を使用してフローティング プロンプトを持つフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。