본문 바로가기
개발

[HTML] 버튼으로 폼 제출이 되지 않는 문제 해결하기(button, form, submit)

by 테크냥이 2024. 7. 22.

웹 개발 중 button 요소를 사용하여 폼을 제출하려고 할 때, 예상대로 동작하지 않는 경우가 종종 발생합니다. 이번 글에서는 이러한 문제의 원인과 해결 방법을 소개합니다.

[HTML] 버튼으로 폼 제출이 되지 않는 문제 해결하기

 

문제 설명

HTML에서 폼 제출을 위해 <input type="submit"> 또는 <button type="submit"> 요소를 사용할 수 있습니다. 그러나 button 요소를 사용할 때 type 속성을 명시하지 않으면 폼이 제출되지 않는 경우가 발생할 수 있습니다.

문제 원인

HTML5에서 <button> 요소의 기본 type 값은 submit이 아닙니다. type 속성을 지정하지 않으면 기본값인 button으로 인식되기 때문에 폼이 제출되지 않습니다.

해결 방법

1. button 요소에 type="submit" 속성 추가하기

button 요소를 사용할 때 type="submit" 속성을 명시적으로 추가하여 폼이 정상적으로 제출되도록 설정할 수 있습니다.

<form action="/submit" method="post">
    <button type="submit">제출</button>
</form>

2. input 요소 사용하기

폼 제출을 위한 가장 간단한 방법은 input 요소를 사용하는 것입니다.

<form action="/submit" method="post">
    <input type="submit" value="제출">
</form>

추가 예제

기본적인 폼 제출

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 제출 예제</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="name">이름:</label>
        <input type="text" id="name" name="name">
        <button type="submit">제출</button>
    </form>
</body>
</html>

여러 button 요소가 있는 경우

하나의 폼에 여러 개의 버튼이 있을 때, 각각의 버튼에 적절한 type 속성을 지정해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>여러 버튼이 있는 폼</title>
</head>
<body>
    <form action="/submit" method="post">
        <label for="email">이메일:</label>
        <input type="email" id="email" name="email">
        <!-- 제출 버튼 -->
        <button type="submit">제출</button>
        <!-- 리셋 버튼 -->
        <button type="reset">초기화</button>
        <!-- 일반 버튼 -->
        <button type="button" onclick="alert('안녕하세요!')">클릭</button>
    </form>
</body>
</html>

JavaScript를 이용한 폼 제출

JavaScript를 사용하여 button 클릭 시 폼을 제출할 수도 있습니다. 이 방법은 폼 제출 전에 추가적인 검증이나 작업을 수행할 때 유용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript로 폼 제출</title>
    <script>
        function submitForm() {
            document.getElementById('myForm').submit();
        }
    </script>
</head>
<body>
    <form id="myForm" action="/submit" method="post">
        <label for="age">나이:</label>
        <input type="number" id="age" name="age">
        <button type="button" onclick="submitForm()">제출</button>
    </form>
</body>
</html>

결론

button 요소를 사용하여 폼을 제출할 때는 type 속성을 명시적으로 지정해야 폼이 정상적으로 제출됩니다. type="submit" 속성을 추가하는 것만으로도 문제를 쉽게 해결할 수 있습니다. 또한, 상황에 따라 input 요소를 사용하거나 JavaScript를 통해 폼을 제출하는 방법도 고려해 볼 수 있습니다. 이를 통해 보다 안정적이고 직관적인 폼 제출 방식을 구현할 수 있습니다.

반응형

'개발' 카테고리의 다른 글

7분 만에 웹사이트 개발하고 실전 배포하기(Netlify를 활용한 간단한 방법)  (0) 2024.09.20
맥북(Mac OS)에서 무료 문서 편집기 추천 Best 4  (0) 2024.02.02
2024 ADP, ADsP 자격증 시험일정 및 민트책 정보  (0) 2024.01.07
2024 SQLP와 SQLD 시험 일정 및 소개  (0) 2024.01.06
[자바, java] 오늘 날짜, 현재 시간 구하기  (0) 2023.12.19

관련글

댓글

티스토리툴바