입력 버튼과 제출 버튼의 차이점

이야기의 유래:

사실 어제 이런 문제가 발생했는데, 어제 인턴인 나를 조정하는데 도움을 준 사람이 회사의 옛 직원이었고, 나도 예전을 확인(추측)(측정)했다. 직원들도 그 차이를 모릅니다. 그런데 오늘 또 같은 문제가 발생했습니다.

스토리 요약:

　현재 회사에서 AngularJs 프레임워크를 사용하여 프로젝트를 진행하고 있습니다. 상사가 프로젝트 패키지를 배포한 후 인터페이스 서비스를 제공했습니다. 로컬 tomcat에서 서버를 설정한 후 html, css, JavaScript(덜 사용됨), 부트스트랩까지 프론트엔드 코드 작성을 시작하세요. 이제 프런트엔드 정적 인터페이스가 구축되었습니다. 그런 다음 상사가 제공하는 인터페이스 서비스를 사용하여 테스트하십시오. AngularJS는 양방향 바인딩입니다. 관련 논리 코드를 작성한 후에는 코드를 볼 때마다 인터페이스가 무의미하게 이동합니다. 응답이 true를 반환하면 주문 인터페이스로 점프해야 하고, false를 반환하면 로그인 인터페이스로 점프해야 합니다. 즉, 자체적으로 점프하지 않는데 정말 이상합니다! 그러다가 크롬의 개발자 도구를 열어보니 매번 작성했던 Angular 함수가 들어가지 않은 것을 발견했습니다. 나중에 ng-model에 문제가 없는지 확인해보니 입력 유형이 submit으로 되어 있어서 버튼으로 변경해 보았는데 아쉽게도 다 괜찮았습니다. 이것이 저를 혼란스럽게 만들었고, 그래서 진실을 알아보기 위해 이 에세이를 썼습니다.

이야기의 진실:

일반적으로 말하면 입력과 버튼 모두 버튼으로 사용될 수 있으며 둘 다 백엔드 처리를 위해 백엔드에 데이터를 제출할 수 있습니다.

차이점: ① 입력은 원래 입력이지만 type="submit" 이후에는 제출 역할도 하므로 입력이 제출 양식입니다

<input type="submit" value="提交">

　②버튼은 버튼이고, 버튼에 조작을 추가하지 않으면 type="submit" onclick="xxx 같은 것을 추가해야만 반응이 없습니다. ()" 작동할 수 있나요? 제출 버튼으로.

<button type="submit">确定</button>

따라서 소프트웨어 디자인 패턴의 주요 원칙인 단일 책임 원칙에 따라 버튼을 버튼으로 사용하고 입력 버튼을 제출 버튼으로 사용하는 것이 좋습니다.

위 내용은 프론트엔드 학습에 대한 인턴의 통찰력에서 나온 것입니다. 부적절한 내용이 있으면 지적해 주시고 감사합니다!