제출 버튼

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

Submit 버튼은 사용자가 처리를 위해 양식 데이터를 서버로 보낼 수 있도록 하는 HTML 양식의 필수 요소입니다.

기본 HTML form과 submit button을 만드세요:

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

type="submit" 속성은 button을 클릭했을 때 form을 제출해야 함을 지정합니다.

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

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

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents the default form submission
  console.log('Form submitted!'); // This prints a message in the console
});

preventDefault() 메서드는 form이 전통적인 방식으로 제출되는 것을 막아 JavaScript로 submission을 처리할 수 있도록 합니다.

챌린지

쉬움

과제:

폼에 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>