HTML, CSS 및 jQuery를 사용하여 플로팅 프롬프트가 있는 양식을 만드는 방법

HTML, CSS 및 jQuery를 사용하여 플로팅 프롬프트가 있는 양식을 만드는 방법

현대 웹 디자인에서 양식은 필수 구성 요소 중 하나입니다. 사용자 경험을 향상시키기 위해 사용자가 양식을 올바르게 작성하도록 안내하기 위해 양식에 부동 프롬프트를 추가해야 하는 경우가 많습니다. 이 문서에서는 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"을 추가했습니다. 그런 다음 부동 팁에 대한 절대 위치 클래스 "도구 설명"을 정의합니다. 처음에 프롬프트를 보이지 않게 만들고 프롬프트 스타일에 몇 가지 수정 사항을 추가하려면 "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!