▶ JavaScript Examples

JavaScript HTML Input

JavaScript HTML Input: 사용자 입력 처리

HTML Input 요소는 웹 페이지에서 사용자가 데이터를 입력할 수 있는 필드입니다. JavaScript를 사용하여 이러한 입력 필드를 동적으로 처리하고 사용자 입력에 따라 반응할 수 있습니다. 이 가이드는 JavaScript를 사용하여 HTML 입력 요소를 다루는 방법을 설명합니다.

1. HTML Input 요소 소개

1.1. 기본 Input 요소

HTML에서는 다양한 유형의 입력 요소를 제공하여 사용자가 데이터를 입력할 수 있도록 합니다. 가장 일반적인 <input> 요소의 유형은 다음과 같습니다:

텍스트 입력: 사용자가 텍스트를 입력할 수 있는 필드.
비밀번호 입력: 사용자가 비밀번호를 입력할 수 있는 필드.
체크박스: 사용자가 선택할 수 있는 체크박스.
라디오 버튼: 여러 옵션 중 하나를 선택할 수 있는 버튼.
드롭다운 리스트: 여러 선택 옵션 중 하나를 선택할 수 있는 리스트.

예제 HTML 코드

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>

    <label for="subscribe">
        <input type="checkbox" id="subscribe" name="subscribe"> Subscribe to newsletter
    </label><br>

    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>

    <label for="country">Country:</label>
    <select id="country" name="country">
        <option value="usa">USA</option>
        <option value="uk">UK</option>
        <option value="canada">Canada</option>
    </select><br>

    <button type="button" id="submitBtn">Submit</button>
</form>

2. JavaScript로 Input 요소 다루기

2.1. 입력 값 읽기

사용자가 입력한 값을 읽기 위해 JavaScript를 사용할 수 있습니다. value 속성을 사용하여 입력 필드의 값을 가져올 수 있습니다.

예제 코드

const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
console.log('Username:', username);
console.log('Password:', password);

2.2. 이벤트 처리

사용자의 입력에 반응하기 위해 이벤트 리스너를 추가할 수 있습니다. 버튼 클릭, 입력 필드 변경 등의 이벤트를 처리할 수 있습니다.

2.2.1. 버튼 클릭 이벤트

document.getElementById('submitBtn').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    console.log('Username:', username);
    console.log('Password:', password);
});

2.3. 입력 필드 값 설정

JavaScript를 사용하여 입력 필드의 값을 동적으로 설정할 수 있습니다.

document.getElementById('username').value = 'JohnDoe'; // 사용자 이름 필드에 기본값 설정

3. Input 요소 유효성 검사

사용자의 입력 값이 유효한지 검사하는 방법을 알아보겠습니다. 이는 사용자가 필드를 올바르게 입력했는지 확인하는 데 유용합니다.

3.1. 기본 유효성 검사

HTML5는 기본적인 유효성 검사를 제공합니다. 예를 들어, required 속성을 사용하여 필수 입력 필드를 설정할 수 있습니다.

<input type="text" id="username" name="username" required>

3.2. JavaScript로 유효성 검사

JavaScript를 사용하여 더 복잡한 유효성 검사를 수행할 수 있습니다.

document.getElementById('submitBtn').addEventListener('click', function() {
    const username = document.getElementById('username').value;

    if (username === '') {
        alert('Username is required!'); // 사용자 이름이 비어있으면 경고 표시
    } else {
        console.log('Username:', username);
        // 다른 처리...
    }
});

4. 전체 예제: 사용자 입력 처리하기

아래는 JavaScript를 사용하여 HTML 입력 요소를 처리하는 전체 예제입니다.

4.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Input Example</title>
</head>
<body>
    <h1>User Input Form</h1>
    <form id="userForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>

        <button type="button" id="submitBtn">Submit</button>
    </form>

    <div id="output"></div>

    <script src="script.js"></script>
</body>
</html>

4.2. JavaScript 코드 (script.js)

document.getElementById('submitBtn').addEventListener('click', function() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // 유효성 검사
    if (username === '' || password === '') {
        alert('All fields are required!'); // 필수 입력 필드 확인
        return;
    }

    // 입력 데이터 출력
    document.getElementById('output').innerHTML = `
        <h2>Submitted Data:</h2>
        <p><strong>Username:</strong> ${username}</p>
        <p><strong>Password:</strong> ${password}</p>
    `;
});

5. 요약

JavaScript HTML Input 요소는 사용자가 웹 페이지에서 데이터를 입력할 수 있도록 도와줍니다. JavaScript를 사용하여 입력 필드를 동적으로 처리하고 사용자 입력에 따라 반응할 수 있습니다.

입력 값 읽기: value 속성을 사용하여 입력 필드의 값을 가져오기.
이벤트 처리: 버튼 클릭 등 다양한 이벤트를 처리하여 사용자와 상호작용하기.
유효성 검사: 입력 값의 유효성을 검사하여 올바른 데이터 수집하기.

JavaScript를 활용하여 더욱 동적이고 상호작용이 풍부한 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript