submit 이벤트에서 폼 값을 읽고 브라우저 검증과 함께 처리합니다.
폼은 개별 submit 버튼의 click보다 form의 submit 이벤트에서 처리해야 Enter 키 제출도 포함됩니다. FormData에는 name이 있고 활성화된 성공적인 컨트롤의 값이 들어가며, 같은 이름의 checkbox 값은 getAll로 읽습니다. 클라이언트 검증을 통과해도 서버 검증은 반드시 필요합니다.
코드 실행 버튼은 폼을 만들어 pre 안에 넣는 일까지만 합니다. type을 적지 않은 확인 버튼은 기본값인 submit 버튼이라, 누르면 submit 이벤트가 발생하고 preventDefault가 페이지 이동을 막습니다. 그다음 FormData가 name 입력의 호현과 체크된 topic의 HTML을 읽고, pre의 내용을 폼 대신 호현: HTML이라는 글자로 바꿉니다.
체크하지 않은 checkbox는 FormData에 아예 들어가지 않아 getAll이 빈 배열을 돌려주고, value 속성이 없는 checkbox를 체크하면 값으로 문자열 on이 들어갑니다. 폼 전체를 객체로 바꿀 때 쓰는 Object.fromEntries(data)는 같은 이름의 값 가운데 마지막 하나만 남기므로 checkbox 묶음에는 맞지 않습니다.
disabled이거나 name이 없는 입력은 FormData에 포함되지 않습니다. 화면에 보인다는 이유만으로 전송된다고 가정하지 마세요.
직접 바꿔보세요email input과 CSS checkbox를 추가하고 유효성 검사를 적용하세요.