在网页开发中，创建一个带标签输入功能的表单能极大提升用户体验。HTML、CSS 和 jQuery 作为前端开发的重要技术，结合起来使用可以轻松实现这一功能。

利用 HTML 搭建表单的基本结构。定义一个 <form> 标签作为表单的容器，在其中添加 <input> 元素用于用户输入内容，同时添加 <span> 或 <label> 标签来作为标签的载体。例如：

<form id="tagForm">
    <input type="text" id="tagInput" placeholder="输入标签">
    <div id="tagContainer"></div>
</form>

这里的 id 为后续使用 CSS 和 jQuery 进行操作提供了唯一标识。

接着，使用 CSS 对表单进行样式设计，使其看起来更加美观和易用。可以设置输入框和标签容器的宽度、高度、边框、背景颜色等样式属性。比如：

#tagInput {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#tagContainer {
    margin-top: 10px;
}
.tag {
    display: inline-block;
    background-color: #007BFF;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

其中，.tag 类用于定义每个标签的样式。

最后，借助 jQuery 实现标签输入的交互功能。通过监听输入框的按键事件，判断用户输入的内容是否符合添加标签的条件。当用户输入完成并按下特定按键（如逗号）时，将输入内容作为一个新标签添加到标签容器中。代码示例如下：

$(document).ready(function() {
    $('#tagInput').keypress(function(event) {
        if (event.which === 188) {
            var tagText = $(this).val().trim();
            if (tagText!== '') {
                $('#tagContainer').append('<span class="tag">' + tagText + '</span>');
                $(this).val('');
            }
        }
    });
});

这段代码通过 $(document).ready() 确保在文档加载完成后执行，keypress 事件监听按键操作，当按下逗号（键码 188）时，获取输入内容并添加为新标签，同时清空输入框。

通过以上 HTML、CSS 和 jQuery 的协同工作，就能成功创建一个带标签输入功能的表单，为用户提供便捷的输入体验，满足各种实际应用场景的需求。