So erstellen Sie ein Formular mit Tag-Eingabe mithilfe von HTML, CSS und jQuery-js-Tutorial-php.cn

So erstellen Sie ein Formular mit Tag-Eingabe mithilfe von HTML, CSS und jQuery

PHPz

Freigeben： 2023-10-28 09:45:11

Original

1537 Leute haben es durchsucht

So erstellen Sie ein Formular mit Tag-Eingabe mithilfe von HTML, CSS und jQuery

So erstellen Sie ein Formular mit Tag-Eingabefunktion mithilfe von HTML, CSS und jQuery

In der modernen Webentwicklung sind Formulare ein unverzichtbarer Bestandteil. Wenn Benutzer ein Formular auf einer Webseite ausfüllen, möchten wir normalerweise einige Tags zu den Formularelementen hinzufügen, um eine bessere Benutzererfahrung und Lesbarkeit zu gewährleisten. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und jQuery ein Formular mit getaggten Eingabefunktionen erstellen, wodurch das Formular schöner und benutzerfreundlicher wird.

Erstellen Sie eine grundlegende Formularstruktur mit HTML.

Zuerst müssen wir eine grundlegende Formularstruktur mit HTML erstellen. Hier ist ein einfaches Beispiel:

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="提交">
</form>

Nach dem Login kopieren

Im obigen Beispiel haben wir ein Formular mit zwei Eingabefeldern (Name und E-Mail) erstellt. Verwenden Sie das Element <label>, um vor jedem Eingabefeld eine Beschriftung zu erstellen, und verwenden Sie das Attribut for, um die Beschriftung dem entsprechenden Eingabefeld zuzuordnen. <label>元素创建一个标签，使用for属性将标签与相应的输入字段关联起来。

使用CSS美化表单

接下来，我们希望使用CSS美化表单，使其看起来更加漂亮。以下是一个简单的CSS样式：

/* 表单样式 */
form {
  margin: 20px;
  padding: 20px;
  background: #f1f1f1;
  border-radius: 5px;
}

/* 标签样式 */
label {
  display: block;
  margin: 10px 0;
  font-weight: bold;
}

/* 输入字段样式 */
input[type="text"], input[type="email"] {
  padding: 10px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

/* 提交按钮样式 */
input[type="submit"] {
  padding: 10px 20px;
  background: #1abc9c;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

Nach dem Login kopieren

在上面的CSS样式中，我们为表单、标签、输入字段和提交按钮分别定义了一些样式。

使用jQuery添加标签输入功能

现在，我们来为输入字段添加标签输入功能。我们将使用jQuery来实现这个功能。首先，我们需要在HTML中包含jQuery库。在<head>标签中添加以下代码：

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

Nach dem Login kopieren

接下来，我们将使用以下jQuery代码来实现标签输入功能：

$(document).ready(function() {
  $('input[name="tags"]').on('keydown', function(e) {
    if (e.keyCode === 13) { // Enter key
      e.preventDefault();
      
      var tag = $(this).val();
      
      if (tag !== "") {
        $(this).before('<span class="tag">' + tag + '<span class="cross">✖</span></span>');
        $(this).val("");
      }
    }
  });
  
  $(document).on('click', '.cross', function() {
    $(this).parent().remove();
  });
});

Nach dem Login kopieren

在上面的代码中，我们首先选择所有名称为tags的输入字段。然后，当用户按下回车键时，我们获取输入字段中的标签，并将其添加到输入字段之前的一个<span>元素中。在<span>元素中，我们还附加了一个用于删除标签的<span>

/* 标签样式 */
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  background: #1abc9c;
  color: #fff;
  border-radius: 3px;
}

/* 删除按钮样式 */
.cross {
  margin-left: 5px;
  cursor: pointer;
}

Nach dem Login kopieren

Im obigen CSS-Stil haben wir einige Stile für das Formular, die Beschriftung, das Eingabefeld und die Senden-Schaltfläche definiert.

Verwenden Sie jQuery, um die Tag-Eingabefunktion hinzuzufügen

rrreee

tags

<span>

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