제출 버튼

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 27개 중 7번째.

제출 버튼은 사용자가 처리를 위해 서버로 폼 데이터를 보낼 수 있게 해주는 HTML 폼의 필수적인 요소입니다.

제출 버튼이 있는 기본적인 HTML 폼을 만듭니다:

<form id="myForm">
  <input type="text" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

type="submit" 속성은 클릭 시 버튼이 양식을 제출하도록 지정합니다.

JavaScript를 사용하여 폼 제출을 처리할 수도 있습니다:

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

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 기본 폼 제출을 방지합니다
  console.log('Form submitted!'); // 콘솔에 메시지를 출력합니다
});

preventDefault() 메서드는 폼이 전통적인 방식으로 제출되는 것을 방지하여, JavaScript로 제출을 처리할 수 있게 해줍니다.

챌린지

쉬움

수행할 작업:

type="submit"을 사용하여 폼에 제출(Submit) 버튼을 추가하세요.
submit 이벤트 리스너 내부에서 message 변수를 사용하여 텍스트 콘텐츠를 "Submitted successfully"로 설정하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Submit buttons</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="myForm">
    <h2>Sign Up</h2>
    <input type="text" id="email" placeholder="Enter your email">
    <p id="emailMessage" class="message"></p>

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