HTML DOM의 입력 텍스트(Input Text) 객체는 type 속성이 "text"로 지정된 <input> 요소와 연관됩니다. 자바스크립트에서는 createElement() 메서드를 사용해 새로운 텍스트 입력 필드를 생성할 수 있으며, getElementById() 메서드를 사용해 이미 존재하는 요소에 접근할 수 있습니다.
입력 텍스트 객체의 주요 속성
텍스트 입력 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autocomplete | 텍스트 필드의 autocomplete(자동 완성) 속성 값을 설정하거나 반환합니다. |
| autofocus | 페이지가 로드될 때 해당 텍스트 필드가 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다. |
| defaultValue | 텍스트 필드의 기본값(default value)을 설정하거나 반환합니다. |
| disabled | 텍스트 필드가 비활성화 상태인지 여부를 설정하거나 반환합니다. |
| form | 해당 텍스트 필드를 포함하고 있는 폼(form)의 참조를 반환합니다. |
| maxLength | 텍스트 필드에 입력할 수 있는 최대 글자 수(maxlength)를 설정하거나 반환합니다. |
| name | 텍스트 필드의 name 속성 값을 설정하거나 반환합니다. |
| pattern | 텍스트 필드의 입력 형식을 검사하는 pattern 속성 값을 설정하거나 반환합니다. |
| placeholder | 텍스트 필드에 표시되는 안내 문구(placeholder) 속성 값을 설정하거나 반환합니다. |
| readOnly | 텍스트 필드가 읽기 전용인지 여부를 설정하거나 반환합니다. |
| required | 폼을 제출하기 전에 해당 필드의 입력이 필수인지 여부를 설정하거나 반환합니다. |
| size | 텍스트 필드의 크기(size) 속성 값을 설정하거나 반환합니다. |
| type | 텍스트 필드가 어떤 종류의 폼 요소인지 반환하는 읽기 전용(read-only) 속성입니다. |
| value | 텍스트 필드의 value 속성 값을 설정하거나 반환합니다. |
| list | 텍스트 필드와 연결된 datalist 요소에 대한 참조를 반환합니다. |
문법(Syntax)
입력 텍스트 객체를 다루는 기본 문법은 다음과 같습니다.
입력 텍스트 객체 생성하기:
var P = document.createElement("INPUT");
P.setAttribute("type", "text");
예제
버튼을 클릭하면 type이 "text"인 입력 필드를 동적으로 생성하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function createText() {
var P = document.createElement("INPUT");
P.setAttribute("type", "text");
document.body.appendChild(P);
}
</script>
</head>
<body>
<h1>Text object example</h1>
<p>아래 버튼을 클릭하면 텍스트 타입의 입력 필드가 생성됩니다.</p>
<button onclick="createText()">CREATE</button>
<br><br>
USERNAME:
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭한 후:
버튼을 클릭하면 createElement() 메서드를 통해 새로운 텍스트 입력 필드가 body에 추가되어, 사용자가 직접 입력할 수 있는 텍스트 박스가 화면에 나타나는 것을 확인할 수 있습니다.