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


78

철학적 질문 :

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


제 생각에는 ... 그럴 이유가 없습니다. 유용하지만 컨트롤 용으로 사용하는 것은 매우 어리석은 일입니다. 항상 다음과 같이 유효한 빈 양식을 넣을 수 있습니다. <form action = "#"method = "post "onsubmit ="return false; "> </ form>
Omer Tuchfeld 2011-06-10

2
"이 사이트에는 자바 스크립트가 필요하고 브라우저에서 자바 스크립트를 실행하지 않습니다. 망할 수 있습니다."라는 페이지로 이동하도록 할 수 있습니다.

3
접근성 / 스크린 리더 소프트웨어에 어떤 영향을 미칠 수 특정 형태에 속하는 어떤 요소를 식별 할 수없는
알렉스 K.

임 확신 당신은 단지이 비활성화 = "비활성화"로 제출 '버튼을 비활성화 할 수 있습니다
브라이언 패터슨에게

답변:


71

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

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

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

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

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

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


1
+ 1- 이것이 제가 질문을봤을 때 생각했던 것과 정확히 같습니다 .
Reid

1
@Brian-포스터에 "데이터 업데이트가 ajax POSTS & PUTS를 통해 수행되고 있습니다"라고 말합니다. 그것은 페이지 새로 고침 종류가 아니라 나에게 제출 하는 것을 의미 합니다. 페이지 새로 고침을 원하지 않는다고해서 동일한 사용자 경험을 원하지 않는 것은 아닙니다.
Nicole

그러나 스팸 봇이 양식에 액세스 할 수 있다고 생각하면 작업 또는 메서드 속성을 추가 할 수 없습니다. 70 %는 자바 스크립트를 사용하지 않습니다.
Abdalla Arbab 2017

15

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

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

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


맞지만 특정 상황에서는 클라이언트에서 제출하기 전에 양식을 직렬화 한 다음 서버에서 직렬화 해제 할 수 있다는 추가 이점이 필요하지 않습니다. 때로는 서버에 해당 모델이없는 몇 가지 값만 제출하면됩니다. 이 경우 양식을 사용하지 않기로 선택합니다.
Matthew Pitts

양식에 겹치는 값이있을 수 있습니다. 양식에는 각 옵션의 값이 자동으로 증가하는 ID 인 "옵션"이라는 제목의 여러 필드가있을 수 있습니다. 설정하지 않고 <form>쉽게 값이있을 수 있으므로 폼의 입력 옵션에서 특정 값을 얻으려고 할 때 래퍼로서, 당신은 자신을 통해 모든 스테핑 수 있습니다 1, 2, 3, 등
pspahn을

12

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

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

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


이것은 지금까지 가장 좋은 대답입니다. 이 댓글의 현재 목록 상단에있는 항목이 아닙니다.
Brian Patterson

7

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

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

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

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

(또는 다른 필터링)

대신에:

$ ( "# id_of_my_form"). serialize ();

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


예, 양식을 중첩 할 수없는 것은 일부 컨텍스트에서 엄청난 제한입니다. 저는 거의 항상 양식 태그를 사용하지만 제 생각에는 어떤 이유로 든 삶을 어렵게 만들 경우에는 사용하지 않는 것이 좋습니다.
Joel M

2

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

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


임 확신 당신은 단지이 비활성화 = "비활성화"로 제출 '버튼을 비활성화 할 수 있습니다
브라이언 패터슨에게

2

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


0

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.