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>
- 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> 요소도 추가합니다. 사용자가 삭제 버튼을 클릭하면 상위 요소가 삭제됩니다. 🎜🎜🎜CSS 스타일 라벨 입력🎜🎜🎜마지막으로 라벨 입력에 일부 CSS 스타일을 추가하여 더욱 아름답게 만들 수도 있습니다. 🎜rrreee🎜위 CSS 스타일에서는 라벨과 삭제 버튼에 각각 몇 가지 스타일을 정의했습니다. 🎜🎜위 코드로 라벨 입력 기능이 포함된 폼을 성공적으로 생성했습니다. 사용자는 레이블을 입력하고 Enter 키를 사용하여 양식에 추가할 수 있습니다. 라벨에 있는 삭제 버튼을 클릭하여 라벨을 삭제할 수도 있습니다. 🎜🎜요약🎜🎜이 글에서는 HTML, CSS, jQuery를 사용하여 라벨 입력 기능이 있는 폼을 만드는 방법을 소개합니다. 먼저 기본 양식 구조를 만든 다음 CSS 스타일을 사용하여 양식을 아름답게 만들었습니다. 다음으로 jQuery를 사용하여 입력 필드에 태그 입력 기능을 추가하고 CSS를 통해 태그 입력 스타일을 지정했습니다. 이러한 기술을 통해 우리는 사용자에게 더 나은 양식 입력 경험을 제공할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜위 내용은 HTML, CSS 및 jQuery를 사용하여 태그 입력이 포함된 양식을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7444
15
1371
52
76
11
38
19
9
6
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩에서 파일을 업로드하는 방법
Apr 07, 2025 pm 01:09 PM
파일 업로드 기능은 Bootstrap을 통해 구현할 수 있습니다. 단계는 다음과 같습니다. 부트 스트랩 CSS 및 JavaScript 파일을 소개합니다. 파일 입력 필드를 만듭니다. 파일 업로드 버튼을 만듭니다. 파일 업로드를 처리합니다 (FormData를 사용하여 데이터를 수집 한 다음 서버로 전송); 사용자 정의 스타일 (선택 사항).
부트 스트랩 목록에서 기본 스타일을 제거하는 방법은 무엇입니까?
Apr 07, 2025 am 10:18 AM
부트 스트랩 목록의 기본 스타일은 CSS 재정의 상태에서 제거 할 수 있습니다. 보다 구체적인 CSS 규칙 및 선택기를 사용하여 부트 스트랩 기본 스타일을 우선적으로 "근접성 원리"및 "가중치 원리"를 따르십시오. 스타일 충돌을 피하기 위해보다 타겟팅 된 선택기를 사용할 수 있습니다. 재정의가 실패한 경우 사용자 정의 CS의 무게를 조정하십시오. 동시에 성능 최적화에주의를 기울이고, 과도하게 사용하지 않으며, 간결하고 효율적인 CSS 코드를 작성하십시오.
부트 스트랩 목록의 크기를 변경하는 방법은 무엇입니까?
Apr 07, 2025 am 10:45 AM
부트 스트랩 목록의 크기는 목록 자체가 아니라 목록이 포함 된 컨테이너의 크기에 따라 다릅니다. Bootstrap의 그리드 시스템 또는 Flexbox를 사용하면 컨테이너의 크기를 제어하여 목록 항목을 간접적으로 크기로 조정할 수 있습니다.
부트 스트랩 내비게이션 바를 설정하는 방법
Apr 07, 2025 pm 01:51 PM
Bootstrap은 내비게이션 막대 설정을위한 간단한 안내서를 제공합니다. 내비게이션 바 컨테이너 추가 브랜드 아이덴티티 추가 내비게이션 링크 추가 (선택 사항) 스타일 조정 스타일 (선택 사항)
부트 스트랩 날짜를 확인하는 방법
Apr 07, 2025 pm 03:06 PM
부트 스트랩의 날짜를 확인하려면 다음 단계를 따르십시오. 필요한 스크립트와 스타일을 소개하십시오. 날짜 선택기 구성 요소를 초기화합니다. 검증을 활성화하려면 데이터 BV 날짜 속성을 설정합니다. 검증 규칙 (예 : 날짜 형식, 오류 메시지 등) 구성; 부트 스트랩 검증 프레임 워크를 통합하고 양식이 제출 된 경우 날짜 입력을 자동으로 확인하십시오.
