입력이 있으면 양식이 있어야 합니다.

이 게시물은 원래 https://tomekdev.com/posts/input-and-form에 게시되었습니다. 거기로 가서 좀 더 인터랙티브하고 스타일이 풍부한 버전을 읽어보세요 ✌️


단일 페이지 앱에서 누군가가 <input> 필드만 사용하는 상황을 자주 봅니다. 어쩌다 프로와 일하게 된다면 가끔 <label>의 반주로 🌟. 양방향 바인딩으로 입력을 제어하고 멋진 프레임워크를 사용하여 버튼에서 이벤트를 처리하기 시작했을 때onclick 이전 작업 방식을 잊어버린 것 같습니다.

옛날 방식과 올바른 방식

이 섹션의 헤드라인은 이전 방식과 올바른 방식이 서로 다른 두 가지임을 암시할 수 있습니다. 사실은 그 반대입니다. 프레임워크(또는 ajax) 시대 이전의 기억을 되살리면 사람들이 입력과 버튼을 처리할 때 <form> 요소를 사용하고 있음을 알 수 있습니다.

과거에는 <form method="">를 광범위하게 사용하여 입력을 처리했습니다. 여전히 양식 요소를 사용하는 것이 좋습니다. 이점이 있습니다.

흔한 실수

키보드를 사용하여 페이지를 탐색하고 상호 작용합니다. 그것은 모든 것을 가속화합니다. 따라서 <input> 없이 <form>를 사용할 때 가장 큰 함정 중 하나는 말하자면 입력이 자동 제출되지 않는다는 것입니다.

양식 안에 있는 필드에서 ENTER를 누르면 양식이 제출됩니다. 아래의 모달과 같은 단독 입력 인터페이스에 매우 편리합니다.



마우스나 터치패드를 터치하고 Save 버튼을 클릭할 필요가 없습니다 🎉. 그것은 시간 낭비일 것입니다!

해결책

작업을 <button>에 바인딩하는 것은 일반적인 실수입니다. 여기서 실제로 해야 할 일은 <input>를 <form>로 래핑하고 submit 이벤트를 양식에 할당하는 것입니다.

<form id="my-form">
  <input name="example" type="text" />
  <button type="submit">Submit</button>
</form>

const form = document.getElementById('my-form');

form.addEventListener('submit', function handleSubmit(event) {
  alert('Submit clicked');
  event.preventDefault();
});

기본 동작이 실행되지 않도록 방지하고 사용자 정의 동작을 실행하는 것을 잊지 마십시오. 유효성 검사를 실행하고 실제로 데이터를 보낼 수 있습니다.

고려해야 할 또 다른 사항은 항상 버튼의 유형을 지정하는 것입니다. 대부분의 브라우저에서 기본적으로 submit이지만 Internet Explorer는 이 경우와 다르며 기본 유형으로 button가 있습니다.