당신이 놓치고있는 것은 시맨틱 마크 업과 DOM에 .

현실적으로 HTML5 마크 업으로 원하는 모든 작업을 수행 할 수 있으며 대부분의 브라우저에서이를 구문 분석합니다. 내가 마지막으로 확인했을 때 WebKit / Blink는 요소 내부의 의사 요소<input> 도 허용 합니다 . 이는 Gecko 사양에 대한 명확한 위반입니다. 그러나 마크 업으로 원하는대로 수행하면 의미론에 관한 한 의심 할 여지없이 마크 업이 무효화됩니다.

<input>요소 안에 요소 를 넣는 이유는 무엇 <form>입니까? 같은 이유로 <li>태그를 <ul>및 <ol>요소 내부에 넣습니다. 태그가 속한 곳입니다. 그것은의 의미 , 수정 및 마크 업을 정의하는 데 도움이됩니다. 구문 분석기, 화면 판독기 및 다양한 소프트웨어는 마크 업이 구조뿐 아니라 의미가있을 때 의미 상 올 바르면 마크 업을 더 잘 이해할 수 있습니다.

이 <form>요소를 사용하면 양식이 제출 될 때 수행 할 작업을 브라우저에 알리는 method및 action속성 을 정의 할 수도 있습니다 . AJAX는 100 % 커버리지 도구가 아니며 웹 개발자로서 당신은 우아한 저하를 연습해야합니다. JS가 꺼져 있어도 양식을 제출하고 데이터를 전송할 수 있어야합니다.

마지막으로 양식은 모두 DOM에 올바르게 등록됩니다. JavaScript로이를 엿볼 수 있습니다. 바로이 페이지에서 콘솔을 열고 다음을 입력하면 :

document.forms

페이지에있는 모든 양식의 멋진 컬렉션을 얻을 수 있습니다. 검색 창, 주석 상자, 답변 상자-모든 적절한 양식. 이 인터페이스는 정보에 액세스하고 이러한 요소와 상호 작용하는 데 유용 할 수 있습니다. 예를 들어 양식은 매우 쉽게 직렬화 할 수 있습니다.

다음은 몇 가지 읽기 자료입니다.

• 시맨틱 HTML
• HTML 양식 가이드

참고 : <input>요소는 양식 외부에서 사용할 수 있지만 어떤 방식 으로든 데이터를 제출하려는 경우 양식을 사용해야합니다.

이것은 내가 질문을 뒤집는 대답의 일부입니다.

양식을 피함으로써 어떻게 내 삶을 더 힘들게 만들고 있습니까?

가장 중요한 것은 컨테이너 요소입니다. 누가 필요 하죠?!

확실히 당신의 작은 요소 <input>와 <button>요소가 일종의 컨테이너 요소 안에 중첩 되어 있습니까? 그들은 다른 모든 것의 중간에 떠있을 수 없습니다. 그렇다면 <form>, 그렇다면 무엇입니까? A <div>? ㅏ<span> ?

이러한 요소 는 어딘가에 있어야 하며 마크 업이 엉망이 아닌 한 컨테이너 요소는 양식이 될 수 있습니다.

아니? 오.

이 시점에서 내 머릿속의 목소리는 이러한 모든 다양한 AJAX 상황에 대한 이벤트 핸들러를 만드는 방법에 대해 매우 궁금합니다. 바이트를 절약하기 위해 마크 업을 줄여야한다면 많은 것이있을 것입니다. 그런 다음 각 요소 ‘세트’에 해당하는 각 AJAX 이벤트에 대한 사용자 지정 함수를 만들어야합니다. 개별적으로 또는 클래스로 대상을 지정해야합니다. 이러한 요소를 일반적으로 그룹화 할 수있는 방법은 없습니다. 우리는 마크 업 주변을 돌아 다니며 필요할 때까지 무엇이든 수행하도록 설정했기 때문입니다.

따라서 몇 가지 핸들러를 사용자 지정합니다.

$('#searchButton').on('click', function (e) {
  e.preventDefault();

  var search = $('#mySearch');

  $.ajax({
    url: 'http://example.com/text',
    type: 'GET',
    dataType: 'text',
    data: 'query=' + search.val(),
    success: function (data) {
      console.log(data);
    }
  });
});


$('#login').on('click', function (e) {
  e.preventDefault();
  var user = $('#username'),
      pass = $('#password'),
      rem = $('#remember');

  $.ajax({
    url: 'http://example.com/login',
    type: 'POST',
    data: user.add(pass, rem).serialize(),
    dataType: 'text',
    success: function (data) {
      console.log(data);
    }
  });
});

<!-- No containers, extra markup is silly. -->

<input type="text" id="mySearch" value="query" />
<button id="searchButton">Search</button>
<input type="text" id="username" name="username" value="user" />
<input type="password" id="password" name="password" value="pass" />
<input type="checkbox" id="remember" name="remember" checked /> stay logged in
<button id="login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

이것은 다음과 같이 말하는 부분입니다.

‘하지만 재사용 가능한 기능을 완전히 사용합니다. 과장하지 마세요. ‘

충분히 공평하지만 여전히 이러한 고유 요소 집합 또는 대상 클래스 집합을 만들어야합니다. 당신은 여전히에있는 그룹 이러한 요소를 어떻게 든.

당신의 눈 (또는 스크린 리더를 사용하고 있고 약간의 도움이 필요하다면 귀를 빌려주세요. 다행입니다. 우리 가이 모든 의미 론적 마크 업에 ARIA 를 추가 할 수 있습니다. 그렇죠?) 그리고 일반적인 형태의 힘을보십시오.

function genericAjaxForm (e) {
  e.preventDefault();
  var form = $(this);

  return $.ajax({
    url: form.attr('action'),
    type: form.attr('method'),
    dataType: form.data('type'),
    data: form.serialize()
  });
}

$('#login-form').on('submit', function (e) {
  genericAjaxForm.call(this, e).done(function (data) {
    console.log(data);
  });
});

<form action="http://example.com/login" method="POST" data-type="text" id="login-form">
  <input type="text" name="username" value="user" />
  <input type="password" name="password" value="mypass" />
  <label>
    <input type="checkbox" name="remember" /> Remember me
  </label>

  <button type="submit">Login</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

우리는 이것을 어떤 일반적인 형태로도 사용할 수 있고, 우리의 우아한 저하를 유지하고, 그것이 어떻게 작동해야하는지 완전히 설명하도록 할 수 있습니다. 일반적인 스타일 을 유지하면서이 기본 기능을 확장 할 수 있습니다 . JavaScript는 적절한 요소를 숨기거나 응답을 처리하는 것과 같은 자체적 인 문제에 대해서만 걱정합니다.

이제 다음과 같이 말합니다.

‘하지만 <div>특정 ID를 가진 요소로 의사 양식을 래핑합니다. 그런 다음 .find, 및 .serialize그들 과 함께 느슨하게 입력을 대상으로 지정할 수 있습니다 .

오, 그게 뭔데요? 실제로 <input>컨테이너에 요소를 포장 합니까?

그렇다면 아직 형태가 아닌 이유는 무엇입니까?