HTML/CSS/JAVASCRIPT- 윤도 강사님 강의(250401)(3/3)

특강

HTML/CSS/JAVASCRIPT- 윤도 강사님 강의(250401)(3/3)

Chansman 2025. 4. 1. 19:38

HTML 폼 데이터 처리 및 자바스크립트 연결

안녕하세요! 오늘은 HTML 폼을 이용해 데이터를 입력받고, 자바스크립트로 처리하는 방법을 알아보겠습니다. 이 블로그에서는 폼을 제출했을 때, 데이터가 어떻게 서버로 전송되고, 유효성 검사가 이루어지는지 단계별로 설명드릴게요. 또한 자바스크립트와 HTML을 연결하는 과정도 함께 배워봅시다!

1. HTML 폼 만들기

우리는 사용자가 정보를 입력할 수 있는 폼을 만들어야 합니다. 이 폼은 아이디, 비밀번호, 이메일, 성별 등 여러 필드를 포함하고 있으며, submit 버튼을 눌러 데이터를 제출할 수 있게 해야 합니다.

HTML 폼 예시:

<form id="userForm">
    <label for="username">아이디:</label>
    <input type="text" id="username" name="username" placeholder="아이디 입력" required><br>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password" placeholder="비밀번호 입력" required><br>

    <label for="email">이메일:</label>
    <input type="email" id="email" name="email" placeholder="이메일 입력" required><br>

    <label for="gender">성별:</label>
    <input type="radio" id="male" name="gender" value="male"> 남자
    <input type="radio" id="female" name="gender" value="female"> 여자<br>

    <button type="submit">회원가입</button>
</form>

아이디, 비밀번호, 이메일 필드를 추가하고, 성별은 라디오 버튼을 사용하여 두 가지 선택지(남자, 여자)로 구분했습니다.
submit 버튼을 눌러 폼을 제출하면, 자바스크립트로 데이터 처리를 시작합니다.

2. 자바스크립트와 HTML 연결하기

자, 이제 HTML 폼과 자바스크립트를 연결하는 방법을 알아보겠습니다. 자바스크립트가 폼 데이터를 처리하고 유효성 검사를 통해서 사용자가 제출한 데이터가 올바른지 확인하는 방식입니다.

자바스크립트 코드 예시:

const form = document.getElementById('userForm');

form.addEventListener('submit', function(event) {
    event.preventDefault();  // 기본 폼 제출을 막음

    // 폼 데이터 가져오기
    const username = form.username.value;
    const password = form.password.value;
    const email = form.email.value;
    const gender = form.gender.value;

    // 데이터 검증 (유효성 검사)
    if (username.length < 6) {
        alert("아이디는 6자 이상이어야 합니다.");
        return;
    }
    if (password !== "비밀번호") {
        alert("비밀번호가 일치하지 않습니다.");
        return;
    }

    // 서버로 데이터 보내기 (예시: 콘솔에 출력)
    console.log("아이디:", username);
    console.log("이메일:", email);
    console.log("성별:", gender);

    // 서버에 데이터 전송 (실제 사용 시 서버와 통신)
    alert("회원가입이 완료되었습니다.");
});

form.addEventListener('submit', function(event)): 사용자가 폼을 제출할 때, 자바스크립트 코드가 실행되도록 설정합니다.
event.preventDefault(): 폼 제출 후 페이지 새로고침을 방지합니다.
form.username.value: 폼의 각 입력값을 가져옵니다.
if 문을 통해 아이디 길이가 6자 이상인지, 비밀번호가 맞는지 확인합니다.
console.log(): 폼 데이터를 콘솔에 출력하여 확인합니다. 실제로는 서버로 데이터를 전송하는 기능이 들어가야 합니다.

3. 폼 제출 후 서버로 데이터 전송

폼 제출 시, 데이터를 서버로 전송해야 합니다. 자바스크립트로 서버에 데이터를 보낼 때, AJAX 또는 fetch API를 사용하여 데이터를 전송할 수 있습니다.

예시: fetch API를 이용한 데이터 전송:

fetch('https://your-server-endpoint.com/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: username,
        password: password,
        email: email,
        gender: gender
    })
})
.then(response => response.json())
.then(data => {
    console.log('Success:', data);
    alert("서버로 데이터가 전송되었습니다.");
})
.catch((error) => {
    console.error('Error:', error);
});

**fetch**를 사용해 POST 방식으로 데이터를 서버에 전송합니다.
body: JSON.stringify(): 폼에서 입력된 데이터를 JSON 형식으로 변환하여 서버로 보냅니다.
응답 처리: 서버에서 응답을 받으면 **then**을 사용하여 처리합니다.

4. 폼의 유효성 검사

자바스크립트로 폼 유효성 검사를 통해 사용자가 입력한 정보가 정확한지 확인할 수 있습니다. 예를 들어, 아이디가 6자 이상인지, 비밀번호가 맞는지, 이메일 형식이 올바른지 등을 검증합니다.

유효성 검사 예시:

if (username === "") {
    alert("아이디를 입력하세요.");
    return;
}
if (!email.includes('@')) {
    alert("이메일이 유효하지 않습니다.");
    return;
}

아이디가 빈 문자열일 경우, 또는 이메일에 **@**가 포함되지 않으면 경고 메시지를 띄워 사용자가 올바르게 입력하도록 유도합니다.

5. 결론: HTML 폼과 자바스크립트 연결

폼을 제출할 때 자바스크립트로 데이터를 처리하는 방법을 배웠습니다. 중요한 점은:

폼 데이터를 가져와서 처리할 수 있습니다.
유효성 검사를 통해 사용자 입력의 정확성을 확인할 수 있습니다.
fetch API를 사용하여 서버와 통신하고 데이터를 전송할 수 있습니다.

이 과정을 통해, 폼 제출을 처리하고 서버와의 연동을 이해할 수 있게 되었습니다. 이제 여러분도 폼을 잘 만들고, 데이터를 서버로 전송하는 기능을 구현할 수 있겠죠? 😊