So erstellen Sie ein Formular mit einer schwebenden Eingabeaufforderung mithilfe von HTML, CSS und jQuery

So erstellen Sie ein Formular mit schwebenden Eingabeaufforderungen mithilfe von HTML, CSS und jQuery

Im modernen Webdesign sind Formulare eine der unverzichtbaren Komponenten. Um die Benutzererfahrung zu verbessern, müssen wir häufig einige schwebende Eingabeaufforderungen zum Formular hinzufügen, um Benutzer beim korrekten Ausfüllen des Formulars anzuleiten. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery ein Formular mit schwebenden Eingabeaufforderungen erstellen, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir das HTML-Formular erstellen. Im Formular müssen wir einige Eingabefelder sowie entsprechende Beschriftungen und Eingabeaufforderungsinformationen hinzufügen.

<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>

Als nächstes müssen wir CSS verwenden, um den Stil und das Layout des Formulars zu definieren und Stile zur schwebenden Eingabeaufforderung hinzuzufügen.

.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;
}

Im obigen Code haben wir dem übergeordneten Element jedes Eingabefelds im Formular eine relativ positionierte Klasse „form-group“ hinzugefügt. Anschließend definieren wir eine absolut positionierte Klasse „tooltip“ für die schwebende Spitze. Verwenden Sie „display: none;“, um die Eingabeaufforderung zunächst unsichtbar zu machen und einige Änderungen am Stil der Eingabeaufforderung vorzunehmen.

Schließlich müssen wir mit jQuery die Funktion implementieren, einen schwebenden Tipp anzuzeigen, wenn der Benutzer mit der Maus über das Eingabefeld fährt.

$(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;
  });
});

Wenn der Benutzer im obigen Code mit der Maus über das Eingabefeld fährt, verwenden wir die Methode „fadeIn()“, um die entsprechende schwebende Eingabeaufforderung anzuzeigen. Wir verwenden die Methode „fadeOut()“, um die schwebende Spitze auszublenden, wenn sich die Maus aus dem Eingabefeld bewegt. Darüber hinaus können wir beim Absenden des Formulars nach Bedarf Formularvalidierungslogik hinzufügen und die entsprechende schwebende Eingabeaufforderung anzeigen, wenn die Validierung fehlschlägt.

Mit dem oben genannten HTML-, CSS- und jQuery-Code haben wir erfolgreich ein Formular mit einer schwebenden Eingabeaufforderung erstellt. Wenn Benutzer das Formular ausfüllen, können sie über schwebende Eingabeaufforderungen entsprechende Eingabeaufforderungsinformationen erhalten, was die Benutzererfahrung verbessert. Ich hoffe, dieser Artikel hilft Ihnen beim Erstellen von Formularen mit HTML, CSS und jQuery!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Formular mit einer schwebenden Eingabeaufforderung mithilfe von HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!