How to create a form with tag input using HTML, CSS and jQuery-JS Tutorial-php.cn

How to create a form with tag input using HTML, CSS and jQuery

PHPz

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

Original

1537 people have browsed it

How to create a form with tag input using HTML, CSS and jQuery

How to create a form with tag input function using HTML, CSS and jQuery

In modern web development, forms are an indispensable part. When users fill out a form on a web page, we usually want to add some tags to the form elements to provide a better user experience and readability. In this article, we will learn how to use HTML, CSS, and jQuery to create a form with tagged input capabilities, making the form more beautiful and easier to use.

Use HTML to create a basic form structure

First, we need to use HTML to create a basic form structure. Here is a simple example:

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

Copy after login

In the above example, we have created a form with two input fields (name and email). Use the <label> element to create a label before each input field, and use the for attribute to associate the label with the corresponding input field.

Use CSS to beautify the form

Next, we want to use CSS to beautify the form to make it look more beautiful. The following is a simple CSS style:

/* 表单样式 */
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;
}

Copy after login

In the above CSS style, we have defined some styles for the form, label, input field and submit button respectively.

Add tag input function using jQuery

Now, let’s add tag input function to the input field. We will use jQuery to implement this functionality. First, we need to include the jQuery library in the HTML. Add the following code in the <head> tag:

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

Copy after login

Next, we will use the following jQuery code to implement the tag input function:

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

Copy after login

In the above code , we first select all input fields named tags. Then, when the user presses enter, we get the label from the input field and add it to a <span> element before the input field. Within the <span> element, we also append a <span> element that removes the tag. When the user clicks the delete button, we delete its parent element.

CSS Styling Label Input

Finally, we can also add some CSS styles to the label input to make it look more beautiful.

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

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

Copy after login

In the above CSS style, we have defined some styles for the label and delete button respectively.

Through the above code, we successfully created a form with label input function. The user can enter a label and add it to the form with the Enter key. They can also delete a label by clicking the delete button on the label.

Summary

This article introduces how to use HTML, CSS and jQuery to create a form with label input function. We first created the basic form structure and then used CSS styles to beautify the form. Next, we added tag input functionality to the input field using jQuery and styled the tag input via CSS. Through these technologies, we can provide users with a better form input experience. Hope this article can be helpful to you!

The above is the detailed content of How to create a form with tag input using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!