HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법
- PHPz원래의
- 2023-10-28 09:45:111472검색
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></label> 요소를 사용하여 각 입력 필드 앞에 레이블을 만들고 for 속성을 사용하여 레이블을 해당 입력 필드와 연결합니다. <label></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> <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></span>元素中，我们还附加了一个用于删除标签的<span></span>
- CSS를 사용하여 양식을 아름답게 만들기
- 다음으로 CSS를 사용하여 양식을 더욱 아름답게 만들어 보겠습니다. 다음은 간단한 CSS 스타일입니다.
/* 标签样式 */
.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를 사용하여 태그 입력 함수 추가
이제 입력 필드에 태그 입력 함수를 추가해 보겠습니다. 우리는 이 기능을 구현하기 위해 jQuery를 사용할 것입니다. 먼저 HTML에 jQuery 라이브러리를 포함해야 합니다.rrreee
다음으로 다음 jQuery 코드를 사용하여 태그 입력 기능을 구현합니다.rrreee
위 코드에서는 먼저 모든 항목을 선택합니다. 이름태그의 입력 필드입니다. 그런 다음 사용자가 Enter 키를 누르면 입력 필드에서 레이블을 가져와 입력 필드 앞의 <span></span> 요소에 추가합니다. <span></span> 요소 내에 태그를 제거하는 <span></span> 요소도 추가합니다. 사용자가 삭제 버튼을 클릭하면 상위 요소가 삭제됩니다. 🎜🎜🎜CSS 스타일 라벨 입력🎜🎜🎜마지막으로 라벨 입력에 일부 CSS 스타일을 추가하여 더욱 아름답게 만들 수도 있습니다. 🎜rrreee🎜위 CSS 스타일에서는 라벨과 삭제 버튼에 각각 몇 가지 스타일을 정의했습니다. 🎜🎜위 코드로 라벨 입력 기능이 포함된 폼을 성공적으로 생성했습니다. 사용자는 레이블을 입력하고 Enter 키를 사용하여 양식에 추가할 수 있습니다. 라벨에 있는 삭제 버튼을 클릭하여 라벨을 삭제할 수도 있습니다. 🎜🎜요약🎜🎜이 글에서는 HTML, CSS, jQuery를 사용하여 라벨 입력 기능이 있는 폼을 만드는 방법을 소개합니다. 먼저 기본 양식 구조를 만든 다음 CSS 스타일을 사용하여 양식을 아름답게 만들었습니다. 다음으로 jQuery를 사용하여 입력 필드에 태그 입력 기능을 추가하고 CSS를 통해 태그 입력 스타일을 지정했습니다. 이러한 기술을 통해 우리는 사용자에게 더 나은 양식 입력 경험을 제공할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜위 내용은 HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!