[javascript] ajax를 통해 제출할 때 왜 양식 태그를 사용합니까?

철학적 질문 :

자바 스크립트와 최신 브라우저 가 필요한 웹 앱이 있으므로 점진적 향상은 문제가되지 않습니다. 내 양식이 자바 스크립트를 통해 작성되고 데이터 업데이트가 모두 ajax POST 및 PUT를 통해 수행되는 경우 실제로 내 컨트롤을 양식 태그로 래핑해야 할 이유가 있습니까? 의미 론적 또는 구조적 이유와 같이 태그를 계속 사용하려는 경우 무시할 동작 및 메서드 매개 변수가있는 이유가 있습니까? 그것은 나에게 초기 시대의 계승 인 것 같은 느낌이 든다.



답변

양식 태그 안에 입력을 래핑하여 특별히 제공되는 중요한 사용자 경험 기능이 하나 이상 있습니다.

Enter 키는 양식을 제출합니다. 실제로 Mobile Safari 에서 키보드에 “이동” 버튼 이 표시되는 방법 입니다.

입력을 래핑하는 양식이 없으면 제출할 것이 없습니다.

물론 키 누르기 이벤트를 통해 엔터 키 동작을 제공 할 수 있지만 이것이 모바일 장치에서 작동하는지는 모르겠습니다. 나는 당신에 대해 모르지만, 이벤트로 모방하는 것보다 브라우저에서 제공하는 의미론으로 작업하고 싶습니다.

귀하의 경우 onsubmitAJAX 제출을 수행 return false하고 실제 제출을 취소하는 양식에 대한 이벤트 핸들러를 제공하기 만하면 됩니다.

간단히 제공 할 수 있으며 action=""( “self”를 의미) method필수 사항은 아닙니다 GET. 기본값은 .


답변

점진적 향상이 필요하지 않은 경우 이론적으로는 필요하지 않습니다.

반면에 forms에는 멋진 그룹화 및 의미 론적 효과가 있습니다. 이를 사용하면 양식 요소를 논리적으로 그룹화 하고 스크립트가 특정 요소의 값을 더 쉽게 수집 할 수 있습니다.

예를 들어, 일부 사용자 입력을 ajax 제출하려는 경우 “이 입력,이 두 가지 선택 및이 세 가지 텍스트 영역을 가져 와서 제출합시다”라고 말하는 것보다 “이 양식의 모든 요소를 ​​가져와 제출하자”라고 말하는 것이 항상 더 쉽습니다. “. 내 경험상 form태그가 있으면 실제로 개발자에게 도움이됩니다 .


답변

AJAX는 훌륭하지만 JamWaffles (+1)가 말했듯이 form태그를 사용 하면 대체 방법이 제공됩니다.

개인적으로 저는 AJAX로 제출하는 항목에도 양식 태그를 사용합니다. 구문이 명확하고 특정 양식 내에서 모든 입력을 쉽게 확보 할 수 있기 때문입니다. 예, a div또는 무엇으로도 이것을 할 수 있지만 제가 말했듯이 양식을 사용하는 것은 구문 적으로 좋습니다.

덧붙여서, 스크린 리더는 내부 콘텐츠를 form다르게 취급 하므로 어떤 방식으로 선택하든 고려해야 할 접근성 문제가 있습니다. 일화적인 증거에 따르면 Google은 순위에서 접근성을 고려하므로 SEO가 우려되는 경우 양식을 사용하고 올바르게 수행하십시오.


답변

요약 : MVC, 간단한 웹 앱에 적합한 양식, 구성 요소 지향의 풍부한 웹 앱에 적합하지 않습니다.

이유 : 양식은 다른 양식을 중첩 할 수 없습니다. 구성 요소 지향 아키텍처에 큰 제한이 있습니다.

세부 정보 : 일반적인 MVC 응용 프로그램의 경우 양식이 좋습니다. 많은 자바 스크립트와 AJAX를 사용하고 여기저기서 많은 구성 요소를 사용하는 풍부하고 복잡한 웹 응용 프로그램에서 저는 양식을 좋아하지 않습니다. 이유 : 양식은 다른 양식을 중첩 할 수 없습니다. 그러면 각 구성 요소가 양식을 렌더링하면 구성 요소가 서로 중첩 될 수 없습니다. 너무 나쁘다. 모든 양식을 div로 변경하여 중첩 할 수 있으며, 모든 매개 변수를 ajax로 전달하기 위해 가져올 때마다 다음을 수행합니다 (jQuery 사용).

$ ( “# id_of_my_div”). find ( “[이름]”). serialize ();

(또는 다른 필터링)

대신에:

$ ( “# id_of_my_form”). serialize ();

그러나 감상적 및 의미 론적 이유로 인해 div가 형식으로 작동 할 때 계속 이름을 something_form으로 지정합니다.


답변

내가 볼 수있는 것은 아닙니다. 현재 <form>s 를 사용하는 웹 응용 프로그램을 구축하고 있지만 사용자가 JavaScript를 비활성화 한 경우 대체 방법이 있습니다 ( e.preventDefault양식 게시가 정상적으로 중지됨). 사용자가 자바 스크립트를 가져야한다고 말하는 상황에서는 <form>태그가 필요하지 않지만 브라우저가 어떤 작업을 수행해야하는 경우를 대비 하여 태그를 유지하거나 일종의 방법으로 액세스하는 것이 좋습니다. 수업.

간단히 말해서, <form>순수 AJAX 를 사용하는 경우 에는 사용할 필요가 없지만, 나중에 갑자기 폴백 코드를 만들기로 결정한 경우에는 그대로두면 아이디어가 될 수 있습니다.


답변

제 생각에는 의미 론적 이유로 사용한다면 의도 한대로 사용하십시오. action 속성은 제대로 구성되어야하며 (비어있을 수도 있음) 작업 속성을 설정하고 ajax 호출 전에 읽어서 js 로직에서 URI를 분리 할 수도 있습니다.


답변

여기서 양식 태그를 사용해야하는 이유를 모르겠습니다. 양식 태그를 사용하는 유일한 이유는 사용자가 sumbit 입력 또는 버튼 태그를 사용하여 데이터를 “제출”하도록하는 것입니다. 그렇게 할 필요가 없으면 양식이 필요하지 않습니다. 그러나 “유효한”마크 업으로 간주되는지 확실하지 않습니다. 당신이 그것을 사용한다면 당신은 <form action="">행동이 양식 태그의 유일한 필수 속성 이기 때문에 할 수 있습니다 . 그러나 좋은 점을 제시하면 웹 응용 프로그램의 미래에는 더 이상 양식과 기존 제출 방법이 필요하지 않을 것입니다. 매우 흥미롭고 행복합니다. 헤헤 🙂