원본: Forms and Form Input Fields
form 양식은 사용자가 제공한 정보를 HTTP를 통해 서버로 제출하게 하는 요소로, 자바스크립트 웹 초기 버전에서 서버와의 상호 작용 이후에는 항상 새 페이지로 이동한다는 가정 하에 설계된 요소입니다.
하지만 이제는 DOM의 일부이며 form 필드를 나타내는 DOM 요소는 다른 요소에는 없는 속성과 이벤트를 지원합니다.
이를 통해 입력 필드를 검사, 제어하고 기존 form에 기능을 추가하거나 form/field를 블록으로 사용하는 등의 작업을 수행할 수 있습니다.
Table of Contents
Input 필드
웹 양식은 <form> 태그로 그룹화된 입력 필드로 구성됩니다. HTML은 체크박스, 라디오 버튼, 드롭다운 메뉴, 텍스트 입력 필드(textarea) 등의 다양한 필드를 포함합니다.
이 필드에 사용자에게 보일 추가 정보를 넣고 싶다면 툴팁을 사용할 수 있습니다.
대부분의 필드 타입은 <input> 태그를 사용합니다. 이 태그의 type 속성은 필드의 스타일을 지정하는 데 사용됩니다.
다음은 <input> 태그의 type 속성의 예 입니다:
- text: 한 줄 짜리 텍스트 필드
- password: text와 같지만 입력된 문자열을 숨김
- checkbox: on/off 스위치
- radio: 다중 선택 필드
- file: 로컬 컴퓨터의 파일을 선택하게 해주는 필드
인풋 필드는 반드시 <form> 태그 안에 있을 필요는 없고 페이지의 어느 곳에나 넣을 수 있습니다. <form> 태그가 없는 필드에는 submit 기능을 넣을 수 없지만 자바스크립트로 처리할 수 있습니다.
<p><input type="text" value="abc"> (text)</p>
<p><input type="password" value="abc"> (password)</p>
<p><input type="checkbox" checked> (checkbox)</p>
<p>
<input type="radio" value="A" name="choice">
<input type="radio" value="B" name="choice" checked>
<input type="radio" value="C" name="choice"> (radio)
</p>
<p><input type="file"> (file)</p>
이러한 요소에 대한 자바스크립트 인터페이스는 요소의 타입에 따라 다릅니다.
Input 값 가져오기
text 또는 password 타입의 input 필드에는 요소에 입력된 현재 값을 문자열로 가지고 있는 value 속성이 있습니다.
필드의 값이 변경될 때 마다 즉시 확인하려면 input 이벤트에 대한 이벤트 리스너를 등록해야 합니다.
<input type="text"> length: <span id="length">0</span>
<script>
const text = document.querySelector("input");
const output = document.querySelector("#length");
text.addEventListener("input", function () {
output.textContent = text.value.length;
});
</script>
예제 코드의 스크립트에서는 먼저 querySelector() 메소드를 사용하여 input 요소를 text 변수에, span 요소를 output 변수에 참조했습니다.
그 다음 text 변수에 addEventListener() 메소드를 사용하여 input 이벤트에 대한 이벤트 리스너를 추가했습니다.
리스너의 내용은 입력 필드의 값이 변경되면 입력 값의 길이를 span 요소에 업데이트 합니다.
Input Focus
form 필드는 HTML의 대부분의 요소와는 달리 키보드 포커스를 받을 수 있습니다. 이를 클릭하거나 다른 방법으로 활성화하면 active 요소가 됩니다. 즉 키보드의 값이 입력된다는 의미입니다.
이 요소는 focus() 메소드와 blur() 메소드를 사용하여 포커스를 제어할 수 있습니다.
focus() 메소드는 호출된 요소로 포커스를 이동하고 blur() 메소드는 포커스를 제거합니다. document.activeElement 객체의 값은 현재 포커스가 있는 요소를 가리킵니다.
다음의 예제 코드를 개발자 도구에서 실행하고 console.log() 메소드를 사용하여 포커스된 요소의 태그를 출력해 보겠습니다.
<input type="text">
<script>
document.querySelector("input").focus();
console.log(document.activeElement.tagName);
document.querySelector("input").blur();
console.log(document.activeElement.tagName);
</script>
어떤 페이지에서는 사용자가 다른 행동 없이 바로 값을 입력하게 하고 싶은 경우도 있을 것 입니다.
물론 자바스크립트 메소드 호출로 포커스를 정할 수 있지만 HTML 코드로 동일한 작업을 수행할 수 있는 autofocus 속성도 있습니다.
<input type="text" autofocus>필드 비활성화
모든 form 필드는 disabled 속성으로 비활성화 할 수 있습니다.
<button>I'm all right</button>
<button disabled>I'm out</button>비활성화된 필드는 포커스나 값을 변경할 수 없습니다. 이는 활성 필드와는 달리 회색으로 희미하게 보입니다.
비활성화 기능은 서버와 통신하고 있는 경우 통신이 완료될 때 까지 요소를 변경할 수 없게 하는 등의 작업에 사용할 수 있습니다.
이를 통해 사용자의 잘못된 조작으로 해당 작업을 반복하는 등의 일을 막을 수 있습니다.
form 사용 방법
필드가 <form> 요소 안에 있으면 해당 요소와 서로 연결됩니다. 이 때 form 요소는 elements 속성에 필드 목록을 가지게 됩니다.
input 필드의 name 속성은 양식 제출 시 해당 값을 식별하게 해줍니다.
<form action="example/submit.html">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="password"><br>
<button type="submit">Log in</button>
</form>
<script>
const form = document.querySelector("form");
console.log(form.elements[1].type);
console.log(form.elements.password.type);
console.log(form.elements.name.form === form);
</script>
form 요소의 action 속성에는 양식 제출 시 데이터를 보낼 API 서버 주소를 넣습니다.
button 요소의 type이 submit인 경우 클릭하거나 form에서 엔터키를 누를 경우 양식을 제출합니다.
일반적으로 양식을 제출한다는 것은 브라우저가 GET 또는 POST 요청을 사용하여 양식의 action 속성이 나타내는 페이지로 이동한다는 것을 의미합니다. 하지만 그 전에 “submit” 이벤트가 발생합니다.
submit 이벤트는 자바스크립트로 처리할 수 있으며 자동으로 페이지가 넘어가는 현상을 preventDefault() 메소드를 호출하여 막을 수 있습니다.
<form action="example/submit.html">
Value: <input type="text" name="value">
<button type="submit">Save</button>
</form>
<script>
const form = document.querySelector("form");
form.addEventListener("submit", function (event) {
console.log("Saving value", form.elements.value.value);
event.preventDefault();
});
</script>
submit 이벤트를 가로채면 사용자의 입력이 올바른지 확인하고 그렇지 않은 경우 양식 제출을 중지하고 오류 메시지를 표시하는 것과 같은 다양한 작업을 할 수 있습니다.
또는 페이지를 넘기는 작업을 아예 하지 않고 fetch API를 사용하여 데이터만 서버로 보내고 응답을 받게할 수 있습니다.
정리
HTML은 텍스트 필드, 체크박스, 라디오 버튼, 파일 선택기 등 다양한 타입의 필드를 표현할 수 있습니다.
이러한 필드는 자바스크립트로 조작할 수 있는데, 텍스트가 입력되면 input 이벤트 등 다양한 키보드 이벤트가 발생하여 이를 사용해 필드의 값을 가져오거나 수정할 수 있습니다.
form이 제출되면 “submit” 이벤트가 발생하는데, 자바스크립트 이벤트 리스너에서 preventDefault()를 호출해 페이지가 넘어가는 현상을 막을 수 있습니다.