JavaScript 텍스트 상자
우리는 웹 개발에서 많은 스크립팅 언어를 선택하고 사용할 수 있지만 JavaScript는 우리가 사용할 수 있는 최고의 스크립팅 언어 중 하나입니다.
JavaScript는 웹 페이지를 대화형 및 동적으로 만들고 일반적으로 프로그래머와 개발자는 HTML(HyperText Markup Language), XHTML(Extensible HyperText Markup Language)과 같은 마크업 언어 및 CSS(Cascading Style Sheets)와 같은 스타일시트 언어와 함께 JavaScript를 사용합니다.
텍스트 상자는 웹 브라우저, 이메일 클라이언트 등과 같은 많은 프로그램에서 볼 수 있는 중요한 기능입니다. 간단히 말해서 텍스트 상자는 사용자가 텍스트를 입력할 수 있는 그래픽 영역으로 주로 사용자로부터 입력을 받는 데 사용됩니다. .
일반적으로 HTML로 텍스트 상자를 만들 수 있지만 JavaScript를 사용하여 만들 수도 있습니다. 이 기사를 통해 HTML의 도움으로 JavaScript를 사용하여 텍스트 상자를 만드는 방법에 대해 설명합니다.
JavaScript를 사용하여 텍스트 상자를 만들기 전에 HTML을 사용하여 간단한 텍스트 상자를 만드는 방법을 살펴보겠습니다.
HTML을 사용하여 텍스트 상자 만들기
<input> 태그를 사용하여 HTML로 텍스트 상자를 만들 수 있습니다. 속성으로 type을 제공하고 그 값으로 text를 제공합니다.
텍스트 상자를 만드는 구문은 다음과 같습니다.
<input type = "text">
위의 코드 조각을 사용하여 텍스트 상자를 만드는 방법을 살펴보겠습니다. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML text box</title>
</head>
<body>
<input type="text", placeholder="type something..">
</body>
</html>
위의 코드 조각은 <input> 태그를 사용하여 간단한 텍스트 상자를 만드는 간단한 코드 조각입니다. 보다 정확하게 보기 위해 일부 단어를 값으로 사용하여 placeholder 속성을 추가했습니다.
아래 출력을 제공합니다.
위에 표시된 것처럼 예상대로 간단한 텍스트 상자를 얻습니다.
JavaScript를 사용하여 텍스트 상자 만들기
HTML을 사용하는 대신 JavaScript를 사용하여 텍스트 상자를 만들 수 있습니다. 다음은 이를 달성하기 위해 따라야 할 세 단계입니다.
-
createElement()함수를 사용하여 입력 요소를 생성하고 변수에 할당합니다. -
type을 속성으로 설정하고text를 입력 요소의 값으로 설정하십시오. -
<body>태그 안에input요소를 추가합니다.
위의 단계에 대한 코드를 작성해 보겠습니다.
암호:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript text box</title>
</head>
<body>
<script>
const textBox = document.createElement("input");
textBox.setAttribute("type", "text");
document.body.appendChild(textBox);
</script>
</body>
</html>
위의 코드에서 앞서 언급한 세 단계를 코드 덩어리로 변환했습니다. <body> 태그 내에서 createElement() 함수를 사용하여 input 요소를 생성하고 해당 기능을 textbox라는 변수에 할당했습니다.
그런 다음 type을 속성으로 설정하고 text를 새로 선언된 변수의 값으로 설정합니다. 그런 다음 textbox 변수(input 요소)를 <body> 태그에 추가했습니다.
이제 구현된 코드를 실행하면 이전에 얻은 것처럼 간단한 텍스트 상자가 나타납니다. 아래 출력을 참조하십시오.
JavaScript를 사용하여 여러 텍스트 상자 만들기
하나 이상의 텍스트 상자를 만들어야 하는 경우가 있습니다. 때때로 우리는 특정 사용자의 생년월일을 얻기 위해 양식에 섹션을 추가합니다.
이러한 상황에서 개발자는 날짜, 월 및 연도를 별도로 가져오기를 원합니다. 이를 위해 여러 텍스트 상자를 사용합니다.
둘 이상의 텍스트 상자를 만드는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 for 루프를 사용하는 것입니다. for 루프를 사용하여 여러 텍스트 상자를 만드는 방법을 살펴보겠습니다.
먼저 <div> 태그를 만들고 그 안에 텍스트 상자를 만듭니다. 또한 다음과 같이 <div> 태그에 ID를 부여합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>JavaScript multiple text boxes</title>
</head>
<body>
<div id="textBoxes"> </div>
<script src="main.js"></script>
</body>
</html>
다음으로 JavaScript 코드를 구현할 수 있습니다. 별도의 파일이나 인라인 JavaScript 코드로 작성할 수 있습니다.
이 예에서는 별도의 JavaScript 파일을 구현합니다. 아래 코드를 참조하십시오.
function createTextBoxes(number) {
var string = '';
var i;
for (i = 0; i < number; i++) {
string += '<input type = "text" placeholder = "type something..">';
}
document.getElementById('textBoxes').innerHTML = string;
}
createTextBoxes(4);
위의 코드 덩어리에서 우리는 createTextBoxes라는 함수를 만들고 숫자를 매개변수로 지정했습니다. 숫자는 필요한 텍스트 상자의 수입니다.
그런 다음 빈 문자열을 문자열로 지정하고 i를 반복자로 지정했습니다. 그 문장 아래에서 우리는 number 매개변수의 값에 도달할 때까지 반복하는 for 루프를 사용했습니다.
그런 다음 for 루프 내에서 <input> 태그를 사용하여 텍스트 상자를 만들었습니다. 우리는 그것을 텍스트 상자로 식별하기 위해 text 값과 함께 type 속성과 일부 텍스트와 함께 placeholder 속성을 제공했습니다.
그런 다음 해당 ID를 사용하여 HTML <body> 태그의 관련 구성 요소에 할당합니다.
마지막으로 createTextBoxes() 함수에 4를 매개변수로 전달하여 함수를 호출했습니다.
코드를 실행하면 아래와 같은 결과가 출력됩니다.
보시다시피, 우리는 우리가 준 자리 표시자가 있는 네 개의 텍스트 상자를 얻었습니다.
결론
이 글에서 우리는 텍스트 상자가 무엇이며 왜 필요한지에 대해 논의했습니다. 또한 JavaScript와 HTML을 사용하여 텍스트 상자를 만드는 방법도 배웠습니다.
먼저 JavaScript를 사용하여 간단한 텍스트 상자를 만든 다음 예제를 통해 for 루프를 사용하여 여러 텍스트 상자를 만드는 방법을 시연했습니다.
JavaScript를 사용하여 텍스트 상자를 만드는 방법에는 더 많은 방법이 있지만 위에서 설명한 방법은 목표를 달성하는 가장 간단하고 쉬운 방법입니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.