HTMLフォームタグの目的は何ですか

Question 1

HTMLのformタグの目的がわかりません。

formタグを使わなくても、簡単にあらゆる入力タイプを完全に使用できます。入力をラップするのはほとんど冗長に思えます。

さらに、ajaxを使用してサーバー側のページを呼び出す場合は、jQueryを使用するだけで済みます。唯一の例外は、何らかの理由でフォームタグをアップロードスクリプトで囲む必要があることです。

では、なぜフォームがテキスト入力のような単純なものにまだそれほど広く使用されているのでしょうか？非常に古くて不必要なことのようです。

メリットやニーズがわかりません。多分私は何かが欠けています。

Question 2

欠落しているのは、セマンティックマークアップの理解です。とDOMの。

現実的には、HTML5マークアップを使用してほとんど何でも実行でき、ほとんどのブラウザーはそれを解析します。前回チェックしたとき、WebKit / Blinkは要素内の疑似要素も許可してい<input>ます、仕様の明確な違反である、 - Geckoはそんなにありません。ただし、マークアップで好きなことを行うと、セマンティクスに関しては間違いなく無効になります。

なぜ<input>要素の中に<form>要素を入れるのですか？同じ理由<li>で<ul>、と<ol>要素の内部にタグを配置します- タグが属する場所です。それは意味的に正しく、マークアップの定義に役立ちます。パーサー、スクリーンリーダー、およびさまざまなソフトウェアは、意味的に正しい場合（マークアップが構造だけでなく意味を持つ場合）にマークアップをよりよく理解できます。

この<form>要素では、フォームの送信時にブラウザに何を行うかを定義する属性methodとaction属性を指定することもできます。AJAXは100％カバレッジツールではありません。また、Web開発者は優雅なデグラデーションを実践する必要があります。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は、適切な要素を非表示にしたり、取得した応答を処理したりするなど、JavaScript自体について心配しています。

そして今あなたは言う：

「しかし、私<div>は特定のIDを持つ要素で疑似フォームをラップします-次に、with .findと.serializeそれらを使って入力を大まかにターゲットにすることができます...」

あ、あれ何？実際に<input>要素をコンテナにラップしますか？

では、なぜそれがまだフォームではないのですか？

Question 3

AJAXなしでフォームを送信できるようにする場合は、フォームタグが必要です（開発の初期段階で役立つ場合があります）。しかし、JavaScriptを使用してフォームタグなしでデータを送信することは可能ですが、いくつかの利点がまだ思い浮かびます。

formタグを使用すると、意図を示すことで、ユーザーがコードを読んで理解しやすくなる場合があります。
「送信」メソッドはフォームで使用できます。input [type = submit]が設定されたフォームがあり、無効になっていない場合、他のフォーム入力の1つに入力中に誰かが「Enter」を押すと、フォームが送信されます。それでも入力要素の「keydown」イベントをリッスンすることでそれを行うことができますが、フォームタグを使用して無料で取得できる素晴らしいUIです。
formタグでのみ機能する、またはformタグでより簡単なものは他にもいくつかあります。開発者は最終的にこれらのケースに遭遇し、いつでもどこでもそれらを使用して問題を回避する方が簡単だと判断します。本当に、本当の質問は、なぜformタグを使用しないのですか？

Question 4

HTML要素は、Webサーバーに情報を送信するためのインタラクティブなコントロールを含むドキュメントセクションを表します。

私たちは皆、HTML Webページのフォームに精通しています。さまざまな理由から、人や企業が私たちの電子メールアドレス、名前、およびサイトのURLを要求しています。今日インターネットで製品を購入することはほとんど簡単です。セキュリティデバイスの出現により、詳細情報や苦労して稼いだお金の提出に使用される方法は通常、フォームを介して実行されます。

より詳しい情報

リンク1

リンク2

Question 5

1つのWebページに3つのフォームがあり、そのすべてに個別の電子メールフィールド（IDが異なる）があるシナリオがありました。<div>最初は別々に包みました。SafariでのiOSの自動入力は、すべてを<form>タグで囲むまで奇妙な動作をしました。ニュースレターの購読用に、フォームの1つに入力フィールドが1つしかありませんでした。ユーザーがその入力を自動入力すると、Webページはページの別の部分にある次の入力フィールドにスクロールされました。

だから、岡さん、長い投稿に感謝します。どのブラウザ/デバイスが他のソリューションを適切に処理しないかわからないため、可能な限り意味のあるタグを使用する必要があります。