JavaScript - DOM Forms: A Beginner's Guide

안녕하세요, 야심찬 프로그래머 여러분! 오늘 우리는 자바스크립트와 DOM Forms의 흥미로운 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 가족 교사로서 저는 이 여정을 단계별로 안내해 드리겠습니다. 그러니 가장 좋아하는 음료를 가져와 편안하게 앉아, 이 모험을 함께 시작해 보세요!

JavaScript - DOM Forms

The DOM Forms

자바스크립트와 폼에 뛰어들기 전에 잠시 DOM Forms에 대해 이해해 보겠습니다. DOM은 Document Object Model의 약자로, 자바스크립트가 웹 페이지의 HTML 요소와 상호작용하는 방법을 의미합니다.

DOM을 웹 페이지의 가족 나무라고 생각해 보세요. 각 요소는 가족 구성원처럼 보이고, 자바스크립트는 모두와 소통하고 일을 일으킬 수 있는 멋진 사촌입니다!

이제 폼에 대해 생각해 보겠습니다. 폼은 웹 세상의 상호작용 질문지입니다. 사용자가 데이터를 입력하고 선택하고 웹사이트에 정보를 제출할 수 있도록 합니다. 간단한 HTML 폼을 보겠습니다:

<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<button type="submit">제출</button>
</form>

이 폼에는 이름을 입력할 수 있는 입력 필드와 제출 버튼이 있습니다. 간단하죠? 이제 이 폼을 자바스크립트로 어떻게 상호작용할 수 있는지 보겠습니다!

JavaScript Form Submission

사용자가 폼을 작성하고 제출 버튼을 눌렀을 때, 우리는 종종 서버로 보내기 전에 그 데이터를 처리하고 싶습니다. 이때 자바스크립트가 유용하게 쓰입니다!

폼 제출을 자바스크립트로 처리하는 예제를 보겠습니다:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 폼이 정상적으로 제출되는 것을 막습니다

var name = document.getElementById('name').value;
console.log('안녕하세요, ' + name + '!');
});

이를 간단히 설명하자면:

우리는 document.getElementById('myForm')을 사용하여 폼을 선택합니다.
'submit' 이벤트에 대한 이벤트 리스너를 추가합니다.
event.preventDefault()는 폼이 정상적으로 제출되는 것을 막습니다 (이는 페이지를 새로고침하는 것을 방지합니다).
우리는 이름 입력 필드의 값을 가져와 콘솔에 인사를 출력합니다.

이제 폼을 제출할 때 페이지가 새로고침되지 않고 콘솔에 인사를 볼 수 있습니다. 멋지죠?

JavaScript Form Validation

폼 검증은 클럽의 친절한 보디가ارد와 같습니다. 데이터가 통과하기 전에 모든 것이 제대로 되어 있는지 확인합니다. 우리는 폼을 자바스크립트로 어떻게 검증할 수 있는지 보겠습니다:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;

if (name.trim() === '') {
alert('이름을 입력해 주세요!');
} else {
console.log('안녕하세요, ' + name + '!');
}
});

이 예제에서 우리는 이름 필드가 비어 있는지 (또는 공백만 포함하는지) 확인합니다. 그렇다면 사용자에게 이름을 입력하도록 경고를 보여줍니다. 그렇지 않으면 인사를 출력합니다.

JavaScript Form Data Validation

때로는 더 복잡한 데이터를 검증해야 합니다. 예를 들어, 우리는 폼에 이메일 필드를 추가하고 이메일 주소가 유효한지 확인하고 싶을 수 있습니다:

<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<button type="submit">제출</button>
</form>

그리고 이를 검증하는 방법:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '') {
alert('이름을 입력해 주세요!');
return;
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('유효한 이메일 주소를 입력해 주세요!');
return;
}

console.log('안녕하세요, ' + name + '! 우리는 ' + email + '로 연락드리겠습니다');
});

이 예제에서 우리는 이메일이 유효한지 확인하기 위해 정규 표현식을 사용합니다. 정규 표현식이 이해가 안 된다면 걱정 마세요! 정규 표현식은 다른 날에 다룰 주제입니다!

Form Validation Using HTML Constraints

이제 HTML5가 제공하는 몇 가지 내장된 폼 검증 기능을 사용하여 우리의 삶을 더 쉽게 만들 수 있는 비밀을 알려드리겠습니다. 폼을 업데이트하여 이를 사용해 보겠습니다:

<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<button type="submit">제출</button>
</form>

required 속성을 입력 필드에 추가하고 type="email"을 사용하면 기본 검증을 무료로 얻을 수 있습니다! 브라우저는 이 필드가 비어 있거나 유효하지 않으면 폼 제출을 방지하고 오류 메시지를 표시합니다.

하지만 우리는 여전히 자바스크립트를 사용하여 이 행동을 커스터마이즈할 수 있습니다:

document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('모든 필드를 올바르게 채워 주세요!');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('안녕하세요, ' + name + '! 우리는 ' + email + '로 연락드리겠습니다');
}
});

이 코드는 폼이 HTML 제약 조건에 따라 유효한지 확인합니다. 유효하지 않다면 제출을 방지하고 경고를 보여줍니다. 유효하다면 인사를 계속합니다.

Conclusion

그렇습니다, 여러분! 우리는 자바스크립트와 DOM Forms의 세상을 여행했습니다. 기본 제출에서 검증과 그 이상까지. 폼은 웹사이트와 사용자 간의 대화와 같습니다. 자바스크립트를 사용하여 그 대화가 원활하게 진행되고 모두가 서로를 이해할 수 있도록 합니다.

여기 우리가 사용한 방법들의 빠른 참조 표입니다:

방법	설명
`document.getElementById()`	ID로 요소를 선택합니다
`addEventListener()`	요소에 이벤트 처리기를 첨부합니다
`event.preventDefault()`	이벤트의 기본 동작을 막습니다
`element.value`	폼 요소의 값을 가져오거나 설정합니다
`alert()`	사용자에게 팝업 메시지를 보여줍니다
`console.log()`	콘솔에 메시지를 기록합니다
`form.checkValidity()`	폼이 모든 검증 제약 조건을 만족하는지 확인합니다

계속 연습하고 코딩을 하세요, 그러면 언제 그때로 전문가가 되실 것입니다! 만약 처음에는 이해가 안 된다면 실망하지 마세요. 꾸준히 하시면 놀라운 것들을 이룰 수 있을 것입니다!

Credits: Image by storyset

이전 튜토리얼:

자바스크립트 - DOM 요소

다음 튜토리얼:

JavaScript - HTML을 변경하다