質問事項

htmlのformタグの用途がわかりません。

フォームタグを使わなくても、どんな入力タイプでも完璧に使えるんです。わざわざformタグで囲むのは冗長な気がします。

さらに、ajaxを使ってサーバーサイドのページを呼び出す場合は、単純にjQueryを使えばいいんです。唯一の例外は、アップロードスクリプトを何らかの理由でformタグに巻き付けなければならないことに気づいたことです。

では、なぜテキスト入力のような単純なものに、いまだにフォームが広く使われているのでしょうか。とても古臭く、不必要なことのように思えます。

メリットも必要性も感じられないんです。何か見落としているのかもしれません。

解決方法は？

あなたに欠けているのは、以下の理解です。 セマンティックマークアップ そして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> ? 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> 要素をコンテナに入れるのですか？

では、なぜまだ形になっていないのでしょうか？