html 양식 태그의 목적은 무엇입니까

Question 1

html에서 양식 태그의 목적을 이해하지 못합니다.

form 태그를 사용하지 않고 쉽게 모든 입력 유형을 완벽하게 사용할 수 있습니다. 입력을 감싸는 것은 거의 중복되는 것처럼 보입니다.

또한 ajax를 사용하여 서버 측 페이지를 호출하는 경우 간단히 jQuery를 사용할 수 있습니다. 유일한 예외는 어떤 이유로 든 양식 태그를 업로드 스크립트로 감싸 야한다는 점입니다.

그렇다면 왜 양식은 텍스트 입력과 같은 단순한 일에 여전히 널리 사용됩니까? 그것은 매우 고풍스럽고 불필요한 일처럼 보입니다.

나는 그것에 대한 이점이나 필요를 보지 못합니다. 뭔가 빠졌 나봐요.

Question 2

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

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

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

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

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

document.forms

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

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

참고 : <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>컨테이너에 요소를 포장 합니까?

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

Question 3

AJAX없이 양식을 제출하려면 양식 태그가 여전히 필요합니다 (개발 초기 단계에서 유용 할 수 있음). 그러나 자바 스크립트를 사용하여 양식 태그없이 데이터를 제출할 수 있지만 몇 가지 이점이 여전히 떠 오릅니다.

양식 태그를 사용하면 의도를 보여줌으로써 사람들이 코드를 읽고 이해하는 데 도움이 될 수 있습니다.
'제출'방법은 양식에서 사용할 수 있습니다. 입력 [type = submit]이있는 양식이 있고 비활성화되지 않은 경우 다른 양식 입력 중 하나를 작성하는 동안 누군가가 '입력'을 누르면 양식이 제출됩니다. 입력 요소에서 'keydown'이벤트를 수신하면 여전히이를 수행 할 수 있지만 양식 태그로 무료로 얻을 수있는 좋은 UI입니다.
양식 태그로만 작동하거나 양식 태그로 더 쉽게 작동하는 몇 가지 다른 사항이 있습니다. 개발자는 결국 이러한 경우에 직면하게되며, 항상 어디서나 사용하고 문제를 피하는 것이 더 쉽다고 결정합니다. 정말로 진짜 질문은 왜 양식 태그를 사용 하지 않는가입니다.

Question 4

HTML 요소는 웹 서버에 정보를 제출하는 대화 형 컨트롤이 포함 된 문서 섹션을 나타냅니다.

우리는 모두 html 웹 페이지의 양식에 익숙합니다. 사람들이나 회사는 여러 가지 이유로 이메일 주소, 이름 및 사이트 URL을 요구합니다. 오늘날 인터넷에서 제품을 구매하는 것은 대부분 쉬운 일이며 보안 장치의 출현으로 귀하의 세부 정보와 힘들게 번 돈을 제출하는 데 사용되는 방법은 일반적으로 양식을 통해 수행됩니다.

더 많은 정보

하나를 연결

두 연결

Question 5

단일 웹 페이지에 3 개의 양식이 있고 모두 별도의 이메일 필드 (다른 ID 포함)가있는 시나리오가있었습니다. <div>처음 에는 따로 포장했습니다 . Safari의 iOS 자동 채우기는 <form>태그로 모두 감싸기 전까지 이상하게 작동했습니다 . 양식 중 하나에는 뉴스 레터 구독을위한 입력 필드가 하나만있었습니다. 사용자가 해당 입력을 자동으로 입력하면 웹 페이지가 페이지의 다른 부분에있는 다음 입력 필드로 스크롤됩니다.

그래서 긴 게시물에 대해 Oka에게 감사드립니다. 의미 론적 의미가있는 태그는 가능한 한 사용되어야합니다. 어떤 브라우저 / 장치가 다른 솔루션을 잘 처리하지 못하는지 알 수 없기 때문입니다.