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.
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>
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样式：
/* 表单样式 */
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;
}在上面的CSS样式中，我们为表单、标签、输入字段和提交按钮分别定义了一些样式。
现在，我们来为输入字段添加标签输入功能。我们将使用jQuery来实现这个功能。首先，我们需要在HTML中包含jQuery库。在<head>标签中添加以下代码：
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head>
接下来，我们将使用以下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();
});
});在上面的代码中，我们首先选择所有名称为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;
}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
Fügen wir nun die Tag-Eingabefunktion zum Eingabefeld hinzu. Wir werden jQuery verwenden, um diese Funktionalität zu implementieren. Zuerst müssen wir die jQuery-Bibliothek in den HTML-Code einbinden. Fügen Sie den folgenden Code imrrreee
Als Nächstes verwenden wir den folgenden jQuery-Code, um die Tag-Eingabefunktionalität zu implementieren:rrreee
Im obigen Code wählen wir zunächst alle aus die Namen Es ist das Eingabefeld vontags. Wenn der Benutzer dann die Eingabetaste drückt, rufen wir die Beschriftung aus dem Eingabefeld ab und fügen sie einem <span>-Element vor dem Eingabefeld hinzu. Innerhalb des <span>-Elements fügen wir außerdem ein <span>-Element hinzu, das das Tag entfernt. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, löschen wir das übergeordnete Element. 🎜🎜🎜Beschriftungseingabe im CSS-Stil🎜🎜🎜Schließlich können wir der Beschriftungseingabe auch einige CSS-Stile hinzufügen, damit sie schöner aussieht. 🎜rrreee🎜Im obigen CSS-Stil haben wir einige Stile für die Beschriftung bzw. die Schaltfläche „Löschen“ definiert. 🎜🎜Mit dem obigen Code haben wir erfolgreich ein Formular mit Etiketteneingabefunktion erstellt. Der Benutzer kann eine Beschriftung eingeben und diese mit der Eingabetaste zum Formular hinzufügen. Sie können ein Etikett auch löschen, indem Sie auf dem Etikett auf die Schaltfläche „Löschen“ klicken. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie mit HTML, CSS und jQuery ein Formular mit Etiketteneingabefunktion erstellen. Wir haben zunächst die grundlegende Formularstruktur erstellt und dann CSS-Stile verwendet, um das Formular zu verschönern. Als Nächstes haben wir dem Eingabefeld mithilfe von jQuery eine Tag-Eingabefunktion hinzugefügt und die Tag-Eingabe mithilfe von CSS gestaltet. Durch diese Technologien können wir Benutzern ein besseres Formulareingabeerlebnis bieten. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein! 🎜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!
