Post

HTML) form 태그에 대한 모든 것_ 로그인/로그아웃 예제 포함

Posted
Preview Image
By parksohyunnn 7 min read

안녕하세요, 웹 개발에 관심이 많은 여러분! 오늘은 HTML에서 가장 중요한 태그 중 하나인 form 태그에 대해 자세히 알아보는 시간을 가져보겠습니다. 이 글을 통해 form 태그의 정의, 사용 방법, 기본값, 그리고 로그인/로그아웃 기능을 구현하는 실전 예제까지 다뤄보겠습니다. 끝까지 함께 해주세요!

form 태그 정의

form 태그는 HTML 문서에서 사용자 입력을 받기 위한 양식을 정의하는 데 사용됩니다. 이 태그는 텍스트 입력, 체크박스, 라디오 버튼, 드롭다운 메뉴 등 다양한 입력 요소를 포함할 수 있습니다. 사용자가 입력한 데이터를 서버로 전송하거나 클라이언트 측에서 처리할 수 있도록 해주는 중요한 역할을 합니다.

사용 방법

기본적인 form 태그의 구조는 다음과 같습니다:

1
2
3

<form action="submit_url" method="post">
    <!-- 다양한 입력 요소들 -->
</form>
  • action 속성: 폼 데이터를 제출할 URL을 지정합니다.
  • method 속성: 데이터를 전송하는 방법을 지정합니다. 주로 GET 또는 POST를 사용합니다. 예를 들어, 사용자 이름과 비밀번호를 입력받는 간단한 로그인 폼은 다음과 같이 작성할 수 있습니다:
1
2
3
4
5
6
7
8
9

<form action="/login" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password">
    <br>
    <button type="submit">로그인</button>
</form>

기본값

  • action: 기본값은 현재 페이지 URL입니다. 즉, 별도로 지정하지 않으면 폼 데이터는 현재 페이지로 제출됩니다.
  • method: 기본값은 GET입니다. 이 경우 폼 데이터는 URL의 쿼리 문자열로 전송됩니다.

언제 많이 쓰이는가?

form 태그는 사용자 입력을 받아 서버나 클라이언트에서 처리할 때 많이 사용됩니다. 주요 사용 사례는 다음과 같습니다:

  • 회원 가입 및 로그인: 사용자의 계정을 생성하거나 인증하기 위한 폼. 검색 기능: 웹사이트 내에서 검색어를 입력받아 결과를 표시하기 위한 폼.
  • 피드백 및 문의: 사용자로부터 피드백이나 문의사항을 받기 위한 폼.
  • 데이터 입력 및 수정: 데이터베이스에 정보를 입력하거나 수정하기 위한 폼.

실전 예제: 로그인/로그아웃 기능 만들기

이제 form 태그를 사용하여 간단한 로그인 및 로그아웃 기능을 구현해 보겠습니다. 예제에서는 HTML과 JavaScript를 사용하여 클라이언트 측에서 로그인 상태를 관리합니다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>로그인</h1>
        <form id="login-form" action="#" method="post">
            <label for="username">사용자 이름:</label>
            <input type="text" id="username" name="username" required>
            <br>
            <label for="password">비밀번호:</label>
            <input type="password" id="password" name="password" required>
            <br>
            <button type="submit">로그인</button>
        </form>
        <div id="logout-section" style="display: none;">
            <p id="welcome-message"></p>
            <button id="logout-button">로그아웃</button>
        </div>
    </div>

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

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
}

input {
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

document.getElementById('login-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼의 기본 제출 동작을 막음
    
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    
    if (username === 'user' && password === 'password') { // 간단한 인증 로직
        document.getElementById('login-form').style.display = 'none';
        document.getElementById('logout-section').style.display = 'block';
        document.getElementById('welcome-message').innerText = `환영합니다, ${username}님!`;
    } else {
        alert('사용자 이름 또는 비밀번호가 올바르지 않습니다.');
    }
});

document.getElementById('logout-button').addEventListener('click', function() {
    document.getElementById('login-form').style.display = 'block';
    document.getElementById('logout-section').style.display = 'none';
});

마무리

오늘은 HTML의 form 태그에 대해 깊이 있게 알아보고, 이를 활용하여 로그인/로그아웃 기능을 구현해 보았습니다. form 태그는 웹 개발에서 사용자 입력을 받는 데 필수적인 요소입니다. 이를 잘 활용하면 사용자 친화적이고 기능적인 웹 애플리케이션을 만들 수 있습니다.

이 포스팅이 여러분의 웹 개발 여정에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

HTML
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github