HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법

PHPz

풀어 주다： 2023-10-28 09:45:11

원래의

1536명이 탐색했습니다.

HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법

HTML, CSS 및 jQuery를 사용하여 태그 입력 기능이 있는 양식을 만드는 방법

현대 웹 개발에서 양식은 필수적인 부분입니다. 사용자가 웹 페이지에서 양식을 작성할 때 일반적으로 더 나은 사용자 경험과 가독성을 제공하기 위해 양식 요소에 일부 태그를 추가하려고 합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 태그가 지정된 입력 기능이 있는 양식을 생성하여 양식을 더욱 아름답고 사용하기 쉽게 만드는 방법을 알아봅니다.

HTML을 사용하여 기본 양식 구조 만들기

먼저 HTML을 사용하여 기본 양식 구조를 만들어야 합니다. 다음은 간단한 예입니다.

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

로그인 후 복사

위 예에서는 두 개의 입력 필드(이름 및 이메일)가 있는 양식을 만들었습니다. <label> 요소를 사용하여 각 입력 필드 앞에 레이블을 만들고 for 속성을 사용하여 레이블을 해당 입력 필드와 연결합니다. <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;
}

로그인 후 복사

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

使用jQuery添加标签输入功能

现在，我们来为输入字段添加标签输入功能。我们将使用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;
}

로그인 후 복사

위 CSS 스타일에서는 양식, 라벨, 입력 필드 및 제출 버튼에 대한 몇 가지 스타일을 각각 정의했습니다.

jQuery를 사용하여 태그 입력 함수 추가

rrreee

태그

<span>

위 내용은 HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!