html 폼태그의 목적은 무엇입니까?

html 폼태그의 목적은 무엇입니까?

html의 폼태그의 용도를 알 수 없습니다.

폼태그를 사용하지 않고 어떤 입력도 쉽게 사용할 수 있습니다.입력으로 감싸는 것은 거의 불필요한 것 같습니다.

또한 서버 측 페이지를 호출하기 위해 Ajax를 사용하는 경우 jQuery를 사용하면 됩니다.유일한 예외는 업로드 스크립트를 어떤 이유로 폼 태그로 감싸야 한다는 것입니다.

그렇다면 왜 텍스트 입력과 같은 간단한 것에 양식이 여전히 널리 사용되는 걸까요?그것은 매우 낡고 불필요한 일처럼 보인다.

나는 단지 그것의 이점이나 필요성을 모르겠다.내가 뭔가를 놓친 것 같아.

시멘틱 마크업과 DOM에 대한 이해는 누락되어 있습니다.

현실적으로 HTML5 마크업으로 원하는 것은 무엇이든 할 수 있으며 대부분의 브라우저는 이를 해석합니다.지난번에 확인했을 때 WebKit/Blink는 요소 내부에 의사 요소까지 허용하고 있기 때문에 Gecko 사양에 대한 명백한 위반입니다.그러나 마크업으로 당신이 원하는 것을 하는 것은 의미론에 관한 한 의심할 여지없이 무효가 될 것이다.

★★★★★★★★★★★★★★★★★★★★.<input> <form>요소?같은 이유로 우리는<li> " " " "<ul> ★★★★★★★★★★★★★★★★★」<ol>요소 - 그들이 있어야 할 장소입니다.의미론적으로 정확하고 마크업을 정의하는 데 도움이 됩니다.파서, 스크린 리더 및 다양한 소프트웨어는 마크업이 의미적으로 정확할 때 - 마크업이 구조뿐만 아니라 의미가 있을 때 마크업을 더 잘 이해할 수 있습니다.

<form>에서는, 「」를 정의할 .method ★★★★★★★★★★★★★★★★★」action[속성] : 폼폼 [ [ [ [ [ [ [ 。AJAX는 100% 커버리지 툴이 아니기 때문에 웹 개발자로서 적절한 성능 저하를 실천해야 합니다.JS가 꺼진 상태에서도 폼을 제출하고 데이터를 전송할 수 있어야 합니다.

마지막으로 폼은 모두 DOM에 올바르게 등록됩니다.JavaScript를 사용하여 이를 확인할 수 있습니다.이 페이지에서 콘솔을 열고 다음과 같이 입력합니다.

document.forms

페이지에 있는 모든 서류의 멋진 컬렉션을 얻을 수 있을 것이다.검색줄, 설명 상자, 답변 상자 모두 적절한 형식입니다.이 인터페이스는 정보에 액세스하거나 이러한 요소와의 상호 작용에 도움이 됩니다.예를 들어 양식은 매우 쉽게 일련화할 수 있습니다.

다음은 읽을거리입니다.

• 시멘틱 HTML
• HTML 폼 가이드

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

---

이 부분이 제가 질문을 뒤집는 부분이에요.

형식을 피함으로써 어떻게 내 삶을 더 힘들게 할 수 있을까?

무엇보다도 - 컨테이너 요소.누가 필요하겠어, 맞지?

물론 너의 작은 것<input> ★★★★★★★★★★★★★★★★★」<button>어떤 종류의 컨테이너 요소 안에 요소들이 내포되어 있나요?그들은 다른 모든 것들의 중간에 떠다니고 있을 수 없습니다.그래서 만약 아니라면<form>에 뭐★★★★★★★★★★★★★★★★★★★*<div>? A<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>컨테이너의 요소들?

그럼 왜 아직 서식이 아닌 거죠?

AJAX 없이 폼을 제출할 수 있는 경우에도 폼 태그가 필요합니다(개발 초기 단계에서 유용할 수 있습니다).그러나 javascript를 사용하여 폼태그 없이 데이터를 전송할 수 있지만 몇 가지 장점이 있습니다.

1. 양식 태그를 사용하면 사용자의 의도를 보여줌으로써 사용자가 코드를 읽고 이해하는 데 도움이 될 수 있습니다.
2. '제출' 방법은 양식에서 사용할 수 있습니다.입력[type=disable]이(가) 있는 양식이 있는데, 이 양식이 비활성화되지 않은 경우, 다른 양식 입력 중 하나를 입력하는 동안 다른 사람이 'Enter'를 누르면 양식이 제출됩니다.입력 요소에서 '키다운' 이벤트를 듣는 것으로도 이 작업을 수행할 수 있지만 폼 태그를 사용하면 무료로 사용할 수 있는 UI를 얻을 수 있습니다.
3. 그 밖에도 폼태그만으로 동작하거나 폼태그로 동작하기 쉬운 것이 몇 가지 있습니다.개발자들은 결국 이러한 사례를 접하게 될 것이고, 항상 어디에서나 사용하고 문제를 피하는 것이 더 쉽다고 판단하게 될 것입니다.정말 중요한 질문은 왜 폼태그를 사용하지 않는가?

하나의 웹페이지에 3가지 양식이 있고, 각각 다른 이메일 필드(아이디)가 있는 시나리오가 있었습니다.따로따로 싸서<div>처음에 사파리의 iOS 자동 채우기는 내가 그것들을 모두 싸기 전까지 이상하게 동작했다.<form>태그입니다. 한 양식에는 뉴스레터 구독을 위한 입력 필드가 하나밖에 없습니다.사용자가 해당 입력을 자동으로 입력하면 웹 페이지가 페이지의 다른 부분에 있는 다음 입력 필드로 스크롤됩니다.

그래서, Oka가 오랫동안 투고해줘서 고마워요.어떤 브라우저/디바이스가 다른 솔루션을 잘 처리하지 못하는지 알 수 없기 때문에 가능한 한 의미 있는 태그를 사용해야 합니다.

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

우리는 모두 html 웹 페이지의 양식에 익숙합니다.여러 가지 이유로 인해 당사 이메일 주소, 이름 및 사이트 URL을 요청하고 있습니다.오늘날 인터넷에서 제품을 구매하는 것은 거의 간단하며 보안 장치의 등장으로 인해 세부 정보 및 힘들게 번 돈을 제출하는 방법은 보통 양식을 통해 수행됩니다.

상세 정보

링크 1

링크 2

언급URL : https://stackoverflow.com/questions/31066693/what-is-the-purpose-of-the-html-form-tag