Programming/Javascript

[18일차] 간단한 입력 폼 만들기 (HTML과 JS로)

tech-living 2024. 11. 24. 11:42

목차

  1. 입력 폼이란 무엇인가?
  2. HTML로 간단한 입력 폼 만들기
  3. 입력값 가져오기 (JavaScript로 처리)
  4. 입력값 검증하기
  5. 실습: 사용자 이름과 나이 출력
  6. 연습문제
  7. 연습문제의 답

1. 입력 폼이란 무엇인가?

입력 폼은 사용자로부터 데이터를 입력받는 HTML 구성 요소입니다.
예를 들어:

  • 이름
  • 이메일
  • 비밀번호

입력받은 데이터는 JavaScript를 이용해 즉시 처리하거나 서버로 보낼 수 있습니다.

2. HTML로 간단한 입력 폼 만들기

HTML에서는 <form> 태그를 사용해 입력 폼을 만듭니다.
다양한 입력 요소를 추가할 수 있습니다:

  • <input type="text">: 텍스트 입력
  • <input type="number">: 숫자 입력
  • <textarea>: 여러 줄 텍스트 입력
  • <button>: 버튼

예제: 간단한 HTML 입력 폼

<form id="userForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" placeholder="이름을 입력하세요" required>
  <br><br>
  <label for="age">나이:</label>
  <input type="number" id="age" name="age" placeholder="나이를 입력하세요" required>
  <br><br>
  <button type="submit">제출</button>
</form>

 

3. 입력값 가져오기 (JavaScript로 처리)

JavaScript를 사용하면 사용자가 입력한 데이터를 가져올 수 있습니다.
document.querySelector를 이용해 각 입력 요소를 선택하고, .value 속성을 사용해 값을 읽습니다.

예제: 입력값 가져오기

const form = document.querySelector("#userForm");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // 기본 동작 방지
  const name = document.querySelector("#name").value;
  const age = document.querySelector("#age").value;
  alert(`이름: ${name}, 나이: ${age}`);
});

4. 입력값 검증하기

사용자가 올바른 데이터를 입력했는지 확인하는 것을 "입력값 검증"이라고 합니다.

  • 필수 입력값 확인: 값이 비어 있는지 확인
  • 데이터 형식 확인: 예를 들어, 숫자가 아닌 값을 방지

예제: 입력값 검증

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const name = document.querySelector("#name").value.trim();
  const age = document.querySelector("#age").value;

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

  if (age <= 0) {
    alert("유효한 나이를 입력해주세요.");
    return;
  }

  alert(`이름: ${name}, 나이: ${age}`);
});

5. 실습: 사용자 이름과 나이 출력

HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>입력 폼 예제</title>
</head>
<body>
  <h1>사용자 정보 입력</h1>
  <form id="userForm">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name" placeholder="이름을 입력하세요" required>
    <br><br>
    <label for="age">나이:</label>
    <input type="number" id="age" name="age" placeholder="나이를 입력하세요" required>
    <br><br>
    <button type="submit">제출</button>
  </form>
  <h2 id="output"></h2>

  <script>
    const form = document.querySelector("#userForm");
    const output = document.querySelector("#output");

    form.addEventListener("submit", (event) => {
      event.preventDefault();
      const name = document.querySelector("#name").value.trim();
      const age = document.querySelector("#age").value;

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

      if (age <= 0) {
        alert("유효한 나이를 입력해주세요.");
        return;
      }

      output.textContent = `안녕하세요, ${name}님! 당신은 ${age}살입니다.`;
    });
  </script>
</body>
</html>

결과

  • 사용자가 이름과 나이를 입력한 뒤 "제출" 버튼을 클릭하면 아래에 입력된 정보가 출력됩니다.

6. 연습문제

  1. 문제 1
    이메일 입력란을 추가하고, 이메일 형식을 확인하여 유효하지 않으면 경고를 출력하세요.
  2. 문제 2
    입력된 나이에 따라 다음 메시지를 출력하세요:
    •   10살 이하: "아직 어리네요!"
    •   11~20살: "청소년이네요!"
    •   21살 이상: "성인이네요!"

7. 연습문제의 답

  1. 문제 1의 답 
    const email = document.querySelector("#email");

form.addEventListener("submit", (event) => {
event.preventDefault();
const emailValue = email.value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+.[^\s@]+$/;

if (!emailPattern.test(emailValue)) {
alert("유효한 이메일을 입력해 주세요.");
return;
}

alert("이메일이 유효합니다.");
});


2. **문제 2의 답**
```javascript
const age = document.querySelector("#age");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const ageValue = parseInt(age.value, 10);

  if (ageValue <= 10) {
    alert("아직 어리네요!");
  } else if (ageValue <= 20) {
    alert("청소년이네요!");
  } else {
    alert("성인이네요!");
  }
});

 

 

<참고 사이트>

https://www.w3schools.com/css/tryit.asp?filename=trycss_default